2020年12月第1週号

CSSでのレイアウトの実装についての考え方を紹介した記事です。フロントエンド開発者がどう考えるかをわかりやすく解説しています。

まず細部は一旦脇に置いて、大きなレベルのコンポーネントにわけて考えてコーディングします。そのあと、詳細部分について細かく掘り下げます。たとえば、要素の数が可変する場合やレスポンシブでどう変化させるかなどです。

考え方としてはスタンダードな感じで、CSSコーディングをしている人は納得のいく内容だと思います。レイアウトを実現する前にいろいろなケースを考えることを、「たくさんの質問をする」と表現し、実際にヒーローイメージについての質問を列記していました。

こういう「質問」は頭の中だけで考えがちですが、テキスト化してまとめておくのもよさそうだと気付かされました。

図1 CSSでのレイアウトの実装についての考え方

Figmaでレイアウトグリッドを設定する方法を説明するチュートリアルです。このチュートリアル自体がFigmaで作られているところが面白いと思ったので紹介します。

Figma上で解説を読みながら、実際に操作して確認できます。関連情報へのリンクも入れらますし、こういった形でのチュートリアルの提供は今後増えそうだと感じました。

図2 Figmaでレイアウトグリッドを設定する方法

固定されるサイドバーの作り方と、よくある問題とその修正方法を解説しています。

問題点とは、サイドバーの高さがウィンドウサイズより大きい場合、サイドバーの下部の要素に一時的にアクセスできなくなることです。このケースでは高さをCSSのcalc関数を使って計算することで対策していました。

図3 固定サイドバーの作り方とよくある問題とその修正方法

インスピレーションの刺激になるウェブサイトをまとめています。