HTMLにグリッドレイアウトを組む方法を徹底解説
「グリッドを使ってHTMLに複数のレイアウトを組めるようになりたい」
「CSS Grid Layoutを使ってレイアウトを組む方法について知りたい」
上記のような疑問や悩みを抱えている方もいるのではないでしょうか。
CSS Grid Layoutを使うことで、簡単にグリッドレイアウトを組むことができます。
今回、WEBCAMP MEDIAでは、CSS Grid Layoutを使ってHTMLにグリッドレイアウトを組む方法について解説していきます。
以上の項目に沿って説明します。
この記事を読むことで、グリッドレイアウトを使ってHTMLにさまざまなレイアウトを実装する方法が理解できます。また、レスポンシブ対応についても解説しているので、ぜひチェックしてみてくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
グリッドレイアウトとは
グリッドレイアウトとは、Webサイトの縦横を格子状に分けてレイアウトを組む方法です。
グリッドという言葉には、格子や方眼という意味があり、その概念を使ってコンテンツを配置(レイアウト)することがグリッドレイアウトになります。
グリッドレイアウトを使ってデザインすることでWebサイトにまとまりが生まれ、ユーザーが見やすい構造に仕上げることができます。
グリッドレイアウトのメリット
グリッドレイアウトを使うメリットは大きく3つあります。
グリッドレイアウトはコンテンツの区切りがわかりやすく、多くの情報をユーザーに見せることができます。写真ギャラリーや情報サイトのように、一度に複数の情報をユーザーに伝えるメディアに最適なレイアウト法と言えるでしょう。
デザインに統一性があるので、記事や写真を更新・追加するのも容易です。ユーザーも見慣れているデザインなので、ストレスを感じることなく利用できるというメリットもあります。
近年はスマホやパソコンにも数多くのサイズが存在し、どの端末でも綺麗に表示することが必須となっています。グリッドレイアウトは、画面サイズに合わせてグリッドの数を容易に調節できるので、レスポンシブ対応も手間なく実装できます。
グリッドレイアウトは、Web製作者だけでなくユーザーも利用しやすい万能なレイアウト法なのです。
グリッドレイアウトのデメリット
グリッドレイアウトのデメリットは大きく2つあります。
グリッドレイアウトは統一性があるために、コンテンツの重要度を決めるのが難しいというデメリットがあります。
重要度が同じコンテンツを掲載する点においては優秀ですが、全てのコンテンツが統一していることもあり、ある特定のコンテンツを主張することが難しいレイアウトと言えます。
また、一度に多くの情報を伝えられる反面、ユーザーがどれから見たら良いか迷ってしまうというデメリットもあります。
グリッドレイアウト情報の差別化を図るときは、視認性を上げることでユーザーが見るべき記事を強調できるので、サイズを大きくしたり背景色を変えてみると良いでしょう。
CSS Grid Layoutとは
CSS Grid Layoutは、CSSを使ってHTML要素をグリッドレイアウト仕様にできる機能です。
ほかにも、HTMLにグリッドレイアウトを適用する方法としてflexboxやBootstrapが挙げられますが、CSS Grid Layoutは記述量が少なく、外部ファイルを読み込む必要がないのでおすすめです。
CSS Grid Layoutを利用するには、グリッドレイアウトの専門用語や仕組みを理解する必要があるので、その点について順次解説していきます。
CSS Grid Layoutで利用する用語一覧
CSS Grid Layoutを利用する際に使う用語と特徴は下記になります。
CSS Grid Layoutで利用するCSSプロパティ一覧
CSS Grid Layoutで利用する主なCSSプロパティには下記になります。
grid-rowとgrid-columnプロパティは、HTMLでアイテムを表示している要素に指定し任意の場所に設置できます。
移動場所の指定方法は、下記画像のように各ラインに指定した数字を使って表現します。
例えば、アイテム1を一番右下に移動させたい場合、下記のように記述します。
grid-row: 3/4;
grid-column: 2/3;右下の場所は、横ラインの3番目と4番目、縦ラインの2番目と3番目に位置します。それぞれのラインをスラッシュで囲い、grid-rowでは横列、grid-columnでは縦列を指定しましょう。
CSS Grid Layoutの使い方をサンプルコードを用いて解説
グリッドレイアウトを使ってHTML要素をレイアウトする方法について解説していきます。
<body>
<style>
.container {
display: grid;
grid-template-rows: 30px 30px 30px;
grid-template-columns: 100px 100px;
}
.container div{
border: 1px solid;
}
</style>
<div class="container"><!--コンテナ-->
<div>アイテム1</div> <!--アイテム&セル-->
<div>アイテム2</div> <!--アイテム&セル-->
<div>アイテム3</div> <!--アイテム&セル-->
<div>アイテム4</div> <!--アイテム&セル-->
<div>アイテム5</div> <!--アイテム&セル-->
</div>
</body>display: grid;を指定した要素はグリッドコンテナという扱いになるので、サンプルコードではcontainerクラスが付与されているdivタグに指定しています。
grid-template-columnsプロパティを使うと、トラックの幅を指定できます。第一引数に1行目のトラックのサイズ、第二引数に2行目のトラックのサイズという流れで指定していきます。
grid-template-rowsプロパティは、トラックの高さを指定でき、grid-template-columnsプロパティと同じ方法で値を設置します。
これらのCSS Grid Layoutを使うことで、HTMLにコンテナとセルが出来上がります。
実行結果
グリッドレイアウトのセルを希望順に並び替える方法
グリッドレイアウトのセルを好きな順序へ変更するには、orderプロパティ利用します。
orderプロパティを使うと、グリッドレイアウトやフレックスボックス内でアイテムを入れ替えることができます。
使い方は、順番を入れ替えたいアイテム全てにクラス名を付け、各クラスにorderプロパティを付与して表示したい順番を入力します。
.item1{
order: 3;
}
.item2{
order: 1;
}
.item3{
order: 2;
}上記コードではitem1というアイテムの順番が3番目でitem2が1番目、item3が2番目に表示されます。
サンプルコードを用いて、実際にグリッドレイアウト内で活用してみましょう。
サンプルコード
<body>
<style>
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
}
.container div{
border: 1px solid;
}
.item1{
order: 3;
}
.item2{
order: 1;
}
.item3{
order: 2;
}
@media(max-width: 480px){
.container{
grid-template-rows: 200px 100px fr;
grid-template-columns: 1fr minmax(180px, 1fr);
}
}
</style>
<div class="container">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
</div>
</body>実行結果
HTML要素は入力した順に左上から表示されるので、順序を変更したいときはorderプロパティを使って変更するとよいでしょう。
【フォトギャラリーに最適】グリッドを使ってマルチレイアウトを実装する方法
マルチレイアウトは、フォトギャラリーやサービス一覧のように、同じ情報を複数表示するとき頻繁に利用します。また、マルチレイアウトは規則性もあるので、グリッドレイアウトとレスポンシブ対応に最適です。
マルチレイアウトを実装するには、同じサイズの要素を複数作成できるrepeat関数を使います。
repeat(リピートする数, ボックスのサイズ)CSS Grid LayoutのCSSを使ってマルチレイアウトを作る方法を、サンプルコードを用いて解説していきます。
サンプルコード
<body>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 300px);
grid-template-rows: repeat(2,300px);
}
.container div{
border: 1px solid;
margin:0 20px 20px 0;
}
</style>
<div class="container">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
<div class="item1">アイテム4</div>
<div class="item2">アイテム5</div>
<div class="item3">アイテム6</div>
<div class="item1">アイテム7</div>
<div class="item2">アイテム8</div>
<div class="item3">アイテム9</div>
</div>
</body>grid-template-columnsにrepeat関数を指定することで、ボックスの横幅を300px、横のボックスが3つになると折り返しています。
grid-template-rowsでは、ボックスの2列目までの高さを300pxに指定しています。そのため、3列目以降はgrid-template-rowsが反映されていません。
実行結果
CSS Grid Layoutを使ってレスポンシブ対応する方法
CSS Grid Layoutを使うと、シンプルなコードでレスポンシブ対応できます。そのために使うのが、grid-template-columnsとgrid-template-rowsプロパティです。
grid-template-columnsプロパティは、グリッドレイアウトで利用する横列のトラックサイズを指定でき、grid-template-rowsプロパティは縦列のトラックサイズを指定できます。
上記2つのプロパティとメディアクエリを利用することでレスポンシブ化を実現します。
サンプルコード
<body>
<style>
.container {
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 100px 100px 100px;
}
.container div{
border: 1px solid;
}
@media(max-width: 480px){
.container{
grid-template-rows: 200px 100px 50px;
grid-template-columns: 1fr;
}
}
</style>
<div class="container">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
<div class="item4">アイテム4</div>
<div class="item5">アイテム5</div>
</div>
</body>上記コードでは、端末の横幅が480px以下になるとレイアウトを2カラムから1カラムへ変更しています。grid-template-columnsに利用されている「fr」という単位は、指定した要素の幅を自動で調節してくれます。
サンプルコードでは、grid-template-columns: 1fr;と指定することで、シングルカラムにレスポンシブされます。
grid-template-rowsに入力されている値は、アイテム1に200px、アイテム2に100pxというように順列で要素のサイズを変更できます。
実行結果
また、レスポンシブ対応で複数カラムを指定する場合は、grid-template-columnsの値にfrを追加します。
grid-template-columns: 1fr 2fr;
上記コードでは、2つのfrが利用されているので2カラムになり、横幅のバランスは1：２になります。
レスポンシブ対応で可変幅と最小値を指定する方法
レスポンシブ対応時のセルを画面幅に合わせて変化し、ある一定幅以上は小さくならない最小値を設定する方法について解説していきます。
セルの可変はfr値を使い、最小値はminmaxを利用します。minmaxの引数には最大値と最小値を指定できます。
minmax(最小値, 最大値);
サンプルコード
<body>
<style>
.container {
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 100px 100px 100px;
}
.container div{
border: 1px solid;
}
@media(max-width: 480px){
.container{
grid-template-rows: 200px 100px fr;
grid-template-columns: 1fr minmax(180px, 1fr);
}
}
</style>
<div class="container">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
<div class="item4">アイテム4</div>
<div class="item5">アイテム5</div>
</div>
</body>CSS Grid Layoutを使うとHTMLのグリッドデザインが簡単にできる
今回、WEBCAMP MEDIAでは、CSS Grid Layoutを使ってHTMLにグリッドレイアウトを組む方法について解説してきましたが、いかがでしたでしょうか？
HTMLにグリッドレイアウトを採用することで整ったデザインを実現でき、レスポンシブ対応も簡単にできます。
デメリットであるコンテンツの差別化も、背景色やコンテンツのサイズを変えることで解決できるでしょう。
何よりコード量が少なくて済むので、プログラミング初心者でも触りやすく、メンテナンス性にも優れています。
ぜひ試してみてくださいね！
