CSS

CSSの基本「ボックスモデル」をCSSで書いてみる

CSS(スタイルシート)を学ぶ上で必ず理解しないと行けないものの一つに「ボックスモデル」があります。

巷ではボックスモデルの図が良く出てますが、この記事ではボックスモデル自体をCSS(スタイルシート)で書いてみました。

relativeとabsoluteを使えば簡単に書くことができます。

ボックスモデルをCSSで書く方法

ボックスモデルとはHTMLの要素はすべて四角の箱の中に入っているという考え方で、この箱の中身に対してCSS(スタイルシート)で様々な修飾を行います。

まずは実際にボックスモデルをCSS(スタイルシート)で書いてみます。

CSSでボックスモデルを書いてみる
margin

border
padding
contents

基本的には各HTMLの要素にそれぞれの色分けされたように、外側から「margin」「border」「padding」「contents」を持ちます。

  • marginは他の要素との余白を表します。
  • borderは要素が持つ罫線を表します。
  • paddingは要素のborderとcontentsを分ける余白を表します。
  • contentsは要素の内容を表します。

ボックスモデルをCSSで書くソース

次に実際にソースを見てみます。
まずはCSS(スタイルシート)から。

これは、それぞれの部品の箱を色違いに書いてます。
大外の箱(marginを表す箱)から順に少しずつ小さくして重ねています。

次にHTMLです。

これでソースを書いた部分に無事ボックスモデルが表示されます。

margin

border
padding
contents

まとめ

CSS(スタイルシート)の基本であるボックスモデルをCSSで書いてみました。

CSS(スタイルシート)を工夫すれば色んなことができますね。

以上、CSSの基本「ボックスモデル」をCSSで書いてみるでした。

スポンサーリンク

-CSS
-

Copyright© ソフトウェア開発日記 , 2019 All Rights Reserved.