『HTML5 & CSS3 ステップアップブック』によるCSS3 Grid Layout の勉強
9月20日（金）の日記です。
前回から『グーテンベルグ時代のWordPressノート テーマの作り方2（ランディングページ&ワンカラムサイト編）』のKindle本を読んだ結果、やはりCSS3におけるGrid Layoutは学んでおく必要があると感じましたので、急遽そのレイアウト作成に特化した書籍を見つけて勉強する事にしました。
そこで教材としたのが、エビスコム出版の『HTML5 & CSS3 ステップアップブック』です。
CSS3におけるFlex BoxとGrid Layoutを使って、Bootstrapに負けない程のレイアウト管理が出来るWebサイトを制作するというものです。
全4章から成り、現時点で3章まで終わりましたが、感想としては非常に便利かつBootstrapとは違ってCSS3の機能のみで構成されているので、余計なファイルが無い分動作が軽いという利点があります。
FlexBoxはすでにProgateで概要を学んでおりましたが、Grid Templateによるグリッドレイアウト管理については初めて知る内容であった為、「CSS3の機能だけでこれだけのレイアウト管理が出来るのか！」と、知る度にちょっとした驚きを味わえます。
しかし、CSSファイルでの書き方を理解するのに苦労しました。書籍で説明されていてもサッパリ分からず、ネットでもっと分かりやすい情報は無いかと探しましたが、ピンとくる内容も見つからず...。1時間程記述を変えたりしながら唸った結果、ようやく使い方を理解する事が出来ました。
特に理解に苦労したのが、
- grid-template-columns: 1fr 1fr;
- grid-template-rows: auto auto;
CSSファイルにて記述されるこれら2つのプロパティですね。
この2つを定義する事でページにおけるグリッドが敷かれるのですが、これだけではまだWebページに反映される事は無く、さらにここから配置したいブロックのクラス名の基準位置を設定する必要があります。上記を書いたうえでブロックのクラス名に対し、
- grid-column-start: 1;
- grid-row-start: 1;
この様に書いて各ブロックの左上を何処に設置するのかを決めるのです。...こんな事書いても初めて知る人にとっては全く意味不明な文章ですね。すみませんが、頭では分かっていても、現段階で上手く説明する事は不可能です（汗）。
何にせよ、ようやくCSS3のGrid Layoutの書き方を理解出来たので良かったです。この調子で進めていきます。下記は完成品です。FlexBoxとGrid Layoutにて構成されており、レスポンシブにも比較的容易に対応出来ます。
