Chapter 02無料公開

CSS グリッドとは?

CSSグリッドの歴史

CSSグリッドレイアウトは、初めからブラウザでwebサイトのデザインに使われ始めたのではなく、実は、紙のデザインで使われていたことが始まりです。

ブラウザ自体の歴史も、1991年に、最初のブラウザ、WorldWideWebがティム・バーナーズ=リーによって公開された、今から約30年の短い歴史ですから、CSSグリッドレイアウトの歴史は、もっと浅く、2017年にほとんどの主流ブラウザでサポートされるようになりました。

CSSグリッドの名称

CSSグリッドは、実はいくつか名称があります。

CSSグリッドを、CSSグリッドレイアウトと呼ぶソースもあれば、本書のようにCSSグリッドと呼ぶソースもあります。

中には、もはやグリッドとだけ呼んでCSSグリッドを示す場合もあります。

どれが正しいのでしょうか?

正式名称としては、CSSグリッドレイアウトですが、日本語ソースも、英語ソースも、CSSグリッド(CSS Grid)と省略して呼ぶものが主流なので、本書でもCSSグリッドと名称を書いています。

CSSグリッドが使われるようになった背景

CSSでwebページのレイアウトをするのに、今までは以下のような経緯を辿って試行錯誤されていました。

  1. table要素
  2. float
  3. positionとinline-block
  4. Flexbox

初期のCSSではtableを使ってwebページのレイアウトをしていたようで、今では少し想像がつきませんが、Flexboxが台頭してくるまでは、思い通りのスタイルを付与したページレイアウトは、とても非効率なものだったのです。

時代とともに、新しい端末も増え、スマートフォンが新しく登場し、レスポンシブデザインという、異なる端末間でもwebページを閲覧しやすくする技術も主流になりました。

UI/UXが重要視されるようになり、webページの構成に関しても、大きな影響を与えるようになりました。

Flexboxが出てきた当初は、これだけでも画期的な技術でした。

しかし、Flexboxは並列の横の軸の操作をしている時には、縦方向の構成のことは扱えず、その反対の場合も然りである、縦か横かいずれか片方だけを扱う、一次元の構成のみを目的として作られた技法でした。

そのため、webページ全体の構造のような、二方向の縦と横の軸の構成には、Flexboxだけで対処するのは不十分でした。

そういう背景があり、CSSグリッドは、一次元構成では解決できない、webページ構成の問題を、二次元構造で総合的に解決する、初のCSSモジュールとして作られました。