はじめに

　本書を手にとっていただき、ありがとうございます。

　HTML・CSSを使いWebページのレイアウトを作る上で、Flexbox・Grid Layoutは重要な技術のひとつです。これらの技術を使うことで、さまざまなレイアウトを作れます。ですが、うまく使いこなせなかったり、中途半端な理解でなんとなく使い続けている方もいることでしょう。

　そこで、本書ではFlexboxとGrid Layoutの体系的な基礎知識に加え、それらを活用したレイアウトの作成方法を学びます。FlexboxとGrid Layoutに関する理解を深めるだけでなく、実際にレイアウトを作り、使いこなせる状態を目指します。

本書で学べること

　・Flexbox・Gridの体系的な基礎知識

　・Flexbox・Gridを使ったレイアウト方法

対象読者

　・Flexbox・Gridについて理解を深めたい方

　・Flexbox・Gridを使ったレイアウト作成を実践したい方

お問い合わせ

　本書に関する意見、質問などは下記までお寄せ下さい。

Twitter

https://twitter.com/_umatoma

表記関係について

　本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。

免責事項

　本書に記載された内容は、情報の提供のみを目的としています。本書を用いた開発・製作・運用は、必ずご自身の責任と判断によって行って下さい。これらの情報による開発・製作・運用の結果について、著者はいかなる責任も負いません。

第1章　CSSレイアウト

　CSSでWebページをレイアウトする方法はさまざまであり、それぞれの方法には特徴があります。その特徴を理解し適切に使い分けることで、より良いレイアウト作成に繋がります。ですが、全ての方法を理解し使いこなすまでには、ある程度の時間がかかります。

　そこで、本書では複数あるレイアウト方法の中でも特に重要となるFlexboxとGrid Layoutを使ったCSSレイアウトについて紹介していきます。

　まずは、このふたつを理解し使いこなすことで、表現できるレイアウトの幅を大きく広げることができます。もし、それでも表現できないレイアウトが出てきたときには、他のレイアウト方法を学ぶときです。

　この章では、まずCSSレイアウトの方法について概要を紹介します。どのようなレイアウト方法があり、FlexboxやGrid Layoutを使うとどの様なレイアウト作成に役立つのかを理解します。その後の章ではFlexboxとGird Layoutの基礎知識を学び、さまざまなレイアウトを作成する実践へと進んでいきます。

　それでは、はじめましょう。

1.1　さまざまなレイアウト方法

　CSSでWebページをレイアウトする方法には、主に次のような種類があります。

　・表レイアウト

　・段組みレイアウト

　・フロート

　・Flexbox

　・Grid Layout

　これらのレイアウト方法にはそれぞれ特徴があり、適しているレイアウトも異なります。ここでは、各レイアウト方法の概要を確認し、特にFlexboxとGird Layoutはどの様なレイアウトに適しているのかを学びます。

　では、順番に各レイアウト方法の概要を確認していきましょう。

目次