0%

Programmingプログラミングナレッジ

Posted:2018.10.27

CSSのGridレイアウトをマスターするためのまとめ(基本編:マルチカラムレイアウト)

前回記事「CSSのGridレイアウトをマスターするためのまとめ(各種プロパティ編)」ではCSSのGridレイアウトの基本ということで各種プロパティや使い方などを中心にまとめていきましたが、今回は実際のGridレイアウトを使ってウェブサイトのレイアウトによくある2カラムや3カラムといったマルチカラムレイアウトを作ってみたいと思います。

 

2次元方向への要素の配置に適したGridレイアウト

インラインやFlexboxの場合は一方向へ成り行きに配置されていきますが、Girdレイアウトは縦横どちらの方向へも自由に配置指定が可能です。どちらかというとテーブル要素と似ているのですが、テーブルの場合はセルの並びや位置などの制約がありますが、Girdレイアウトの場合はあくまでグリッド状に要素を配置するだけですので、変則的なレイアウトを実装することも可能です。

 

Gridレイアウトで作る2カラムレイアウトのサンプル

メインとサブに分かれた、ウェブサイトでよくあるような2カラムのレイアウトもGridレイアウトで簡単に実装することができます。

【HTML】※一部省略

<div class="grid-container">
  <header class="gird-item">
    <!-- ヘッダーエリア -->
  </header>
  <main class="gird-item">
    <!-- メインコンテンツエリア -->
  </main>
  <aside class="gird-item">
    <!-- サイドバーエリア -->
  </aside>
  <footer class="gird-item">
    <!-- フッターエリア -->
  </footer>
</div>

 

【CSS】

.grid-container {
  display: grid;
  display: -ms-grid;
  grid-template-rows: 80px 1fr 200px;
  -ms-grid-rows: 80px 1fr 200px;
  grid-template-columns: 75% 25%;
  -ms-grid-colums: 75% 25%;
}
header.grid-item {
  grid-row: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-column: 1 / 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
}
main.grid-item {
  grid-row: 2 / 3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-column: 1 / 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
}
aside.grid-item {
  grid-row: 2 / 3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-column: 2 / 3;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
}
footer.grid-item {
  grid-row: 3 / 4;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-column: 1 / 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
}

 

親要素にGirdレイアウトを指定し、子要素にGird上での配置場所を指定します。frという単位は各列行の合計における残りの幅や高さを示します。

 

ここではgird-row及びgird-columnプロパティでレイアウトを指定しています。3行2列になるのでグリッド上のラインとしては、行(row)が4つ、列(column)が3つとなります。それぞれの開始点と終了点をスペースとスラッシュで区切ります。

2カラムレイアウトのサンプルはこちらに用意していますので参考に。

 

Gridレイアウトで作る3カラムレイアウトのサンプル

先ほどの2カラムレイアウトと同じような感じで、3カラムのレイアウトも簡単に実現できます。グリッド上のラインが増えるのでそれに合わせて指定するだけです。

【HTML】※一部省略

<div class="grid-container">
  <header class="gird-item">
    <!-- ヘッダーエリア -->
  </header>
  <nav class="gird-item">
    <!-- ナビゲーションエリア -->
  </nav>
  <main class="gird-item">
    <!-- メインコンテンツエリア -->
  </main>
  <aside class="gird-item">
    <!-- サイドバーエリア -->
  </aside>
  <footer class="gird-item">
    <!-- フッターエリア -->
  </footer>
</div>

 

【CSS】

.grid-container {
  display: grid;
  display: -ms-grid;
  grid-template-rows: 80px 1fr 200px;
  -ms-grid-rows: 80px 1fr 200px;
  grid-template-columns: 15% 60% 25%;
  -ms-grid-colums: 15% 60% 25%;
}
header.grid-item {
  grid-row: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-column: 1 / 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
}
nav.grid-item {
  grid-row: 2 / 3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-column: 1 / 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
}
main.grid-item {
  grid-row: 2 / 3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-column: 2 / 3;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
}
aside.grid-item {
  grid-row: 2 / 3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-column: 3 / 4;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
}
footer.grid-item {
  grid-row: 3 / 4;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-column: 1 / 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
}

 

2カラムから3カラムと1列増えたので、それに合わせて値も調整する形になります。基本的には同じ方法ですね。

エリア名で指定したレイアウトのサンプルはこちらに用意していますので参考に。

 

また、上記の方法はグリッドのラインを基準に位置を指定しましたが、それぞれのグリッドに対して名前をつけて視覚的に位置を設定することも可能です。その場合には、親要素にgrid-template-areasのプロパティでエリア名を一括登録し、子要素にgrid-areaのプロパティで下記のようにエリアを要素に紐付けます。

 

【HTML】※一部省略

<div class="grid-container">
  <div class="gird-item">
    <!-- エリア1 -->
  </div>
  <div class="gird-item">
    <!-- エリア2 -->
  </div>
  <div class="gird-item">
    <!-- エリア3 -->
  </div>
  <div class="gird-item">
    <!-- エリア4 -->
  </div>
</div>

 

【CSS】

.grid-container {
  display: grid;
  grid-template-rows: 150px 1fr 150px;
  grid-template-columns: 50% 50%;
  grid-template-areas:
    "area1 area1"
    "area2 area3"
    "area4 area4";
}
.grid-item:first-child {
  grid-area: area1;
}
.grid-item:nth-child(2) {
  grid-area: area2;
}
.grid-item:nth-child(3) {
  grid-area: area3;
}
.grid-item:nth-child(4) {
  grid-area: area4;
}

 

grid-template-areasのプロパティで行ごとに見た目のレイアウトと同じようになるよう、エリア名を決める形になります。また列は半角スペースで区切ります。この時のエリア名は自由に設定できます。そして、子要素のgrid-areaプロパティでエリア名を紐付けます。値が見た目と同じようになるのでイメージしやすいですね。サンプルはこちらです。

 


 

いかがでしょうか、基本的なマルチカラムの場合ですとややこしいイメージのあるGirdレイアウトでも簡単に実装することができます。Flexboxレイアウトとの使い分けることで効果的にコーディングできそうですね。

 

(参考にさせて頂いたサイト)
CSS Grid Layout を極める!(基礎編)

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】