CSSグリッドレイアウトの基本 Vol.1 CSSグリッドとフレックスボックスの登場まで

HTMLとCSSを使ったレイアウト方法として挙げられるのが、フレックスボックスとCSSグリッドです。
フレックスボックス(Flexbox)が登場したのが2009年、 CSSグリッド(CSS Grid)は2011年で、それまではフローレイアウトしかレイアウトの手段がありませんでした。ドキュメント以外のレイアウトを行いたい場合には、ハックを使うしかない状態が、ずっと続いていたのです。

この連載では、1998年のCSS2の登場以降の、CSSの仕様を参照しつつ、フレックスボックスとCSSグリッドの機能や特徴、フローレイアウトとの違いなどを解説していきます。

連載第1回目は、フレックスボックスやCSSグリッドが登場するまでの経緯を見ていきます。

目次

CSSの機能の分割

1998 年以降、CSS2 にまとめられたフローレイアウトの機能はモジュールに分割され、以降は機能を拡張したものからCSS3 の仕様としてリリースされていくことになりました。

CSS current work(モジュール化された仕様の一覧)
https://www.w3.org/Style/CSS/current-work

しかし、フローレイアウトをベースに拡張しても、ドキュメントのレイアウトをターゲットにしたものであることに変わりはありません。ドキュメント以外の、複雑なレイアウトの制御に適した機能が存在しないまま、「レイアウトにはハックを使う」という状況が続くことになります。

レイアウト用の新しいモジュールの登場

この状況をどうにかしようという大きな動きが出てきたのは2000年代末になってからです。

という、レイアウト用の新しいモジュールの最初の草案がリリースされます。両方の仕様をまとめたGoogleのTab Atkinsは、その目的を次のように述べています。

目的は、Web開発者としてマスターしなければならなかった「float/table/inline-block」などによるクレイジーなハックをすべて置き換えることでした。それらは愚かで、覚えづらく、そして無数の面倒な方法で制限されていました。ですので、単純で使いやすく、完全な方法で解決する優れたレイアウトモジュールを作りたかったのです。

What IS Flexbox?
https://medium.com/@spaceninja/what-is-flexbox-6aed968555ef

新しいCSSの機能を使って、ハックを使わずにレイアウトを構築していく歴史の始まりです。

Intrinsic Web Designとは?

ハックを使わないレイアウトの考え方

floatなどによるハックを使用せず、CSSに新しく用意された機能を使ってレイアウトをしていく手法や考え方は、Jen Simmonsによって「Intrinsic Web Design(本質的・内在的なWebデザイン)」と命名されました。

イントリンシックWebデザインは、私がこの新しい時代につけた名前です。なぜなら、私たちは本当にレイアウト・デザインの新しい時代にいると思うからです。… floatベースのものではなく、新しいテクノロジーの集まり、と言える新しい時代のために、新しい言葉が必要だと感じています。… それは単に技術が新しいというだけでなく、実際にできることの可能性が新しいからです。利用可能なスペースに応じてコンテンツを変形させたり、移動させたり、変化させたりする方法は、実際にこれまでのレスポンシブ・ウェブ・デザインとは非常に異なっているのです。

Transcript: Intrinsic Web Design with Jen Simmons (The Big Web Show) – Zeldman on Web and Interaction Design
https://www.zeldman.com/2018/05/02/transcript-intrinsic-web-design-with-jen-simmons-the-big-web-show/

Intrinsic Web DesignではCSSグリッドを中心に、フレックスボックスなどを組み合わせて高度なレイアウトを実現していきます。こうした新しい機能は最初からレスポンシブも考慮した設計になっているため、メディアクエリも必要に応じて使えばすむものになっています。

Intrinsic Web Design 6つの基本原則

2018年に行われた講演では、次のようにIntrinsic Web Designの特徴が紹介されています。

Everything About Web Design Just Changed – Speaker Deck (2018) より
https://speakerdeck.com/jensimmons/everything-about-web-design-just-changed
Intrinsic Web Design: Everything You Need to Know
https://justcreative.com/intrinsic-web-design/

  1. Fluid & fixed
    可変と固定を混在させることができます。
  2. Stages of Squishiness
    CSSグリッドでは固定サイズ、fr単位、minmax()関数、autoを使用して、変幻自在な場を用意できます。
  3. Rows & Columns
    行と列で2次元のレイアウトを構築できます。
  4. Nested Contexts
    異なるコンテキストを入れ子にできます。たとえば、フローレイアウト内でCSSグリッドを使用し、CSSグリッド内でフレックスボックスを使うといったことが可能です。
  5. Ways Expand & Contrast
    コンテンツや余白の拡張、縮小、折り返し、オーバーラップなどを新しい方法で制御し、画面幅に合わせたレイアウトにできます。
  6. Media Queries, as needed
    メディアクエリ@mediaは必須ではなくなり、必要に応じて使用します。

連載Vol.2では、CSSグリッドより少し早い段階で登場したフレックスボックスレイアウトについて、解説していきます。

著者プロフィール

エビスコム


Webと出版を中心にフロントエンド開発・制作・デザインを行っている。HTML/CSS、WordPress、GatsbyJS、Next.js、Astro、Docusaurus、Figmaなど、多岐にわたる言語やテクノロジーに精通。
主な編著書に 『作って学ぶ WordPress ブロックテーマ』(マイナビ出版刊・2023年)、『作って学ぶ Next.js/React Webサイト構築』(マイナビ出版刊・2022年)、ほか多数。

本連載は、『作って学ぶ HTML+CSSグリッドレイアウト』(2024年2月、マイナビ出版)の一部を抜粋、再編集したものです。

作って学ぶ HTML+CSSグリッドレイアウト

作って学ぶ HTML+CSSグリッドレイアウト
  • 定価(紙/電子):3,509円(税込)
  • B5変:320ページ
  • 978-4-8399-8496-0
  • 発売日:2024年02月28日

「難しい」と敬遠していたCSSグリッドがきちんと身につく。

CSSグリッドを用いてWebサイトをデザインするための実践的な知識をまとめました。より深く理解し身に着けるために、HTML & CSSの歴史から振り返り、CSSグリッドの立ち位置や基本を見直した上で、実践的なパーツやUIを構築し、力がつく一冊になっています。「CSSグリッドってなんだか難しい」と距離を置いていた方も、きっと使える知識が身につきます。

Chapter 1 Web標準のレイアウトシステム
―Web が誕生したときから使われてきた、標準のレイアウトシステムである「フローレイアウト」。
 その生い立ちからなぜ「フローレイアウト」ではレイアウトを制御するのが難しいのか、紐解いていきます。

Chapter 2 CSSグリッドの誕生とその特徴
ー「CSS グリッド」が登場した背景を追います。

Chapter 3 基本のグリッド
ー3 タイプのグリッド「トラック」「ライン」「テンプレート」の構築をサンプルを用いて学びます。

Chapter 4 CSSグリッドのロジック
ーグリッドの行列の生成、アイテムの配置、トラックサイズの確定といった処理がどのように行われるのか、などCSS グリッドのロジックを深く掘り下げていきます。

Chapter 5 グリッドレイアウト実践
ーメニューやカードといった細かなUIパーツから構築し、それらを組み合わせて一般的なWebページを作成します。

  • URLをコピーしました!
目次