CSSのメディアクエリには頼らず、コンテンツベースで実装するレイアウトの最近の方法 -Relearn CSS layout

CSSのレイアウトは最近ではFlexboxが主流となり、それまでの考え方や実装方法とは大きく異なります。@mediaのブレイクポイントやハックを使用せず、CSSの性能を活かした、コンテキストに依存しないコンテンツベースで実装するコンポーネントのレイアウト方法を学べるRelearn CSS layoutを紹介します。

すべてのデバイスに対してフレキシブルなレイアウトが可能で、一貫性のある簡潔なコードで実装できます。

サイトのキャプチャ

Relearn CSS layout

Relearn CSS layoutは、インクルーシブ HTML+CSS&JavaScript(紹介記事)、コーディングWebアクセシビリティ(紹介記事)などの著者Heydon Pickering氏(@heydonworks)とAndy Bell氏(@andybelldesign)のプロジェクトです。

サイトのキャプチャ

Relearn CSS layout

CSSの実装テクニックをオンラインで学べるもので、無料で公開されているコンテンツと有料コンテンツがあります。無料分だけでもなかなかのボリュームです。

サイトのキャプチャ

CSSレイアウトの一覧

無料コンテンツの中から少しだけ紹介します。

まずは、スタック。HTMLで実装した順番通りにコンテンツが積み重なるコンポーネントで、フロー要素と呼ばれるものです。

サイトのキャプチャ

The Stack

このフロー要素で悩むのが、近接要素間のマージンの実装方法です。marginなのかpaddingなのか、または上なのか下なのか、そしてセレクタを組み合わせてマージンを再帰的に適用するにはどうすればよいか、などが解説されています。

サイトのキャプチャ

デモページ: The Stack

下記のように、入れ子の要素にもマージンを再帰的に適用することもできます。

サイトのキャプチャ

デモページ: The Stack

マージンを定義するためのコードを生成するHTMLとCSSのジェネレーターも用意されています。

サイトのキャプチャ

HTMLとCSSのジェネレーター

また、ここで解説されたコードは、ダウンロードもできます。

サイトのキャプチャ

コンポーネントのダウンロード

続いて、今度はサイドバーの実装方法。
最近はスクリーンサイズの多様化が実装のネックになっています。@mediaでブレイクポイントを定義しても、その数は膨大な量が必要かもしれません。そんな場合には、デバイスベースでクエリを定義するのではなく、コンテンツベースで実装するのが適しています。

サイトのキャプチャ

The Sidebar

Flexboxを使用して、古典的なサイドバーを実装します。広いスクリーンでは横に配置され、狭いスクリーンでは縦に配置されます。また、横に配置された場合には、サイドバーとコンテンツの高さを揃えるのも簡単です。
参考: CSS Flexbox の各プロパティの使い方を詳しく解説

サイトのキャプチャ

デモページ: The Sidebar

最後に、カバーの実装方法。
CSSのテクニックとして昔からよく話題になるのが、上下左右の中央に配置するテクニックです。さまざまな実装方法がありましたが、Flexboxが使えるのであれば、簡単なCSSで実現できます。
参考: 要素を上下左右の中央に配置、最近主流になっている実装方法のまとめ

サイトのキャプチャ

The Cover

カバーを使った最近見かけるレイアウトが、コンテンツを中央に配置しつつ、ヘッダやフッタがあるレイアウトです。上下にマージンがありつつ、高さが不明なコンテンツ、高さが不明なヘッダやフッタを実装します。

サイトのキャプチャ

デモページ: The Cover

sponsors

top of page

©2019 coliss