RADIX で WEB ページを構成する際に推奨するレイアウト組の説明をします。
RADIX ではこの組み方をするために最適化したクラスを提供していますが、あくまでこれは私のやり方であり、枠にはめるためのものではありません。この組み方を無視してあなたなりの最適と思う組み方をしてもかまいません。
ラッパーカラムとコンテンツカラム
一般的なレスポンシブのシングルカラムレイアウトのページを作成することを想定して説明します。
このへーじのようなサイドバーつき 2 カラムレイアウトのページにももちろん応用することは可能です。
RADIXのライセンスページを例に説明します。
どのようなサイトをレイアウトする場合も、まずは大枠から区切っていき、だんだんと細かい要素の配置を定めていくのが定番の流れでしょう。
基本的な WEB サイトは header、main、footer の 3 行の構成になっていることが一般的であると思います。サイトをレイアウトする前提として、シングルカラムレイアウトの場合はbody 全体を 1 カラムと考えてそれを必ず3分割します。 2 カラムレイアウトの場合、body 直下で 2 カラムを定義した後、それぞれのカラムについて 3 row の分割を行います。
例のページを3分割して着色すると上のようになります。このような 3row の分割から始めるレイアウトは、HTMLの初歩として誰もが学ぶことでしょう。
RADIX レイアウトでは、この次は必ず各行要素をさらに縦に3分割します。
このように、シングルカラムのサイトは、ブラウザ幅の拡大に対して最大幅を決めコンテンツが広がりすぎて視認性が下がることを回避します。その為、左右に余白が追加されて見かけ上の3カラムレイアウトであるとみることができます。
この分割を RADIX の基本とします。便宜上、body 全体をシングルカラムとみなした場合のカラムをラッパーカラム、body を見かけ上の 3カラムと見た場合の中央カラムをコンテンツカラム、左右のカラムをスペーシングカラムと呼ぶこととします。
ラッパーカラムが見かけ上3分割されて、コンテンツカラムを作るのは画面幅がコンテンツ幅を超えているときに限りません。スマートフォン表示等、画面幅が狭い時にもスペーシングカラムは存在します。
このスペーシングカラムがないとコンテンツが画面端にくっついてしまい、可読性が下がってしまいます。このように見かけ上の3列分割を維持するレイアウト構成が RADIX レイアウトです。
HTML を縦、横、縦、横、… と交互に分割することを基本原則とします。
centering クラスと fb-brackets クラス
ローを跨いだ見かけ上のカラム分割を、画面幅に関わらず、またメディアクエリに依存せずスムーズに画面幅に十何に対応させるためのクラスを RADIX で用意しています。
centering
最もシンプルなものは centering クラスです。これは、コンテンツカラムに入る要素に直接このクラスをつけます。
<div class="demo-wrapper">
<div class="content-col centering">
コンテンツカラム
</div>
</div>このクラスを用いて構成する場合、スペーシングカラムは親要素のパディングとして自分で定義する必要があります。ラッパーカラム内にあるロー（main 等）に padding-inline : var(–spacing) を適用してスペーシングカラムを作成してください。
この適用方法は最もシンプルで応用が利きますが、コンテンツカラムに置く要素全てにクラスを適用する必要があり、ラッパーのパディングは自ら個別に定義しなければなりません。
fb-brackets
grid レイアウトを用いた新しい実装が fb-brackets クラスです。このクラスは、コンテンツカラムを分割する親要素となるローに適用します。
<div class="demo-wrapper fb-brackets">
<div class="content-col">
コンテンツカラム１
</div>
<div class="content-col full-bleed fb-brackets">
<span>フルブリード</span>
</div>
<div class="content-col">
コンテンツカラム２
</div>
</div>シアン色が画面の端、黄色と灰色を合わせた領域がスペーシングカラムです。fb-brackets を適用するだけでコンテンツ幅を統一しつつRADIXレイアウトを実現できます。
黄色の部分は css の –spacing 変数を可視化したものです。可変領域の灰色部分と、不可変領域の黄色部分を組み合わせることで、画面幅の変動に対応してどんな画面幅でもスペーシングカラムとコンテンツカラムの分割ができます。
さらに、full-bleed クラスを組み合わせることで部分的に敢えてRADIX レイアウトを破ることができ、目止めの役割を果たす強調的なセクションを作ることも可能です。full-bleed クラスに fb-brackets クラスも同時に持たせることで内部の要素をコンテンツカラムに復帰させることもできます。