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


次回は

横並びをやります。

そのうちテストもします。


 

このブログの人気の投稿

11月9日(木)3コマ目

10月26日(木)3コマ目