【CSS Modules】gridメディア機能の使い方

Copy
1/*
2 * CSS Gridレイアウトのチートシート
3 * このスタイルは、出力デバイスがCSS Gridをサポートしている場合にのみ適用されます。
4 * (media feature: grid が 1 の場合)
5 * システムエンジニアを目指す初心者の方向けに、主要なプロパティを簡潔にまとめました。
6 */
7@media (grid: 1) {
8  /*
9   * .grid-container: グリッドレイアウトの親要素 (コンテナ)
10   * display: grid; を指定することで、その子要素 (アイテム) がグリッドアイテムとして配置されます。
11   */
12  .grid-container {
13    display: grid; /* 要素をグリッドコンテナとして定義 */
14
15    /*
16     * grid-template-columns: グリッドの列を定義します。
17     * repeat(3, 1fr) は、1fr (使用可能な空間を均等に分割) の列を3つ作成します。
18     * 例: 1fr 1fr 1fr
19     */
20    grid-template-columns: repeat(3, 1fr);
21
22    /*
23     * grid-template-rows: グリッドの行を定義します。
24     * repeat(auto-fill, minmax(100px, auto)) は、最小100px、最大autoの高さの行を自動で作成します。
25     */
26    grid-template-rows: repeat(auto-fill, minmax(100px, auto));
27
28    /*
29     * gap: グリッドの行と列の間の間隔を定義します。
30     * row-gap と column-gap のショートハンドです。
31     */
32    gap: 20px 15px; /* 行間に20px、列間に15pxの間隔を設定 */
33
34    /*
35     * justify-content: グリッドコンテナ内のグリッド全体を水平方向に配置します。
36     * (例: start, end, center, space-between, space-around, space-evenly)
37     */
38    justify-content: start;
39
40    /*
41     * align-content: グリッドコンテナ内のグリッド全体を垂直方向に配置します。
42     * (例: start, end, center, space-between, space-around, space-evenly)
43     */
44    align-content: start;
45
46    /*
47     * justify-items: グリッド内の個々のアイテムを水平方向に配置するデフォルト設定です。
48     * (例: start, end, center, stretch)
49     */
50    justify-items: stretch;
51
52    /*
53     * align-items: グリッド内の個々のアイテムを垂直方向に配置するデフォルト設定です。
54     * (例: start, end, center, stretch)
55     */
56    align-items: stretch;
57  }
58
59  /*
60   * .grid-item: グリッドレイアウトの子要素 (アイテム)
61   * グリッドコンテナ内に配置される各要素の基本スタイルです。
62   */
63  .grid-item {
64    background-color: #e0f7fa; /* アイテムの背景色 */
65    padding: 15px; /* アイテムの内側の余白 */
66    border: 1px solid #b2ebf2; /* アイテムの境界線 */
67    text-align: center; /* テキスト中央揃え */
68    font-size: 1.2em; /* フォントサイズ */
69    display: flex; /* アイテム内のコンテンツを中央揃えするためにflexboxを使用 */
70    justify-content: center;
71    align-items: center;
72  }
73
74  /* 特定のグリッドアイテムの配置を調整する例 */
75
76  /*
77   * grid-column: アイテムが占める列の範囲を定義します。
78   * 'start / end' または 'span N' を使用します。
79   */
80  .grid-item-span-2-columns {
81    grid-column: span 2; /* このアイテムは2列分を占めます */
82    background-color: #c8e6c9;
83  }
84
85  /*
86   * grid-row: アイテムが占める行の範囲を定義します。
87   * 'start / end' または 'span N' を使用します。
88   */
89  .grid-item-span-2-rows {
90    grid-row: span 2; /* このアイテムは2行分を占めます */
91    background-color: #ffecb3;
92  }
93
94  /*
95   * grid-area: アイテムを特定の名前付きグリッド領域に配置します。
96   * (grid-template-areas プロパティと組み合わせて使用)
97   * 例: grid-area: header;
98   */
99
100  /*
101   * justify-self: 個々のグリッドアイテムを水平方向に配置します。
102   * (例: start, end, center, stretch)
103   */
104  .grid-item-justify-center {
105    justify-self: center; /* セル内で水平中央に配置 */
106    max-width: 80%; /* 配置効果を確認しやすいように最大幅を設定 */
107    background-color: #ffe0b2;
108  }
109
110  /*
111   * align-self: 個々のグリッドアイテムを垂直方向に配置します。
112   * (例: start, end, center, stretch)
113   */
114  .grid-item-align-end {
115    align-self: end; /* セル内で垂直下端に配置 */
116    max-height: 80px; /* 配置効果を確認しやすいように最大高さを設定 */
117    background-color: #f8bbd0;
118  }
119}
120
121/*
122 * 【補足】
123 * `@media (grid: 0)` は、CSS Gridがサポートされていない環境を意味します。
124 * そのような環境向けには、Flexboxなどのフォールバックレイアウトを別途定義することを検討してください。
125 * (例: .grid-container { display: flex; flex-wrap: wrap; } )
126 */

