kinoshitaあけましておめでとうございます。フロントエンドエンジニアの木下です。平成から新元号に変わる2019年、今年もアーキタイプをよろしくお願いいたします。前回のCSSレイアウトの移り変わりの記事で触れた、グリッドレイアウトについて今回は深掘りします。実際にレイアウトを組むのではなく、まずはCSSにおけるグリッドレイアウトとはどういうものかを書いていこうと思います。グリッドレイアウトとはグリッドとは水平線と垂直線が交差した行と列の集合です。グリッドプロパティを使用することによって、要素をグリッドの行と列に配置することが可能になります。JavaScriptで無理矢理行っていたようなレイアウトを実現できるようになります。レイアウトのためにhtmlの構造を変えたりムダな要素を増やすような必要もなく、よりセマンティックなコーディングやレスポンシブデザインにも向いています。『グリッドコンテナ』『グリッドアイテム』グリッドレイアウトを始めるには、まず『グリッドコンテナ』を作成する必要があります。『グリッドアイテム』とは『グリッドコンテナ』に内包する要素を指します。それにより指定された要素が『グリッドコンテナ』となり、内包するすべての小要素が『グリッドアイテム』へと変わり、グリッドレイアウト用プロパティを使用することが可能となります。グリッドレイアウト用のプロパティ一覧は最後に記載しています。『グリッドライン』グリッドアイテムをレイアウトする際には、「グリッドコンテナを分割する垂直線・水平線のそれぞれ何番目から何番目に配置する」という指定の仕方になります。その際に必要になるのが『グリッドライン』です。「グリッドコンテナを分割する垂直線・水平線」を『グリッドライン』と呼び、それぞれ番号が自動的に振られます。『グリッドライン』がわかるとあとはテーブルと考え方は同じです。『グリッドエリア』は単独・複数からなる『グリッドセル』のことを指します。これらはそれぞれの『グリッドカラム』の幅や『グリッドロウ』の高さを指定したり、『グリッドエリア』に名前を割り当てて『グリッドライン』による配置指定よりもわかりやすくさせることもできます。グリッドレイアウト用のプロパティこれまでは基本的な概念を説明してきましたが、実際にレイアウトを指定していくために必要なプロパティは以下になります。gridgrid-templategrid-template-columnsgrid-template-rowsgrid-template-areasgrid-auto-columnsgrid-auto-rowsgrid-auto-flowgrid-rowgrid-row-startgrid-row-endgrid-columngrid-column-startgrid-column-endgrid-areagaprow-gapcolumn-gap複雑なレイアウトを組むことが可能なため、関連プロパティも数多くあり、値の算出のための関数なども増えています。はじめはコーディングするたびに調べたりしていましたが、グリッドの概念を理解していると、「プロパティなんだっけな...」となってしまうことも私はなくなりました。おわりに今回記載したグリッドの概念を掴んでおけば、レイアウトを組んでいく際も迷いが少ないのできちんと理解しておくことをオススメします!次回は、最後に記載したプロパティや関数を使って、実際にレイアウトを組んでいこうと思います。それでは!ハッピーコーディング。Inc.2007年5月設立。ブランディング、コンサルティング、マーケティングの観点を大事にし、消費者、クライアントとより良き未来を創造していきます。求人情報まで毎月1回お届けします。YOU!ご登録ありがとうございました。