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