ホームぺージ関連HTML初心者講座HTML中級者講座カメラ・写真関連失敗と経験その他

アフィリエイト広告を利用しております。
参考サイトの記載がある場合はそちらの方がより詳しく記載説明がされているのでぜひそちらもご覧ください。
そのままコピペしても反映されないものもあります。サイトごとに変えないといけない箇所がありますので修正してください。

CSS HTML

CSS Gridレイアウトの基本と応用

CSS Gridは、Webページのレイアウトを効率的に構築できる強力なレイアウトシステムです。
このガイドでは、初心者向けに基本から応用までわかりやすく解説していきます。

CSS Gridとは？

CSS Gridは、2次元のレイアウトシステムで、行（rows）と列（columns）を組み合わせて要素を配置できます。 従来の「float」や「flexbox」では難しかった複雑なレイアウトも、簡単に実現できます。

特徴

  • 2次元レイアウトの構築が簡単（縦・横の両方に対応）。
  • レスポンシブデザインを簡単に作成できる。
  • 親要素と子要素でのレイアウト制御が明確。

基本的な使い方

Grid Container の設定

まず、display: grid; を指定することで要素がGrid Containerになります。

CSSコード
1
2
3
.container {
  display: grid;
}

行と列の定義 (grid-template-columns / grid-template-rows)

grid-template-columns は列の幅を、grid-template-rows は行の高さを指定します。

CSSコード
1
2
3
4
5
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
}

上記の場合、3列 × 2行 のグリッドが作成されます。

自動でサイズ調整 (auto)

CSSコード
1
2
3
4
.container {
  display: grid;
  grid-template-columns: 200px auto 200px;
}

中央の列は空きスペースに応じて自動で調整されます。

繰り返し記法 (repeat())

CSSコード
1
2
3
4
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

この例は、同じ幅の列を3つ作成します。1fr は残りの空間を等分する単位です。

グリッドアイテムの配置

アイテムの配置方法

子要素（Grid Item）は自動で配置されますが、指定して配置することも可能です。

CSSコード
1
2
3
4
.item1 {
  grid-column: 1 / 3; /* 列を1から3までの範囲で占有 */
  grid-row: 1 / 2;   /* 行を1から2までの範囲で占有 */
}

grid-area プロパティ

CSSコード
1
2
3
.item1 {
  grid-area: 2 / 1 / 3 / 4; /* 行開始 / 列開始 / 行終了 / 列終了 */
}

応用テクニック

レスポンシブグリッドレイアウト

メディアクエリを使ってレスポンシブ対応を実現。

CSSコード
1
2
3
4
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

名前付きグリッドエリア

指定した名前でエリアを定義できます。

CSSコード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}
 
.header {
  grid-area: header;
}
 
.sidebar {
  grid-area: sidebar;
}
 
.content {
  grid-area: content;
}
 
.footer {
  grid-area: footer;
}

まとめ

CSS Gridは、レイアウトを簡単かつ柔軟に構築できる強力なツールです。基本を理解することで、自由なレイアウト作成が可能になります。

中級者講座:目次
  1. レンタルサーバーに登録して、wordpressを入れてホームページを作成しよう
  2. 【wordpress】にプラグインを入れよう
  3. wpautopを無効化してタグやタグを制御する方法(2025/03/04 公開予定)
  4. HTMLとCSSで作る2カラム・3カラム・4カラムのレイアウト
  5. レスポンシブデザインに挑戦！画面サイズに応じてカラム数を変化させる方法
  6. CSSの:hover擬似クラスとは？
  7. アニメーションやトランジションを取り入れて、よりインタラクティブなWebデザインを目指そう！
  8. absoluteを使った画像と文字の重ね表示をマスターしよう！
  9. absoluteでの基礎的な配置を学ぼう
  10. CSS変数（カスタムプロパティ）とは？
  11. 【CSS】左右いっぱいに広がるデザインを作る
  12. 【CSS】Flexboxを完全マスター！基本から応用まで徹底
  13. CSS Gridレイアウトの基本と応用
【Amazon】ちゃんと知っておきたい人のHTML/CSS完全入門: HTML習得の最短講座！1日３０分で楽しく学ぼう！ Kindle版

おすすめ記事

1
クラシックエディタ用のプラグインを作ってみた
制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました [Tab]キー押して空白入れて見やすくインデントしたい！ この記事を書くまでは入れないか、スペースキーを押して誤 ...
2
クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた
制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました コード追加ボタンを自由に追加出来たら便利じゃない？ この記事を書くまでは、クリップボード貼り付けアプリ[Clib ...
3
Amazon納品代行 FBA商品ラベルにJANコード下4桁を入れるアプリ(簡易版)を作ってみた
アプリ制作するに至った理由 納品代行の仕事をしていて思ったことがあります 納品代行をしていると本当に様々なお客様から様々な商品が届きます その中でも特に注意しているのが、「見た目ほぼ同じだけど違う商品 ...

-CSS, HTML
-

S