Webサイトのレイアウト

CSSの最も根本的な話を最初にさせて頂きますが、サイト構築の際にコンテンツをBoxとしてイメージし、はほぼ全ての要素やパーツのレイアウトがCSSによって調整出来てしまいます。
そこでプロパティ「display」の役割と機能をしっかり理解することで、Webページのマークアップを学習するうえで、CSS基礎部分以降の内容も段々楽しくなると思います。

現在主流の構築手法について

近年におけるWebページのレイアウトデザインは、様々な目的に合わせて進化しているように感じられます。
コンテンツ自体はシンプルな内容であっても、そのレイアウトが閲覧者に飽きさせない様に工夫される例がよく目にするのではないでしょうか。
そういった需要に伴い、CSSの新規機能も一定のペースで各主流ブラウザでの対応が行われています。中でもFlexボックスレイアウトと、Gridレイアウトのシェア率が印象的です。

Flexibleレイアウト

ここ数年採用率が一気に高まっている display:flex
理由としては、Flexボックス自体の仕組みが理解しやすく、一般的なレイアウトには充分対応出来るところではないかと思います。
これから学習をされる方にとっては、一番覚えておきたい方法ですね。

Gridレイアウト

名前の通り、値の記述は display:grid の様になります。
詳しい使い方は今後連載形式としてご紹介していきますが、簡単に説明しますと、横と縦の二次元から同時にアイテムを配置出来る、柔軟性の高い方法になります。
現在はFlexボックスとの併用が推奨されていることから、完全にFlexの上位互換として考えていらっしゃる開発者の方も多いです。
まだGridレイアウトの実装を経験していない方には、これからは是非その機能を体感して欲しいと思います。

Floatレイアウト

CSSのレガシー技術の一つとしてよく挙げられる項目 display:float ですが、未だに一部のサイト上に使われるケースが見られます。
リキッドレイアウトの考え方でレスポンシブ対応をしっかりカバー出来るのが、古い技術でも現役としてサイトの土台を支える理由だそうです。
但し、レイアウト制御の幅とコードの書きやすさから見ると今後は殆どFlexやGridに代替されるのでしょう。

Tableレイアウト

display:table こちらは HTMLタグtableに相当するレイアウトになりますが、 レスポンシブ対応に手間が掛かることから、自ら適応することはほぼないのですが、tableタグ自体を使用する際に、レスポンシブ対応が皆無に等しい為、デバイス別でのコードを追加する必要があります。

有名CSSフレームワークにおいて

現在CSSフレームワークで最も有名なBootStrapでは、Flexボックスレイアウトがレイアウト系コンポーネントの主要となっています。
ほかにBootStrap次に人気のFoundation、Tailwindなどのフレームワークをコーディングに取り入れると、多少の学習コストは掛かるものの、有効に使うと思い通りのレイアウトテンプレートを手軽に仕上げることが出来ます。

まとめ

結論ですが、ブラウザ対応がフルサポートされている機能に関しては一度触れてみて、その構築方法は制作サイトの要件定義に必要かどうかで判断すると良いでしょう。 最近ではサイト外観の実装に馴染んでいない方でも、比較的にデザインの整ったものが作れると言われている、無料で利用できるCSSフレームワークが大人気な一方、ちょっとしたカスタマイズを入れなければ、個性のない内容に見えてしまう恐れがあります。
ポイントはイチからコードを書くかではなく、後のカスタマイズしやすくさ、再利用性の高いさを重視した方が全体的に作業がスムーズに進みます。
以上が今回のレイアウト構築のお話でした。

次回からは連載形式で、FlexレイアウトやGridレイアウトの応用的な構築方法をお伝えしていけたらと思います。
Web制作を現役エンジニアから学びたい方には、コンピー塾が開催する「Webマークアップ講座」や「Webデザイン講座」をお勧めしています。
気になる方はお気軽にお問い合わせください。