【初心者ノート】WEBデザイン HTML CSSのボックスモデル その2

htmlのアイキャッチ

前回記事の WEBデザイン HTML CSSのボックスモデル その1 でボックスモデルの概要を説明しました。

今回はボックスについてもう少し詳しく見ていきたいと思います。

ボックスの配置

ブラウザはHTMLに記述されている要素(見出し、段落、文章)に従って、画面上にそれぞれのボックスを配置していきます。

たとえば次のようなHTMLをブラウザに表示する様子を見てみましょう。

このHTMLでは、ブラウザの画面には次のボックスが配置されます。

  • body – 内容全体を包むボックス
  • h1 ー 大見出し(レベル1の見出し)
  • テキスト文章
  • div – いくつかのボックスをまとめるときなどに使用
  • h2 – 中見出し(レベル2の見出し)
  • img – 画像データ
  • p – 段落

ブラウザがそれぞれのボックスを画面に配置するイメージをアニメーションで見てみましょう。

HTML、CSSのボックスモデルでブラウザの画面にボックスが配置されるイメージを説明したアニメーション

今回の例ではスタイルシートを使わずにHTMLだけを使いましたので、横長(ブラウザの幅いっぱい)のボックスが上から順に配置されていくだけです。

次回は配置されたボックスにスタイルシート(CSS)で飾りつけを行う様子を説明します。

スポンサーリンク

シェアする

フォローする

スポンサーリンク