聖杯レイアウトとは？
当時は、flexもgridもなかったので西欧では聖杯を探すのが難しいという意味を込めて「聖杯レイアウト」と呼ばれていました。
用途
- 情報量が多いサービス
- ページ数が多いサービス
- ベンチャーなどの小さいサービスよりは、すでに存在する大きい企業のサービスに向いている。
従来のレイアウト手法
- widthを指定する。(800pxなど）
- 「margin: 0 auto;」などで中央寄せをする。
- floatプロパティを使用する。
flexレイアウト
Figmaとは親和性が高いらしい。(おそらく、FigmaのAuto Layoutという機能がflexレイアウトを自動生成するため。)
親要素
|
1 |
display: flex; |
子要素を縦並びにしたい場合(デフォルトは子要素が横並びになる)
|
1 |
flex-direction: column; |
子要素真ん中
|
1 |
flex: 1; |
もし、固定幅にしたい場合は従来通り親要素にflexとは別に「width:固定幅;」と「margin: 0 auto;」を追加で当てます。
レスポンシブ対応したい場合
メディアクエリで一定以下の横幅になった場合は「width:100%;」などで上書きして横幅いっぱいになるように変更します。
子要素左右の要素
|
1 |
width: サイズ(px); |
レスポンシブ対応したい場合
メディアクエリで一定以下の横幅になった場合は親要素が「flex-direction: column;」などで上書きして縦並びになるように変更します。（スマホだと横幅が小さいので）
また、左右の順番を中央よりも後にしたいという要望もよくあるので、その場合はflexboxの「order」プロパティを使います。
Gridレイアウト
flexboxの後発でより自由にレイアウトを組み立てることができます。新しいだけあってこれまでのCSSを革新するような内容になっている。
メリット
- レイアウト用に不要なdivタグを追加しなくてもよくなる。（flexboxでレイアウトを組もうとするとdivが無駄に増える。）
- 子要素の記述がシンプルになる。
- レスポンシブ対応の時に「grid-template」の部分だけ書き換えれば良いので非常に対応が楽になる。
- 余白なども指定できる。
二つレイアウトの組み立て方がある。
ラインを使う方法
エリアを使う方法
親要素
Chrome87からはgridバッジと言って押すとgirdの構造を把握できるようになりました。
以下の構文を使う。すでにこれが視覚的に「聖杯レイアウト」のようなものになります。
|
1 2 3 4 5 6 7 |
display:grid; grid-template: "header header header" 100px "left center right" 1fr "footer footer footer" 50px / 130px 1fr 230px; gap: 10px; |
100pxの部分は「ヘッダーの高さ」、50pxは「フッダーの高さ」になります。1frは高さを画面いっぱいまで引き伸ばしたい場合に使います。（仮に2frとかにした場合は1frの2倍の高さになります。）
/ 130px 1fr 230px
横幅の指定になります。
gap: 10px;
要素間の余白を設定することが可能です。
レスポンシブ対応
メディアクエリで以下のように指定します。
|
1 2 3 4 5 |
"header" 100px "left" 1fr "center" 1fr "right" 1fr "footer" 50px |
子要素
以下のように記述します。
|
1 |
grid-area: header; |
モバイルファーストとは？
スマホサイトからコーディングをして、その後にタブレットやPCの幅に合わせていくスマホサイト中心のコーディング思想のことです。
経緯
2018年にGoogleがモバイルファーストインデックスというものを発表しました。AndroidやiPhoneの普及でスマートフォンで見やすいサイトを優先的に上位表示させようという考え方です。当初2020年9月に開始予定でしたが、延期されて2021年3月開始になりました。
なので、実質的にレスポンシブ対応が必須の環境になってきています。
レイアウト案
| スマホ | タブレット | PC | 備考 |
|---|---|---|---|
| 縦横2 | 横4 | 横4 | |
| 縦3 | 横3、3/12、6/12、3/12 | 横3、3/12、6/12、3/12 | 良くあるのは横にしたときに真ん中だけ広げて、左右の幅を狭めるケースです。（聖杯レイアウト） |
| 横2 | 横2 | 横2 | 幅を狭めてもレイアウトが変わらない |
| 縦2 | 横2 | 横2 | ・5/12、7/12など横に並べる際に、幅を左右で変える手法なども用いられます。
・横にしたときに左右逆にしたりする場合もあります。 |
メニュー
スマホサイトは縦に並べて実装し、横に広げるたびに横に並べるように配置します。
カード
レスポンシブと相性が良いので最近非常によく使われています。
レスポンシブWebデザインの構成要素
- フルードグリッド
- フルードイメージ
- メディアクエリ
フルードグリッド（可変グリッド）
グリッドシステムによるWebデザインとブラウザ幅の変化に応じて内容の大きさをカエルリキッドレイアウトを組み合わせた手法です。（ウインドウの幅が変化するとグリッドのサイズも変化します。）
フルードイメージ（サイズが変化する画像メディア）
ウインドウ幅によって画像サイズを拡大縮小させます。CSSで実装します。
メディアクエリ
CSS3で実装された画面幅によってスタイルを切り替える技術です。
この記事へのコメントはありません。