LESSON 03 / 03 約4分
スマホでは1列、広い画面では2列
まずは仕組みをつかもう。細かい書き方は覚えなくて大丈夫。
01 これは何？
画面の幅に合わせて配置を変えることをレスポンシブデザイン＊1と呼びます。Grid＊2は縦横の配置、Flexbox＊3は一方向の並びに便利です。投稿一覧は、狭い画面では1列にすると読みやすくなります。
＊1 画面サイズに応じた表示の調整。
＊2 Grid：行と列で部品を並べる仕組み。
＊3 Flexbox：横一列などを柔軟に並べる仕組み。
02 なぜ必要？
パソコン向けの幅をそのままスマホに使うと、文字が小さくなったり横にはみ出したりします。まず1列で読みやすく作り、十分な広さがある場合に2列へ変えると、どちらの端末でも使いやすくできます。
03 最小限のコード・図
.posts {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
@media (min-width: 768px) {
.posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}04 ここだけ理解する
- displayで配置の仕組みを選ぶ。
- gapは並んだ部品同士の間隔。
- @mediaの条件を満たす画面幅だけ、指定を追加する。
05 覚えなくていいこと
Gridの全機能は覚えなくてOK。「何列にしたいか」をAIに伝えられれば進めます。
ASK AI
06 AIに聞いてみよう
質問文をコピーして、ChatGPTやCodexなどに貼り付けてみましょう。
投稿一覧をスマホでは1列、768px以上では2列にするCSSを書いてください。Gridを使い、長い文字列がある場合にもはみ出しを防ぐ方法と、画面幅を変えて確認する手順を教えてください。
07 AIの回答を見るポイント
- 狭い画面でも本文とボタンが読めるか。
- 列数が変わる直前と直後の幅でも崩れないか。
08 だいたい分かったら、次へ
「理解できた」はいつでも取り消せます。記録せずに次へ進んでも大丈夫です。