LESSON 02 / 03 約4分
余白があると、読みやすい
まずは仕組みをつかもう。細かい書き方は覚えなくて大丈夫。
01 これは何？
画面の部品は、箱のように考えられます。paddingは箱の内側の余白、borderは枠線、marginは箱の外側の余白です。widthは幅、heightは高さ。文章が増える箱は、高さを固定しない方が扱いやすくなります。
02 なぜ必要？
投稿本文が枠にくっついていると、読むのが窮屈になります。内側の余白で読みやすさを、外側の余白で投稿同士の間隔を調整できます。スマホで横にはみ出さないように、画面に収まる幅を指定しましょう。
03 最小限のコード・図
.post-card {
box-sizing: border-box;
width: 100%;
padding: 24px;
border: 1px solid #cbd5e1;
margin-bottom: 16px;
border-radius: 16px;
}04 ここだけ理解する
- paddingは内側、marginは外側の余白。
- border-boxは指定幅に余白と枠線を含める。
- 文章の長さが変わる場所では固定の高さに注意。
05 覚えなくていいこと
余白の省略記法を全部覚えなくてOK。最初は意味が分かる書き方で十分です。
ASK AI
06 AIに聞いてみよう
質問文をコピーして、ChatGPTやCodexなどに貼り付けてみましょう。
投稿カードの内側に24px、カード同士に16pxの余白を付けるCSSを書いてください。paddingとmarginの違い、box-sizingの意味を簡単に説明し、長い文章とスマホ幅でも試す方法を教えてください。
07 AIの回答を見るポイント
- 長い本文が枠からはみ出したり切れたりしないか。
- 小さい画面で横方向にスクロールが発生しないか。
08 だいたい分かったら、次へ
「理解できた」はいつでも取り消せます。記録せずに次へ進んでも大丈夫です。