1月30日(火)3コマ目
今日、やったこと
枠線、余白
今日のホワイトボード
枠線・余白
HTMLのほとんどのタグは上から下へ縦に配置される。
さらにそれぞれ
- 枠線(border)
- 枠線内の余白(padding)
- 枠線外の余白(margin)
が設定できる。
![]() |
| 図 枠線、余白の設定 |
上だけ、下だけ、右だけ、左だけの枠線・余白
枠線、余白は
- 上だけ(xxx-top)
- 下だけ(xxx-bottom)
- 左だけ(xxx-left)
- 右だけ(xxx-right)
の設定もできる。
![]() |
| 図 上、下、右、左だけの枠線・余白の設定 |
見出しを目立たせるために左だけや下だけに太めの枠線をつけることがある。
練習1
正解例をあげておきます。
style.css
練習2
正解例をあげておきます。
演習1 style1.css
style1.css
演習2
HTML
style2.css
演習3
HTML
style3.css
演習4
style4.css
演習5
style5.css
演習6
style6.css
演習7
style7.css
演習8
style8.css
次回は
横並びをやります。
そのうちテストもします。

