Step 1: Web Basics

レスポンシブデザイン：
「モバイルファースト」の衝撃

PC版を作ってからスマホ版を調整する…。そんな私の古いやり方を180度変えてくれた考え方のメモです。

まずスマホ。それが今のスタンダード

WebサイトはPCで開発するので、つい「PCでどう見えるか」を優先してしまいがちでした。でも、今のユーザーはほとんどがスマホ。そこで学んだのが モバイルファースト という手法です。

Tailwind CSS では、基本のクラス名をスマホ用として書き、PC用だけ md:（Medium以上の画面幅）をつけて上書きします。これが驚くほど合理的でした。

<!-- 
  基本は flex-col (縦並び / スマホ用)
  画面が中サイズ以上になったら flex-row (横並び / PC用) 
-->
<div class="flex flex-col md:flex-row">
  ...
</div>

「猫の手貸し」の画面も、基本は縦長のスマホに最適化し、PCで見た時だけ横に広いレイアウトに変わるように設計しました。画面幅という動的な環境に合わせてスタイルを「変化」させる。この動的な設計は、インフラのオートスケーリングのような美しさを感じました。