[基礎編] [コーディングの基礎] ブロックと入れ子 | 中国短期大学情報ビジネス学科メディア科目ブログ WEBCRE8TOR.COM

この記事の目次

htmlの基礎中の基礎「ブロック」と「入れ子」

htmlでのレイアウトの基礎中の基礎のポイントは二つ。

ブロックと入れ子です。

まず今まで記述したbodyタグやheaderタグなどのブロック要素のhtmlタグは一つの箱(ブロック)だと思ってください。
今回記述したものは、箱の中に箱を入れて、その中にさらに箱を入れた状態です。

まず、html文書内にbodyタグの記述を行ったことによって、
ブラウザ全体のサイズ(横幅100%・高さ100%) と大きさの箱(bodyタグ)が作られました。

次にbodyタグの入れ子でheaderタグを記述したことにより、
その箱(bodyタグ)の中に、同じ横幅のheaderタグという箱が表示されています。
一番大きな箱と同じ大きさなので、つまりブラウザの横幅100%のサイズです。

さらにその箱の中に、横幅を1024px(コンテンツ幅)にした<div class=”wrapper”></div>という箱を入れて箱の中で中央に配置します。

上の画像では仮に1024pxに指定してありますが、ブラウザのサイズより小さければどんなサイズでも表示できます。

しかしそのまま置いてしまうと箱は左側に寄ってしまいます。
そのため、cssを使って箱を真ん中に揃う指定(margin: 0 auto;)を行います。

こうしてブロックに親子関係を作り「入れ子構造」にしていくことで、
様々なレイアウトを作ることがブロックと入れ子の原理です。

画像を使ってもう一度説明します。

ページの全体を覆っているのが<body></body>です。
これが一番大きな箱です。

その中にロゴやグローバルナビゲーションがある<header></header>という箱を入れて、

その中に中央揃えのための<div class=”wrapper”></div>という箱を入れました。
これでページ最上部headerタグの入れ子の構造が出来ました。

なおheaderタグでは、子要素を柔軟にレイアウトさせる「display: flex;」を指定し、
併せて、子要素を均等配置かつ両端揃えにできる「justify-content: space-between;」を指定しました。

これで「<div class=”wrapper”></div>」の中で、ロゴのブロックを左寄せに、
navタグのグローバルナビゲーションのブロックを右寄せにし、2カラムレイアウトを実現することができました。