このサンプルコードは、CSS Gridレイアウトの主要なプロパティをまとめたチートシートです。まず、@media (grid: 1)という記述に注目してください。gridというメディア特性は引数を持たず、現在の出力デバイスがCSS Gridレイアウトをサポートしている場合にのみ、内側のスタイルを適用するための条件として機能します。この特性自体は直接的な戻り値を持ちませんが、条件が真であればスタイルが有効になり、条件が偽（grid: 0）であればスタイルは適用されません。

.grid-containerクラスでは、display: grid;を指定することで、その要素をグリッドレイアウトの親（コンテナ）として定義します。grid-template-columnsやgrid-template-rowsで列と行の構成を具体的に設定し、gapでグリッド間の余白を調整します。また、justify-contentとalign-contentはコンテナ内のグリッド全体の位置を、justify-itemsとalign-itemsはグリッド内の個々のアイテムのデフォルトの配置を制御するプロパティです。

.grid-itemクラスは、グリッドコンテナ内に配置される各要素（アイテム）の基本的なスタイルを定義します。個別のアイテムに対しては、grid-columnやgrid-rowを使ってそのアイテムが占める列や行の範囲を指定できます。さらに、justify-selfやalign-selfを用いることで、個々のグリッドアイテムを自身のセル内で水平方向または垂直方向に配置を調整することが可能です。

なお、CSS Gridがサポートされていない環境向けには、@media (grid: 0)を用いてFlexboxなどの代替レイアウトを定義することを検討するのが良いでしょう。

Copy
1/*
2 * このCSSは、CSS Gridレイアウトをサポートするデバイスにのみ適用されます。
3 * grid-template-columnsプロパティは、Gridコンテナの列の構造を定義します。
4 *
5 * 想定されるHTML構造:
6 * <div class="grid-container">
7 *   <div class="grid-item">Item 1</div>
8 *   <div class="grid-item">Item 2</div>
9 *   <div class="grid-item">Item 3</div>
10 *   <div class="grid-item">Item 4</div>
11 * </div>
12 */
13
14/*
15 * @media (grid) は、現在の環境がCSS Gridレイアウトに対応しているかどうかを判定します。
16 * 対応している場合のみ、このブロック内のスタイルが適用されます。
17 */
18@media (grid) {
19  .grid-container {
20    display: grid; /* 要素をGridコンテナとして定義します */
21
22    /*
23     * grid-template-columns: repeat(3, 1fr);
24     * これは、3つの均等な幅の列を作成するという意味です。
25     * 'repeat(3, 1fr)' は '1fr 1fr 1fr' と同じです。
26     * 'fr' (fraction) 単位は、利用可能なスペースを均等に分割するために使用されます。
27     */
28    grid-template-columns: repeat(3, 1fr);
29
30    gap: 10px; /* グリッドアイテム間の間隔を10pxに設定します */
31    padding: 10px;
32    border: 1px solid #ccc; /* コンテナの境界線 */
33  }
34
35  .grid-item {
36    background-color: #f0f0f0;
37    border: 1px solid #ddd;
38    padding: 20px;
39    text-align: center;
40  }
41}

このサンプルコードは、CSS Gridレイアウトを使用してウェブページの要素を配置する方法を示しています。まず、@media (grid)という部分にご注目ください。これはメディアクエリと呼ばれる機能で、現在のウェブブラウザやデバイスがCSS Gridレイアウトに対応しているかどうかを判定します。もし対応していれば、その中に書かれたスタイルが適用されます。これにより、古いブラウザなどGridに対応していない環境では異なるレイアウトを表示し、最新の環境ではGridを使った柔軟なレイアウトを安全に利用できるようになります。

@media (grid)ブロック内で、.grid-containerクラスを持つ要素に対してdisplay: grid;を設定しています。これは、その要素をGridコンテナとして定義し、その子要素をグリッド形式で配置するための準備です。

次に重要なのがgrid-template-columns: repeat(3, 1fr);です。これはGridコンテナの列の構造を定義するプロパティです。repeat(3, 1fr)は、「利用可能な空間を3つの均等な幅の列に分割する」という意味です。ここで使われているfr単位は「fraction（割合）」を意味し、利用可能なスペースを自動的に均等に割り振るために非常に便利です。この設定により、コンテナ内のアイテムが3列に並び、それぞれが等しい幅を持つようになります。

gap: 10px;は、Gridアイテム同士の間に10ピクセルの間隔（隙間）を設けるためのプロパティです。

このgridというメディア特性には、特定の引数を渡したり、何らかの値を戻したりする機能はありません。単に、閲覧環境がCSS Gridレイアウトに対応しているかどうかの真偽を判定する目的で使用されます。