HTML/CSS レイアウトの書き方

HTML/CSS フロントエンド

こんにちは。石田( @ishiyu )です。

今回はフロントエンジニアとして、HTML/CSS レイアウトについて説明したいと思います。
弊社は、自分以外にフロントエンジニアと呼べる人がいないため、失敗例も交えて説明できればと思います。

TL;DR

思ったより長くなってしまったので先に要約をざっくり書いておきます。

  • 全体レイアウトを grid レイアウトを使用する
  • その他のレイアウトでは flex レイアウトを使用する
  • ウインドウサイズに合わせて、回り込ませたい場合に float レイアウトを使用する（flex レイアウトでも回り込みの設定は可能だが、ネストが深くなりがちで手間がかかるため）

この3つを守ることで、構造が分かりやすいレイアウトになります。

また、極力 position や display を指定したレイアウト構成はしないようにしましょう。

レイアウトの種類

知っている人も多いと思いますが、まずはCSSでのレイアウト方法について簡単におさらいしましょう。
現在、よく知られているものとしては以下の4つがあります。

  • table レイアウト
  • float レイアウト
  • flex レイアウト
  • grid レイアウト

それぞれ、以下のデザインでレイアウトを組んでみました。

f:id:ishiyu1125:20201120172526p:plain
レイアウト

table レイアウト

IT業界に10年以上いる人にとっては懐かしいやつですね。
昔はこれがスタンダードでした。

試しにレイアウトを組んでみると、このようになります。

See the Pen Tabel Layout by Yu Ishida (@ishiyu) on CodePen.

ブラウザに左右されずにレイアウトされるため、わりと嬉しかった印象なのですが、久々に組んでみると、ネストが深すぎて非常にややこしくて辛いです。

今となっては、このレイアウトで組むのはHTMLメールぐらいじゃないですかね。

float レイアウト

自分は、float で全体レイアウトを組んでいるシステムを作ったことはないですが、コンポーネントレベルでは未だによくお世話になります。 IE6 でマージンが2倍になるバグがあったので、流行った当時（2000年代前後）では好んで使うことはなかったです。

レイアウトを組んでみると、このようになります。

See the Pen Float Layout by Yu Ishida (@ishiyu) on CodePen.

テーブルレイアウトと比べると、ぐっと見やすくなりました。

弱点としては width や height をきちんと設定していかないとうまく回り込んでくれないこと、 clear を設定し忘れて回り込みが解除されずにレイアウトが崩れることですね。

flex レイアウト

CSS3が主流になって、使われだしたレイアウトです。 今でもかなり使われている印象を持っています。（注意は必要ですが）IE11でもきちんとレイアウトできるので非常にありがたいですね。

レイアウトを組んでみると、このようになります。

See the Pen Flex Layout by Yu Ishida (@ishiyu) on CodePen.

float レイアウトと比べると、レイアウトのための style 設定は増えましたが、width の意識が減るのがありがたいです。回り込みの意識も必要がなくなるので楽ですね。

grid レイアウト

flexレイアウトだけでも、ほぼすべてに対応できるのですが、flexは縦か横の一方向に対してしか柔軟ではありません。 そこで登場したのが grid レイアウトです。

レイアウトを組んでみると、このようになります。

See the Pen Grid Layout by Yu Ishida (@ishiyu) on CodePen.

ページ全体レイアウトを組むときには非常に重宝するレイアウトで、grid レイアウト内で完結するため、width や height の指定が不要になるのが特徴です。

レイアウトするときに守るべき考え方

紹介した4つを使用してHTML/CSS のレイアウトしていくことで問題の起こりにくくなると思います。（table レイアウトを使うことはないと思いますが）

つまり

  • 全体レイアウトを grid レイアウトを使用する
  • その他のレイアウトでは flex レイアウトを使用する
  • ウインドウサイズに合わせて、回り込ませたい場合に float レイアウトを使用する（flex レイアウトでも回り込みの設定は可能だが、ネストが深くなりがちで手間がかかるため）

この3つを守ることで、構造が分かりやすいレイアウトになります。

よく見る失敗例

とりあえず、小手先で解決しようとしたけど、結局 ウインドウサイズやズーム設定を変えると崩れたりしやすいことが多いものです。

絶対位置指定での配置をする

<div style="position: relative;">
  <img src="hoge.jpg" style="position: absolute; left: 3px;">
  <span style="position: absolute; left: 120px;">hogehoge</span>
</div>

上記のようなタイプです。 このような場合、ウインドウサイズが超えると切れてしまう見づらくなります。 オンラインマークなどデザインを重ねる以外で、position: absolute; を使用するのは控えたほうが無難です。

display を変えて、無理やりレイアウト調整する

<div>
  <img src="hoge.jpg">
  <div style="display: inline-block;">hogehoge</div>
</div>

このような場合はデザインに問題はありませんが、読み手側が理解しにくいという問題が発生します。 今回の例ではHTMLに直接CSSを設定していますがファイルが分かれることも多く、多用されると結構ツライことが多いです。

まとめ

今回は、HTML/CSSのレイアウトについて、まとめてみました。
エンジニアの方々はプログラミングする際にはネストの数やパフォーマンスなどを意識して書いていると思います。そこには、よく書くパターンのようなものがあるはずです。
同じようにHTMLについても、同じようによく使うパターンがあるため、それを使うことで簡単で他の人にも読みやすくものになります。

ぜひとも、デザインが崩れなかったらいいやぐらいに適当に書くのではなく、読みやすいものを意識して書いてもらえると嬉しいです。