ChatGPTを使用したアプリ開発記【投稿一覧画面のモバイル最適化】

コード

App.js

<div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-100 to-blue-300 px-4 py-10">
  <div className="w-full max-w-md bg-white rounded-2xl shadow-xl p-6 sm:p-8">
    <h2 className="text-2xl sm:text-3xl font-bold mb-6 text-center text-blue-600">
      Tomomitsu Keruma SNS
    </h2>

    <input
      type="email"
      className="w-full border border-gray-300 rounded-md px-4 py-3 mb-4 text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-blue-400"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      placeholder="メールアドレス"
    />
    <input
      type="password"
      className="w-full border border-gray-300 rounded-md px-4 py-3 mb-6 text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-blue-400"
      value={password}
      onChange={(e) => setPassword(e.target.value)}
      placeholder="パスワード"
    />

    <div className="flex flex-col space-y-3">
      <button
        className="bg-blue-500 text-white px-4 py-3 rounded-full text-sm sm:text-base hover:bg-blue-600 transition duration-200 shadow-md"
        onClick={loginEmail}
      >
        ログイン
      </button>
      <button
        className="bg-blue-500 text-white px-4 py-3 rounded-full text-sm sm:text-base hover:bg-blue-600 transition duration-200 shadow-md"
        onClick={signupEmail}
      >
        登録
      </button>
      <button
        className="bg-blue-500 text-white px-4 py-3 rounded-full text-sm sm:text-base hover:bg-blue-600 transition duration-200 shadow-md"
        onClick={loginGoogle}
      >
        Googleでログイン
      </button>
    </div>
  </div>
</div>

項目	説明
px-4 py-10（外側）	スマホでも余白を確保し見やすくします
sm:p-8	大きい画面で余白を広げて見やすくします
text-sm sm:text-base	小さい画面では少し小さく表示、PCでは標準サイズ
py-3 ボタンの高さ	指で押しやすいようにボタンを広くしました
rounded-full	視覚的に親しみやすいボタンスタイル

モバイルUI