【Tailwind CSS】スマホで見やすい横スクロールUIを実装してみた（看護師向け計算ツール開発#2）

職場にあったら便利だなと思い開発を始めた看護師向けの計算ツールアプリ。
今回はスマホで使いやすい計算ボタンUIをTailwind CSSで実装しました。

🎯 目的

• PC：4列グリッド表示
• スマホ：2列×横スクロール化
• コードを1つにまとめ、レスポンシブ対応

🧩 CalcNav.tsx（レイアウト部分）

<div
  className="
    grid grid-cols-4 gap-4 
    max-w-3xl mx-auto
    sm:grid-cols-2 sm:overflow-x-auto sm:flex sm:flex-nowrap sm:gap-3 sm:pb-2
  "
>
  {calculators.map((calc) => (
    <CalcButton
      key={calc.id}
      calc={calc}
      active={activeCalc === calc.id}
      onClick={() => onSelect(calc.id)}
    />
  ))}
</div>

✅ ポイント

• grid-cols-4 → PC時は4列固定
• sm:flex sm:overflow-x-auto → スマホ時は横スクロール化
• sm:pb-2 → 下余白で操作性向上

🎨 ボタンデザイン（CalcButton.tsx）

<button
  className={`
    flex flex-col items-center justify-center
    w-32 h-32 rounded-2xl shadow-sm
    ${active ? "ring-2 ring-offset-2 ring-gray-500" : ""}
    transition-transform hover:scale-105
  `}
>
  <Image src={calc.iconPath} alt={calc.name} width={40} height={40} />
  <span className="mt-2 text-sm font-medium">{calc.name}</span>
</button>

• hover:scale-105：ふわっと浮く操作感
• ring-2：選択中ボタンを明確化

💡 学び

• Tailwind CSSのレスポンシブ修飾子で柔軟にUIを制御できる
• grid＋flexを組み合わせると、1コンポーネントでデバイス最適化が可能
• ちょっとしたアニメーションがUXを大きく改善する

---

📘 詳細な開発背景や実装過程はZennで公開中👇
👉 🩺看護師が医療現場で使える計算ツールの開発に挑戦してみた #2（Zenn）