２カラムレイアウトとこれからのHTML&CSS

2021年12月28日

『作って学ぶ　HTML＆CSSモダンコーディング』について、Amazonの方で「２カラムの時はどうやるのか」というコメントをいただいたので、現在の２カラムの考え方についてまとめてみました。

また、これをきっかけに最近ちょっとモヤモヤしていた、これからのHTML&CSSについても書いてみました。

２カラムのコード

現在のWeb制作では、ページ全体でレイアウト構造を考えるのではなく、１カラムをベースにセクション単位で考えるのが主流です。そのため、２カラムレイアウトもセクション内に作る形で考えます。

たとえば、コードにすると次のようになります。ここではルートの<section class="twocols">でセクションを構成し、CSS Gridを使用して内部のコンテナ<div class="twocols-container">で２カラムを作っています。

<section class="twocols">
	<div class="twocols-container w-container">
		<div class="col">１列目</div>
		<div class="col">２列目</div>
	</div>
</section>

/* ２カラム */
.twocols {
    padding: 100px 0;
    background-color: #f3f1ed;
}

.twocols-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px 25px;
}

@media (min-width: 900px) {
	.twocols-container{
		grid-template-columns: 7fr 3fr;
	}
}

/* 横幅と左右の余白 */
.w-container {
	width: min(92%, 1024px);
	margin: auto;
}

各カラムの横幅はgrid-template-columnsで７：３にしています。
コンテナの横幅と左右の余白は「w-container」というクラスで管理し、他のパーツでも利用できるようにしています。この設定は別のタグに分けて適用するという考え方もあります。
『作って学ぶ～』ではP.155のマルチカラムパーツ「タイル状に並べるレイアウト（CSS Grid版）」をベースに作成できます。

セクション単位で作る理由

このようにセクション単位で作るのは、「レスポンシブを管理しやすい」のに加えて、現在のWebサイト制作で使用される「フレームワーク的なもの」の都合が大きく影響しています。

たとえば、WordPress や React などです。

これらの都合が何かと言えば、WordPressではGutenbergのブロックですし、Reactなどではコンポーネントという考え方になります。

さらに、私達がブラウザを通して見ることのできるWebサイトのコードは、こうしたフレームワークの「出力結果」になっています。素のHTML&CSS（pure HTML&CSS）で直接書かれたページを見ることは、現状ではほとんどありません。Gutenbergのノーコード化・FSE化が進めば、目にする機会はもっと少なくなるでしょう。

そして、その「出力結果」に寄せる形で、素のHTML&CSSもセクション単位で書く流れになっています。デザインカンプを素のHTML＆CSSでコーディングし、それを元にブロックのカスタマイズやコンポーネント化を行うケースを考えると、当然な流れではあるのですが…。

このような現状において、どこに軸足をおいて考えるかはとても大きな問題です。これまでと同じように、素のHTML＆CSSの考え方でコードを書いていてもいいものでしょうか。