【html】レイアウト構造の見方を知る｜視点のポイント

「htmlのコードを見てると何がなんだか分からなくなる」

初心者の人はhtmlコードに向かうたび、黒い画面と見慣れない横文字の羅列で混乱すると思います。

その理由はどこをどう見ればいいか分からないから。

実際、上から順に<h2>や<div>を見ていっても、つかみどころがなく感じるはずです。

しかし見るポイントさえ分かれば、頭を整理しながらhtmlコードを理解できます。

そのポイントとは大きなエリアごと。

一塊にして見ることです。

この大まかなエリアをレイアウトと言います。

そこで今回は初心者の方向けに、htmlレイアウトの見方を紹介します。

htmlコードを見るのが苦手な人は、参考にしてみてください。

htmlレイアウトを理解する３つのポイント
参考サイト
まとめ

htmlレイアウトを理解する３つのポイント

①bodyのレイアウトを大きく分けて理解する

bodyはheader・main・footerでできている

ページはまず<body>があって、その中に<header> <main> <footer>の3つが入っている。

そんな作りになっています。

どんなサイトであってもです。

親子関係で表すとこちら。

親：<body>
子：<header> <main> <footer>

なので、この<body>の中に入っている3つだけをまずは意識しましょう。

ヘッダー、メイン、フッターを分けて考えるようにしてみてください。

<body>の基本レイアウト

<body>
  <header>

  ヘッダーエリア

  </header>
  <main>


  メインエリア


  </main>
  <footer>

  フッターエリア

  </footer>
</body>

こんな感じに。

ヘッダーやメイン、それぞれの中身はたくさんありますが、大まかに分けるとこの3つです。

たった3つから成り立ってるんです。

そう考えると、とてもシンプルですよね。

というわけで、次に行きましょう。

<body>のレイアウトを<header> <main> <footer>の3つに分けて理解する。

②mainの中でも大きく分けて理解する

mainはsectionとarticleでできている

<header> <main> <footer>で大きく分けたら、次は<main>の中でさらにレイアウトを分けます。

ちなみに<header> <footer>は大きなエリアではないので、細かく分ける必要はありません。

<main>のレイアウトは、<section>か<article>で成り立っています。

親子関係で言うと、こうですね。

親：<main>
子：<section> <article>

<main>
  <section>


  </section>
  <section>


  </section>
  <article>


  </article>
</main>

このたった2つから<main>は成り立っています。

<section>や<article>は、本で例えるなら章の部分にあたります。

この章をまとめて言うと本文。

つまり<main>ですね。

ちなみにヘッダーはまえがき部分、フッターはあとがき部分となるでしょうか。

<header> … まえがき
<main> … 本文
<footer> … あとがき

本のまえがきには、「はじめに」といった文が書かれていて、そのあとに目次がきます(他のページを紹介するナビゲーション<nav>にあたる)。

あとがきには、「おわりに」といった文と、その本に関わった人や作られた年月日が書かれています(コピーライトにあたる）。

sectionやarticleの中身を書いている時

<section>や<article>は割とエリアが広いです。

ですので、その中ではいろいろな要素を使います。

<h2>や<li>や<p>、それに<span><a>などなど。

さらに<div>を何度も使っていると、どこの部分を書いているのか分からなくなると思います。

細かいところをやるほどに、そのエリアの全体像が見えにくくなるからです。

ですので、頭が混乱してきた時は<section>や<article>に目を向けましょう。

<main>
  <section>
    <h2>見出し</h2>
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
    </ul>
    <div>
      <h3>小見出し</h3>
      <p>テキスト…</p>
    </div>
  </section>
  <article>


  </article>
</main>

外枠が分かれば、頭の整理ができるはずです。

<main>のレイアウトを<section>と<article>の2つに分けて理解する。

③分けた大きなエリアを見やすくして理解する

これまではエリアの分け方について解説しました。

さいごはhtmlコードの書き方を工夫することで、分けたエリアをより見て理解しやすくします。

インデントしてコードを見やすくする

こちらのコードをご覧ください。

<main>
  <section>

  </section>
  <section>


  </section>
</main>

<!-- 半角2個ぶんの字下げ -->

上のコードのように、<main>の中の<seciton>は少し下げて書きます。

これをインデントを下げると言います。

インデントとは字下げのことです。

これは、

<main>と<section>の親子関係をはっきりさせる
単純にレイアウト構造として見やすくなる

という2つの効果があります。

【参考記事】css指定で見るべき、htmlの親子関係

改行を入れてコードを見やすくする

<main>
         ←1行あける。
  <section>


  </section>
 　　　　　←1行あける。
  <section>


  </section>
          ←1行あける。
</main>

上のように<main>と<seciton>、または<section>どうしを1行あける方が見やすいという人もいるはずです。

エリアを折り畳んでコードを見やすくする

例えば、下のコードのようにsec-01のcss指定をしている時は、sec-02や<article>は折り畳んでおくのも見やすさの助けになります。

ほかの部分が目に入って気が散ることがあるからです。

▼<main>
▼  <section class="sec-01">


   </section>

▶︎  <section class="sec-02"> </section>　←折り畳んだ
▶︎  <article> </article>　←折り畳んだ
 </main>

と、こんな具合に。

こうすると、今どこのhtmlレイアウト部分のcss指定をしているかが理解しやすくなります。

エリア分けしたhtmlレイアウトを見て理解しやすいように書く。

参考サイト

この記事は「HTML Living Standard」をもとに書きました。

「HTML Living Standard」はhtmlのルールブックみたいなもので、その最新版です。

1つ前は「HTML5」です。

いずれも翻訳ありです。

専門家向けに書かれてるので、余裕のある方だけコソッとご覧ください〜

まとめ

htmlレイアウトの見るポイントについて紹介しました。

大きなエリアで分けて見ることが、頭を整理しながらhtmlレイアウトを理解するコツです。

ですので、上記にあげたポイントを意識してコードを書く時も取り組んでみてください。

こちらの記事もどうぞ。

cssが書けない！【シンプルなヘッダーから作り方のコツを学ぼう】

コーディングを挑戦中の方向けに、シンプルなヘッダーの作り方を解説しています。デザイン図の見方から、htmlレイアウトの組み方・css指定の流れをご覧いただければと思います。