CSSのメディアクエリには頼らず、コンテンツベースで実装するレイアウトの最近の方法 -Relearn CSS layout
Post on:2019年9月5日
sponsors
CSSのレイアウトは最近ではFlexboxが主流となり、それまでの考え方や実装方法とは大きく異なります。@mediaのブレイクポイントやハックを使用せず、CSSの性能を活かした、コンテキストに依存しないコンテンツベースで実装するコンポーネントのレイアウト方法を学べるRelearn CSS layoutを紹介します。
すべてのデバイスに対してフレキシブルなレイアウトが可能で、一貫性のある簡潔なコードで実装できます。
Relearn CSS layoutは、インクルーシブ HTML＋CSS＆JavaScript（紹介記事）、コーディングWebアクセシビリティ（紹介記事）などの著者Heydon Pickering氏（@heydonworks）とAndy Bell氏（@andybelldesign）のプロジェクトです。
CSSの実装テクニックをオンラインで学べるもので、無料で公開されているコンテンツと有料コンテンツがあります。無料分だけでもなかなかのボリュームです。
CSSレイアウトの一覧
無料コンテンツの中から少しだけ紹介します。
まずは、スタック。HTMLで実装した順番通りにコンテンツが積み重なるコンポーネントで、フロー要素と呼ばれるものです。
このフロー要素で悩むのが、近接要素間のマージンの実装方法です。marginなのかpaddingなのか、または上なのか下なのか、そしてセレクタを組み合わせてマージンを再帰的に適用するにはどうすればよいか、などが解説されています。
下記のように、入れ子の要素にもマージンを再帰的に適用することもできます。
マージンを定義するためのコードを生成するHTMLとCSSのジェネレーターも用意されています。
また、ここで解説されたコードは、ダウンロードもできます。
続いて、今度はサイドバーの実装方法。
最近はスクリーンサイズの多様化が実装のネックになっています。@mediaでブレイクポイントを定義しても、その数は膨大な量が必要かもしれません。そんな場合には、デバイスベースでクエリを定義するのではなく、コンテンツベースで実装するのが適しています。
Flexboxを使用して、古典的なサイドバーを実装します。広いスクリーンでは横に配置され、狭いスクリーンでは縦に配置されます。また、横に配置された場合には、サイドバーとコンテンツの高さを揃えるのも簡単です。
参考: CSS Flexbox の各プロパティの使い方を詳しく解説
最後に、カバーの実装方法。
CSSのテクニックとして昔からよく話題になるのが、上下左右の中央に配置するテクニックです。さまざまな実装方法がありましたが、Flexboxが使えるのであれば、簡単なCSSで実現できます。
参考: 要素を上下左右の中央に配置、最近主流になっている実装方法のまとめ
カバーを使った最近見かけるレイアウトが、コンテンツを中央に配置しつつ、ヘッダやフッタがあるレイアウトです。上下にマージンがありつつ、高さが不明なコンテンツ、高さが不明なヘッダやフッタを実装します。
sponsors
