HTMLのレイアウト方法について解説する【HTML＆CSS攻略】

<section class="wrapper">
    <div class="container">
        <div class="content">
            <!-- ここにHTMLを書き込みます -->
        </div>
    </div>
</section>

▼CSS

.wrapper .container{
    max-width:1000px;
    margin:0px auto;
    padding:80px 0px;
}

テンプレートのHTMLは『.wrapper』『.container』『.content』というクラスがついた入れ子構造で出来ています。またCSSは、『.container』に対してのみ横幅や余白が設定されています。このHTML&CSSの表示イメージを図に起こすとつぎの様になります。

このうえで見出しや文章などの内容は、コメントで”ここにHTMLを書き込みます”と書かれた『.content』クラスのついたdiv要素内に書き込むように使います。

テンプレートが実際にどの様に作用するのかをイメージしてみて下さいね。

HTMLのレイアウトでどの様に役立つ？

上記のテンプレートを使ったコーディングでは、次のようなメリットが発生します。

▼コーディングのメリット

全体の余白に統一感が生まれWEBページが見やすくなる
同じパターンで書けるのでコードが読みやすくなる
HTML&CSSのコードや、クラスの管理が行いやすくなる

WEBページのデザインでは、例えばつぎの様なセクションの表現がたびたび登場しますが、コーディングでもデザインの『横幅・位置・余白』を再現してゆく必要があります。

ですが仮に、セクションごとに毎回異なるHTML・CSSを書いていたら・・・余白の調整方法もセクションごとに異なってゆくこととなり、結果として、つぎの様な問題につながってゆきます。

セクションごとのレイアウト調整が行いづらくなる
見づらい・分かりにくいコードを生んでしまう
調整が調整を呼び、余計なコードが増えてしまう

こうなるとちょっと大変・・・！レイアウト崩壊の始まりかも・・・。

上記の様な問題を起こさないためにも、セクションごとに発生する『横幅・位置・余白』の調整方法は、あらかじめ統一しておくのが良いと言えます。

今回紹介するHTML&CSSの『型』は、上記の様な問題回避のために出来ているテンプレートになります。

ポイントは繰り返し使うこと

今回紹介するテンプレートの利用のポイントとしては、繰り返し使うことです。

ヘッダーやフッター、メインビジュアルなど、固有のレイアウトを持つパーツは個別にコーディングすることも多いですが、一方でWEBページの内容を表している”セクション”の部分に対しては、基本的にはこのテンプレートで対応ができます。

レイアウトの『型』であらゆるセクションを組もう.jpg — HTML&CSSの『型』の適用イメージ

繰り返し使うことは、良質なコードを生むポイントにもなります。使えそうな場所には積極的に使ってゆきましょう。

つぎの章では、レイアウトの『型』を使ったHTML＆CSSの構成方法について解説してゆきます。

レイアウトに合わせてHTMLを構成する

それでは実際にHTML＆CSSの『型』を使用した、レイアウトの構成方法について解説してゆきます。また今回は、次の『シングルカラムレイアウト』のデザインを例に解説を進めてゆきます。

HTMLレイアウトのサンプル＿BEFORE.jpg — 『シングルカラムレイアウト』のWEBページ

レイアウトの『型』を当てはめる

レイアウトの構成にあたって、まずはHTML＆CSSの『型』で当てはめてみましょう。すると、次のようにイメージ出来ます。

HTMLレイアウトのサンプル＿AFTER.jpg — レイアウトの『型』を当てはめたイメージ

上記のWEBページには、大きく４つのセクションがあるので、セクションの分だけ『型』を適用することが出来ます。

レイアウトのHTML＆CSSを書き出す

この上で、イメージにしたがって実際のHTML＆CSSを書き出してみましょう。すると次の様になります。

▼HTML

<!-- MESSAGE -->
<section class="message">
    <div class="container">
        <div class="content">
            <!-- ここにHTMLを書き込みます -->
        </div>
    </div>
</section>
<!-- // MESSAGE -->
<!-- VISION -->
<section class="vision">
    <div class="container">
        <div class="content">
            <!-- ここにHTMLを書き込みます -->
        </div>
    </div>
</section>
<!-- // VISION -->
<!-- ABOUT -->
<section class="about">
    <div class="container">
        <div class="content">
            <!-- ここにHTMLを書き込みます -->
        </div>
    </div>
</section>
<!-- // ABOUT -->
<!-- STORY -->
<section class="story">
    <div class="container">
        <div class="content">
            <!-- ここにHTMLを書き込みます -->
        </div>
    </div>
</section>
<!-- // STORY -->

▼CSS

/*---------------------------------
　MESSAGE
---------------------------------*/
.message .container{
    max-width:1000px;
    margin:0px auto;
    padding:80px 0px;
}
/*---------------------------------
　VISION
---------------------------------*/
.vision .container{
    max-width:1000px;
    margin:0px auto;
    padding:80px 0px;
}
/*---------------------------------
　ABOUT
---------------------------------*/
.about .container{
    max-width:1000px;
    margin:0px auto;
    padding:80px 0px;
}
/*---------------------------------
　STORY
---------------------------------*/
.story .container{
    max-width:1000px;
    margin:0px auto;
    padding:80px 0px;
}

HTML＆CSSの『型』を使ったレイアウトが構成出来ました。

ここでのポイントは『.wrapper』のクラス名をセクションごとの名前に変えている点です。また、上記のHTML＆CSSには各セクションで区切る様にコメントも追加しています。見やすく・分かりやすいコードを保つためにも、コメントは忘れずに追加しましょう。

ここまで出来たら、後はセクションごとの内容を『.content』が与えられたHTML・CSSに書いてゆけばOKです。