CSS

CSSのボックスモデルを確認しよう

ボックスモデルを確認しながらheader領域のスタイリングを進めていきます。

  • background-color
  • ボックスモデル

background-color

・背景を変える方法に着いてみていきます。

・まずはセレクターをheaderに設定していきます。次にプロパティをbackground-colorとし、:(コロン)を挟んで希望の色を指定します。今回は#efefefというグレーっぽい色を指定してみます。

ボックスモデル

・背景を指定すると指定したセレクターがどの領域を締めているのかを確認することもできます。

・HTMLで書いた要素はブラウザーで表示したときに四角医療域を確保してくれ、ディベロッパーツールで調べることができます。今回はheaderの調べたいので背景色が変わったあたりで右クリックをして検証を押すと目的の箇所のデベロッパーツールが表示されます。

・elementsのcomputedで図があるので見やすくなっていると思います。headerの領域は134px* 352.875pxが指定されていてその外にpaddingその外にborderその外にmarginがあるということがわかると思います。この設計をCSSのボックスモデルと呼ばれています。

・それぞれ重要ですが近いうちに勉強していきますので今回はこんな感じの作りになっていることを覚えるだけでいいと思います。

・こういったボックスの高さや幅をCSSwidth(幅)やheight(高さ)で指定していくことによってボックスの形を変形させていく基礎の勉強になるのでしっかりと覚えていくようにしましょう。

ー広告ー

 

 






-CSS