家計簿アプリを作る #33：レスポンシブ対応

プログラミング

家計簿アプリ作成シリーズの第33回です。スマートフォンでも使いやすいようにレスポンシブ対応を行います。

対応内容

  • 年月セレクト＋検索バーをスマートフォンで縦並びにする
  • テーブルを横スクロール可能にする
  • 集計カードをスマートフォンで縦並びにする
  • ボタンエリアをスマートフォンで縦並びにする

Tailwind のレスポンシブプレフィックス

Tailwind ではブレークポイントのプレフィックスを付けることで画面幅に応じたスタイルを適用できます。

プレフィックス 幅
（なし） 全幅（スマートフォン基準）
md: 768px 以上
lg: 1024px 以上

「スマートフォンファースト」で書くのが基本です。デフォルトのスタイルをスマートフォン向けにして、md: 以上でPC向けのスタイルを上書きします。

実装

年月セレクト＋検索バー

<div class="flex flex-col md:flex-row gap-4 items-start md:items-center">
  <div class="flex items-center">
    <Label class="w-10">年月</Label>
    <Select class="w-32" ...>...</Select>
  </div>
  <Search ...>
    <Button onclick={handleSearch}>検索</Button>
  </Search>
</div>

年月ラベルとセレクトは常に横並びにしたいので div で囲んで flex items-center を維持します。外側の div だけ flex-col md:flex-row で縦横を切り替えます。

テーブルの横スクロール

<div class="overflow-auto">
  <Table shadow hoverable={true}>
    ...
  </Table>
</div>

overflow-auto で横スクロールが有効になります。

集計カード

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <Card>...</Card>
  <Card>...</Card>
  <Card>...</Card>
</div>

スマートフォンでは1列、PC では3列に切り替えます。

ボタンエリア

<div class="flex flex-col md:flex-row gap-2 justify-between items-center w-full">
  <div class="flex gap-2">
    <Button href="...">登録</Button>
    <Button href="...">CSVエクスポート</Button>
  </div>
  <div class="flex gap-2">
    <DarkMode />
    <form method="POST" action="?/logout" use:enhance>
      <Button type="submit">ログアウト</Button>
    </form>
  </div>
</div>

登録・CSVエクスポートは左側にまとめ、DarkMode・ログアウトは右側にまとめます。スマートフォンでは縦並び、PCでは横並びで左右に配置します。

まとめ

対応内容 クラス
縦→横の切り替え flex-col md:flex-row
グリッドの列数切り替え grid-cols-1 md:grid-cols-3
テーブルの横スクロール overflow-auto
整列の切り替え items-start md:items-center
← トップページに戻る