• Top
• Category
• Contact
• About

サイト構築 -CSS

sponsorsr

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

Related Posts

coliss