CSSのレイアウトの基本【基礎中の基礎】

CSSのレイアウトの基本的なことをまとめています。初学者だった自分がつまづいた、マジで超基礎的なことなので、初心者以外は見る価値が無いと思います。思いついたら随時、追記していきます。

まずは大枠で考える

レイアウトのコツは、大枠から考えていくことです。図にすると、以下のように要素を並べていくと、個人的にはやりやすいです。今回はペライチのLPを想定していますが、複数ページでも基本は同じです。

まずは、一番上にheader部分があり、一番下にfooter部分があり、その間にsection部分がある、という配置です。そして、必要な数だけ、セクション部分を増やしてコーディングしていきます。

headerとfooterはbody＝画面一杯に拡がる事が多いのに対し、secitonはある程度幅が決まっているので、この3つをまずは分けて配置します。

学習段階ではタグは、divタグでもsectionタグでも、どちらでもいいと思います。もし実際に働いている現場での指定や指示があれば、その通りに選べばいいと思います。とりあえず、ここではsectionタグを増やして対応します。

いきなりkvが出てきました。KV＝Key Visualの略で、呼び方は色々あるにせよ、基本的にどのサイトにもあるメインとなるヴィジュアル＝画像とか映像とかです。

最初にHPを開いたときに読者に見せるコンテンツです。横いっぱいの画像の中に文字とかボタンとかが入ることが多いので、sectionとは分けてレイアウトを考えたほうが楽です。

基本的なホームページのレイアウトはPCでもスマホでも、上の図のようなイメージで大枠はできあがります。

ピクセルパーフェクトでのコーディングが望ましいのは言うまでもないですが、クラスを増やしてCSSの記述量が増えてしまうと他の人から分かりづらく、サイトを変更するときに大変な手間や時間がかかることになる可能性があり、サイトのメンテナス性がかなり低下します。

そこで大事になるのが、共通の要素を見つけ出して、パーツ化していくCSSを記述していくことです。例えば、headerやfooterはもちろん、ボタンとかはどのサイトでも使い回せるものの1つですが、実はレイアウトも要素として使いまわしができます。次の図を見てください。

レイアウトには法則があり、要素と要素の間は同じに間隔になっていることが多いです。この場合でいうと、section同士は同じ感覚を保って配置されています。そのほうが人の視覚にはなんとなくイイ感じに映るからです。

また、下の図のように、sectionはbodyに対して中央に配置されることが多いので、左右の余白は同じことが多いです。

そこで、section部分は以下のように記述すると、使い回しができるようになります。paddingの値とかは適宜変えてください。

<section>
  <div class="section-wrapper">
    <div class="section-inner">
      ここに中身を記述
    </div>
  </div>
</section>

.section-wrapper {
  padding: 0 30px
}

.section-inner {
  max-width: 1100px;
  padding: 0 30px;
  margin: 0 auto;
}

section-wrapperは、上下のセクションの余白を決めています。

次にsection-innerで、左右の余白を指定しています。

重要なポイントとしては、必ず最初に上下に余白入れ、次に別のクラスを指定して左右に余白を入れるということです。２つのクラス用意すること、上下と左右のクラス、もしくはx軸とy軸のクラスを、それぞれ別々のクラスを用意するのが、レイアウトをパーツ化する上での重要ポイントです。

左右と上下、言い換えるとx軸とy軸を1つのクラスでやろうとすると、使い回しができなくなることが多いので、必ず別々にクラスを指定してコーディングしていきましょう。

例えば今回のコードの例で言うと、、sectionで画像を横いっぱいに拡がる場合は、wrapperに対してCSSで画像を配置すると記述できたりするので、上下と左右の余白は別々のクラスで設定するのがおすすめです。

基本的な運用方法としては、上下幅だけを定義するwrapperは全てのsectionで利用し、inner部分でデザインカンプに応じた柔軟な対応をするイメージとなります。

以上、超基礎レベルのCSSのレイアウトの基本でした。