段組が自由自在!「CSSグリッド」をより使いこなすための4つのTips
CSSグリッドは、これまで登場したTABLEレイアウト、Floatによる回り込みのレイアウト、そしてFlexboxを使ったレイアウトのどのレイアウト手法よりも直感的に扱える、注目のモジュールです。
2017年に入って、macOSやiOSがCSSグリッドに対応する形でSafariに搭載され、いよいよ全てのモダンブラウザで使用することができるようにもなりました。
参考:
これで分かった!10分でほとんど理解できる「CSSグリッド」の基礎
ところで、CSSグリッドレイアウトの基本的な使い方に関してはなんとなく理解できた人もいるかと思いますが、もう一段階先に進みたいと思っている方もいるのではないでしょうか。
実際、CSSグリッドは非常に柔軟で拡張性が高いので、知っておいて損はないTips(コツ)がたくさんあります。
そこで本稿では、CSSグリッドをより使いこなすための4つのTipsをまとめていきます。
CSSグリッドで最低限押さえておきたい基本事項
まずは、CSSの基本事項に関しておさらいをしておきましょう。
CSSグリッドは2次元的なレイアウト手法
筆者作成
CSSグリッドがこれまでのレイアウト手法と大きく異なる点は、CSSグリッドが*「2次元レイアウト」(two-dimentional layout)*を採用している点です。
つまり、ブロックを作って並べるのではなく、1枚のブロックを縦方向や横方向に区切っていく、という考え方です。
グリッドコンテナーとグリッドアイテム
筆者作成
CSSグリッドによるレイアウトは、親要素であるグリッドコンテナーの中に子要素であるグリッドアイテムを複数入れて行います。
CSSによってグリッドコンテナー自体が縦横に分割され、そこにグリッドアイテムを当て込んでいくイメージです。
CSSグリッドをより使いこなすための4つのTips
1. グリッドエリアに名前をつける
グリッドコンテナーを行と列に分割する場合に、*「content-template-areas」*プロパティを使ってエリアに名前をつけることができます。
例えば、下記のような場合では、9分割したグリッドコンテナーのエリアに名前をつけています。
.site{
display: grid;
grid-template-colmn: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr 2fr;
grid-template-areas:
“title title title”
“main header header”
“main sidebar footer”
}
このように指定すると、下図のように名前がつけられたことになります。
同じ名前をつけているエリアがあるという点は、非常に重要です。
筆者作成
続いて、各エリアに「grid-area」プロパティを使ってグリッドアイテムを流し込んでいきます。
.page-title{
grid-area: title;
}
.masthead{
grid-area: header;
}
// 以下同様
このようにすることで、グリッドを流し込むことが可能です。
筆者作成
2. グリッドの行や列に名前をつける
実は、同様にグリッドの行や列の区切り線に名前をつけながら、同時に大きさを指定する方法もあります。
それは、「grid-template-columns」や「grid-template-rows」にブラケットを使って名前を指定する方法です。
コンセプトを理解するために基本的なレイアウトを考えてみましょう。
.container {
grid-template-rows: [row1] 1fr [row2] 2fr [row3];
grid-template-columns: [col1] 2fr [col2] 1fr [col3] 1fr [col4];
}
上記の例では、それぞれの線に名前をつけています。
筆者作成
このとき、グリッドアイテムを指定するときに、行番号・列番号ではなく行や列の区切り線の名前で指定することも可能です。
.page-title{
grid-area: row1 / col1 / row2 / col3;
}
.masthead{
grid-area: row2 / col1 / row3 / col2;
}
筆者作成
*「grid-area」*は「grid-row」と「grid-col」のショートハンドでもあるので、列と行の開始名・終了名を指定すればグリッドアイイテムを当て込むことができます。
3. グリッドの行や列を繰り返す
列や行を増やすには「grid-template-rows」「grid-template-columns」の値を増やせばいいのですが、トラックの数が多くなると書くのが面倒になってしまいます。
例えば、以下のような場合を考えてみましょう。
.container {
display: grid;
grid-template-rows: 100px 80px 100px 80px 100px;
grid-template-columns: 120px 120px 120px 120px 120px;
}
以上のような場合、繰り返し処理が有効な部分は、*「repeat(x, y)」*という関数を使うことができます。
xには繰り返す回数、yにはトラックの幅を指定します。
これを適用すると以下のようなコードになります。
.container {
display: grid;
grid-template-rows: repeat(2, 100px 80px) 100px;
grid-template-columns: repeat(5, 120px);
}
少しですが、これで短くすることができました。
Webアプリケーションなど、動的に表の列や行を動かす際には、JavaScriptでのDOM操作と組み合わせて使うと効力を発揮しそうです。
4. grid-templateプロパティを活用する
グリッドコンテナーに指定できるプロパティに*「grid-template」*という便利なものがあります。
面白いことに、使い方が2通りあるので、それぞれを順を追って解説していきます。
A. grid-template-rows / grid-template-columns のショートハンドとして使う
これまで見てきたように、列や行を増やすには「grid-template-rows」「grid-template-columns」を指定する必要があります。
.container {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 120px 120px 120px;
}
これを*「grid-template」*タグによってショートハンドで記述することができます。
列・行の順にスラッシュで記述します。
.container {
display: grid;
grid-template: 100px 100px / 120px 120px 120px;
}
B. grid-template-rows / grid-template-columns / grid-template-areas のショートハンドとして使う
Aで見たものに加えて、1で見た「grid-template-areas」も織り交ぜてショートハンドで使うという面白い使い方もあります。
まず、*「grid-template-areas」*を書きます。
.site{
display: grid;
grid-template-areas:
“areaA areaB areaC”
“areaD areaE areaF”
}
ここに、それぞれの列と行の高さをしていします。
行の高さは文字列の後に、列の幅はスラッシュの後に書きます。
.site{
display: grid;
grid-template:
“areaA areaB areaC” 100px
“areaD areaE areaF” 100px
/ 120px 120px 120px
}
慣れれば、エリア名とトラックの大きさが一見して分かるので、こちらの方が分かりやすい指定方法だと言えるでしょう。
まとめ
CSSグリッドを使いこなせるようになれば、複雑な段組のレイアウトも自由自在に配置することができるようになります。
しかし、柔軟でいろいろなことができる反面、慣れるまでは少し時間がかかってしまうかもしれません。
そのような場合には、今回のようなポイント集を活用して、ぜひ実践的な練習をしてみてはいかがでしょうか。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- コンセプト
- コンセプトとは、作品やサービスなどに一貫して貫かれている考え方をいいます。デザインと機能がバラバラだったり、使い勝手がちぐはぐだったりすると「コンセプトが一貫してないね」などと酷評されてしまいます。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング