数値+単位の指定方法
色の指定方法
コメントアウト
CSSでは、「/* コメント */」という形式でコメントができます。CSSとしては処理されないので説明やメモとして使用できます。コメントは改行することもできます。
/*
Webサイトに共通のクラスを適用
*/
/* h1のタイトルクラスの色は青に指定 */
h1.title {
color: blue;
}
h2.title {
color: red;
/*
一時的にfont-sizeは無効
font-size: 15px;
*/
}
CSSプロパティ目次
よく使う 用途によっては使う あまり使わない
疑似クラスとは
疑似クラスは、主にその要素の「状態」によって適用されるかどうかが決定されるセレクタ。
疑似要素とは
要素ではない部分(タグで囲われていない範囲)を適用先として指定するためのセレクタ。
セレクタ
頻度 | クラス | 解説 | |
---|---|---|---|
要素名{~} | タイプセレクター | 指定した要素にスタイルを適用する | |
*{~} | ユニバーサルセレクター | すべての要素にスタイルを適用する | |
要素名.クラス名{~} | クラスセレクター | 指定したクラス名を持つ要素にスタイルを適用する | |
要素名 #ID名{~} | IDセレクター | 指定したID名を持つ要素にスタイルを適用する | |
要素名A 要素名B{~} | 子孫セレクター | 子孫要素にスタイルを適用する | |
要素名A > 要素名B {~} | 子セレクター | 子要素にスタイルを適用する | |
要素名A+要素名B{~} | 隣接セレクター | 直後の要素にスタイルを適用する | |
要素名A~要素名B{~} | 間接セレクター | 弟要素にスタイルを適用する | |
要素名[属性]{~} | 属性セレクター | 指定した属性を持つ要素にスタイルを適用する | |
要素名[属性=”属性値”]{~} | 属性セレクター | 指定した属性と属性値を持つ要素にスタイルを適用する | |
要素名[属性~=”属性値”]{~} | 属性セレクター | 指定した属性値を含む要素にスタイルを適用する | |
要素名[属性^=”属性値”]{~} | 属性セレクター | 指定した文字列で始まる属性値を持つ要素にスタイルを適用する | |
要素名[属性$=”属性値”]{~} | 属性セレクター | 指定した文字列で終わる属性値を持つ要素にスタイルを適用する | |
要素名[属性*=”属性値”]{~} | 属性セレクター | 指定した文字列を含む属性値を持つ要素にスタイルを適用する | |
要素名[属性|=”属性値”]{~} | 属性セレクター | 指定した文字列がハイフンの前にある属性値を持つ要素にスタイルを適用する | |
要素名:first-child{~} | 疑似クラス | 最初の子要素にスタイルを適用する | |
要素名:first-of-type{~} | 疑似クラス | 最初の子要素にスタイルを適用する(同一要素のみ) | |
要素名:last-child{~} | 疑似クラス | 最後の子要素にスタイルを適用する | |
要素名:last-of-type{~} | 疑似クラス | 最後の子要素にスタイルを適用する(同一要素のみ) | |
要素名:nth-child(n){~} | 疑似クラス | n番目の子要素にスタイルを適用する | |
要素名:nth-of-type(n) | 疑似クラス | n番目の子要素にスタイルを適用する(同一要素のみ) | |
要素名:nth-last-child(n){~} | 疑似クラス | 最後からn番目の子要素にスタイルを適用する | |
要素名:nth-last-of-type(n){~} | 疑似クラス | 最後からn番目の子要素にスタイルを適用する(同一要素のみ) | |
要素名:only-child{~} | 疑似クラス | 唯一の子要素にスタイルを適用する | |
要素名:only-of-type{~} | 疑似クラス | 唯一の子要素にスタイルを適用する(同一要素のみ) | |
要素名:empty{~} | 疑似クラス | 子要素を持たない要素にスタイルを適用する | |
:root{~} | 疑似クラス | 文書のルート要素にスタイルを適用する | |
要素名:link{~} | 疑似クラス | 閲覧者が未訪問のリンクにスタイルを適用する | |
要素名:visited{~} | 疑似クラス | 閲覧者が訪問済みのリンクにスタイルを適用する | |
要素名:any-link{~} | 疑似クラス | 訪問の有無に関係なくリンクにスタイルを適用する | |
要素名:active{~} | 疑似クラス | アクティブになった要素にスタイルを適用する | |
要素名:hover{~} | 疑似クラス | マウスポインターが重ねられた要素にスタイルを適用する | |
要素名:focus{~} | 疑似クラス | フォーカスされている要素にスタイルを適用する | |
要素名:focus-within{~} | 疑似クラス | フォーカスを持った要素を含む要素にスタイルを適用する | |
:host{~} | 疑似クラス | Shadow DOMの内部からホストにスタイルを適用する | |
要素名:target{~} | 疑似クラス | アンカーリンクの移動先となる要素にスタイルを適用する | |
要素名:lang(言語){~} | 疑似クラス | 特定の言語コードを指定した要素にスタイルを適用する | |
要素名:not(条件){~} | 疑似クラス | 指定した条件を除いた要素にスタイルを適用する | |
要素名:fullscreen{~} | 疑似クラス | 全画面モードでスタイルを適用する | |
@page :left{~} @page:right{} |
疑似クラス | 印刷文書の左右ページにスタイルを適用する | |
@page :first{~} | 疑似クラス | 印刷文書の最初のページにスタイルを適用する | |
要素名:enabled{~} | 疑似クラス | 有効な要素にスタイルを適用する | |
要素名:disabled{~} | 疑似クラス | 無効な要素にスタイルを適用する | |
要素名:checked{~} | 疑似クラス | チェックされた要素にスタイルを適用する | |
要素名:default{~} | 疑似クラス | 既定値となっているフォーム関連要素にスタイルを適用する | |
要素名:in-range{~} 要素名:out-of-range{~} |
疑似クラス | 制限範囲内、または範囲外の値がある要素にスタイルを適用する | |
要素名:valid{~} | 疑似クラス | 内容の検証に成功したフォーム関連要素にスタイルを適用する | |
要素名:invalid{~} | 疑似クラス | 無効な入力内容が含まれたフォーム関連要素にスタイルを適用する | |
要素名:required{~} | 疑似クラス | 必須のフォーム関連要素にスタイルを適用する | |
要素名:optional{~} | 疑似クラス | 必須ではないフォーム関連要素にスタイルを適用する | |
要素名:read-write{~} | 疑似クラス | 編集可能な要素にスタイルを適用する | |
要素名:read-only{~} | 疑似クラス | 編集不可能な要素にスタイルを適用する | |
要素名:defined{~} | 疑似クラス | 定義されているすべての要素にスタイルを適用する | |
要素名:indeterminate{~} | 疑似クラス | 中間の状態にあるフォーム関連要素にスタイルを適用する | |
要素名:placeholder-shown{~} | 疑似クラス | プレースホルダーが表示されている要素にスタイルを適用する | |
要素名:placeholder{~} | 疑似クラス | プレースホルダーの文字列にスタイルを適用する | |
要素名::first-line{~} | 疑似要素 | 要素の1行目にのみスタイルを適用する | |
要素名::first-letter{~} | 疑似要素 | 要素の1文字目にのみスタイルを適用する | |
要素名::before{~} 要素名::after{~} |
疑似要素 | 要素の内容の前後に指定したコンテンツを挿入する | |
要素名::backdrop{~} | 疑似要素 | 全画面モード時の背後にあるボックスにスタイルを適用する | |
要素名::cue{~} | 疑似要素 | WEBVTTにスタイルを適用する | |
※一般的なブラウザで動作しない。 |
|||
要素名::slotted(セレクター){~} | 疑似要素 | slot内に配置された要素にスタイルを適用する |
カテゴリ別
フォント/テキスト
プロパティ | 頻度 | 解説 |
---|---|---|
font-family | フォントを指定する | |
font-style | フォントのスタイルを指定する | |
font-variant | フォントの形状をまとめて指定する | |
font-variant-caps | スモールキャピタルの使用を指定する | |
font-variant-numeric | 数字、分数、序数標識の表記を指定する | |
font-variant-alternates | 代替字体の使用を指定する | |
font-variant-ligatures | 合字や前後関係に依存する字体を指定する | |
font-variant-east-asian | フォントの形状をまとめて指定する | |
font-weight | フォントの太さを指定 | |
font-size | フォントのサイズを指定 | |
font-size-adjust |
小文字の高さに基づいたフォントサイズの選択を 指定する |
|
line-height | 行の高さをまとめて指定 | |
font | フォントと行、高さ等まとめて指定する | |
font-stretch | フォントの幅を指定 | |
font-feature-settings | OpenTypeフォントの機能の有効・無効を指定 | |
@font-face | Webフォントの利用を指定する | |
font-kerning | カーニング情報の使用方法を制御する | |
text-transform | 英文字の大文字や小文字の表示方法を指定する | |
text-align | 文章の揃え位置を指定する | |
text-justify | 文章の均等割付の形式を指定する | |
text-align-last | 文章の最終行の揃え位置を指定する | |
text-overflow | ボックスに収まらない文章の表示方法を指定する | |
vertical-align | 行内やセル内の縦方向の揃え位置を指定する | |
text-indent | 文章の1行目の字下げ幅を指定する | |
letter-spacing | 文字の間隔を指定する | |
word-spacing | 単語の間隔を指定する | |
tab-size | タブの表示幅を指定する | |
white-space | スペース、タブ、改行の表示方法を指定する | |
word-break | 文章の改行方法を指定する | |
line-break | 改行の禁則処理を指定する |
フォント/テキスト
プロパティ | 頻度 | 解説 |
---|---|---|
overflow-wrap | 単語の途中での改行を指定する | |
word-wrap | ||
hyphens | 単語の途中での改行におけるハイフンを指定する | |
direction | 文字を表示する方向を指定する | |
unicode-bidi | 文字の書字方向の上書き方法を指定する | |
writing-mode | 縦書き、または横書きを指定する | |
text-combine-upright | 縦中横を指定する | |
text-orientation | 縦書き時の文字の向きを指定する | |
text-decoration-line | 傍線の位置を指定する | |
text-decoration-color | 傍線の色を指定する | |
text-decoration-style | 傍線のスタイルを指定する | |
text-decoration-thickness | 傍線の太さを指定する | |
text-decoration | 傍線をまとめて指定する | |
text-underline-position | 下線の位置を指定する | |
text-emphasis-style | 傍線のスタイルと形を指定する | |
text-emphasis-color | 傍線の色を指定する | |
text-emphasis | 文字の傍線をまとめて指定する | |
text-emphasis-position | 傍線の位置を指定する | |
text-shadow | 文字の影を指定する | |
list-style-image | リストマーカーの画像を指定する | |
list-style-type | リストマーカーの種類を指定する | |
list-style-position | リストマーカーの位置を指定する | |
list-style | リストマーカーをまとめて指定する | |
color | 文字の色を指定する | |
color-adjust |
非推奨。標準化の予定はなし実装に互換性なし -webkit-print-color-adjust |
色/背景/ボーダー
プロパティ | 頻度 | 解説 |
---|---|---|
background-color | 要素の背景色を指定する | |
background-image | 要素の背景画像を指定する | |
background-repeat | 背景画像の繰り返しを指定する | |
background-attachment |
スクロールしたときの背景画像の表示方法を 指定する |
|
background-position |
背景画像を表示する水平・垂直位置を指定する |
|
background-size | 背景画像の表示サイズを指定する | |
background-origin | 背景画像を表示する基準位置を指定する | |
background-clip | 背景画像を表示する領域を指定する | |
background | 背景のプロパティをまとめて指定する | |
mix-blend-mode | 要素同士の混合方法を指定する | |
background-blend-mode | 背景色と背景画像の混合方法を指定する | |
isolation | 重ね合わせコンテキストの生成を指定する | |
opacity | 色の透明度を指定する | |
color-adjust | 画面を表示する端末に応じた色の設定を許可する | |
filter | グラフィック効果を指定する | |
backdrop-filter | 要素の背後のグラフィック効果を指定する | |
linear-gradient | 線形のグラデーションを表示する | |
radial-gradient | 円形のグラデーションを表示する | |
repeating-linear-gradient | 線形のグラデーションを繰り返して表示する | |
repeating-radial-gradient | 円形のグラデーションを繰り返して表示する | |
shape-outside | テキスト回り込みの形状を指定する | |
shape-margin | テキストの回り込みの形状にマージンを指定する | |
shape-image-threshold |
テキストの回り込みの形状を画像から抽出する 際のしきい値を指定する |
|
caret-color | 入力キャレットの色を指定する | |
border-top-style | ボーダーのスタイルを指定する | |
border-right-style | ||
border-bottom-style | ||
border-left-style | ||
border-style | ボーダーのスタイルをまとめて指定する | |
border-top-width | ボーダーの幅をまとめて指定する | |
border-right-width | ||
border-bottom-width | ||
border-left-width |
色/背景/ボーダー
プロパティ | 頻度 | 解説 |
---|---|---|
border-width | ボーダーの幅をまとめて指定する | |
border-top-color | ボーダーの色を指定する | |
border-right-color | ||
border-bottom-color | ||
border-left-color | ||
border-color | ボーダーの色をまとめて指定する | |
border-top | ボーダーの各辺をまとめて指定する | |
border-right | ||
border-bottom | ||
border-left | ||
border | ボーダーをまとめて指定する | |
border-block-start-style |
書字方向に応じてボーダーのスタイルを 指定する |
|
border-block-end-style | ||
border-inline-start-style | ||
border-inline-end-style | ||
border-block-style |
書字方向に応じてボーダーのスタイルを まとめて指定する |
|
border-inline-style | ||
border-block-start-width | 書字方向に応じてボーダーの幅を指定する | |
border-block-end-width | ||
border-inline-start-width | ||
border-inline-end-width | ||
border-blcok-width |
書字方向に応じてボーダーのスタイルを まとめて指定する |
|
border-inline-width | ||
border-block-start-color |
書字方向に応じてボーダーの色を まとめて指定する |
|
border-block-end-color | ||
border-inline-start-color | ||
border-inline-end-color | ||
border-block-color |
書字方向に応じてボーダーの色を まとめて指定する |
|
border-inline-color | ||
border-top-left-radius | ボーダーの角丸を指定する | |
border-top-right-radius | ||
border-bottom-left-radius | ||
border-bottom-right-radius | ||
border-radius | ボーダーの角丸をまとめて指定する | |
border-image-source | ボーダーに利用する画像を指定する | |
border-image-width | ボーダー画像の幅を指定する | |
border-image-slice | ボーダー画像の分割位置を指定する | |
border-image-repeat | ボーダー画像の繰り返しを指定する | |
border-image-outset | ボーダー画像の領域を広げるサイズを指定する | |
border-image | ボーダー画像をまとめて指定する |
ボックス/テーブル
プロパティ | 頻度 | 解説 |
---|---|---|
box-decoration-break | 分割されたボックスの表示方法を指定する | |
box-shadow | ボックスの影を指定する | |
box-sizing | ボックスサイズの算出方法を指定する | |
width | ボックスの幅と高さを指定する | |
height | ||
max-width | ボックスの幅と高さの最大値を指定する | |
max-height | ||
min-width | ボックスの幅と高さの最小値を指定する | |
min-height | ||
max-block-size |
書字方向に応じてボックスの幅と高さの最大値を 指定する |
|
max-inline-size | ||
min-block-size |
書字方向に応じてボックスの幅と高さの最小値を 指定する |
|
min-inline-size | ||
overflow |
ボックスに収まらない内容の表示方法を指定する |
|
overflow-x |
ボックスに収まらない内容の表示方法を個別に 指定する |
|
overflow-y | ||
margin-top | ボックスのマージン幅を指定する | |
margin-right | ||
margin-bottom | ||
margin-left | ||
margin | ボックスのマージンの幅をまとめて指定する | |
padding-top | ボックスのパディングの幅を指定する | |
padding-right | ||
padding-bottom | ||
padding-left | ||
padding | ボックスのパディングの幅をまとめて指定する | |
margin-block-start | 書字方向に応じてボックスのマージンの幅を指定する | |
margin-blcok-end | ||
margin-inline-start | ||
margin-inline-end | ||
margin-block |
書字方向に応じてボックスのマージンの幅をまとめて 指定する |
|
margin-inline | ||
padding-block-start |
書字方向に応じてボックスのパディングの幅を 指定する |
|
padding-block-end | ||
padding-inline-start | ||
padding-inline-end | ||
padding-start |
書字方向に応じてボックスのパディングの幅を まとめて指定する |
|
padding-end |
ボックス/テーブル
プロパティ | 頻度 | 解説 |
---|---|---|
outline-style | ボックスのアウトラインのスタイルを指定する | |
outline-width | ボックスのアウトラインの幅を指定する | |
outline-color | ボックスのアウトラインの色を指定する | |
outline | ボックスのアウトラインをまとめて指定する | |
outline-offset | アウトラインのボーダーの間隔を指定する | |
resize | ボックスのサイズ変更の可否を指定する | |
display | ボックスの種類を指定する | |
position | ボックスの配置方法を指定する | |
top | ボックスの配置位置を指定する | |
right | ||
bottom | ||
left | ||
float | ボックスの回り込み位置を指定する | |
clear | ボックスの回り込みを解除する | |
z-index | ボックスの重ね順を指定する | |
visibility | ボックスの表示・非表示を指定する | |
clip-path | ボックスの部分的に切り抜いて表示する | |
table-layout | 表組みのレイアウト方法を指定する | |
border-collapse | 表組みの内のボーダーの表形式を指定する | |
border-spacing | 表組み内のボーダーの間隔を指定する | |
empty-cells | 空白セルのボーダーの表示方法を指定する | |
caption-side | 表組みのタイトルの表示位置を指定する | |
scroll-behavior | ボックスにスクロール時の動きを指定する | |
scroll-snap-type | スクロールにスナップさせる方法を指定する | |
scroll-snap-align | ボックスをスナップする位置を指定する | |
scroll-margin-top | スナップされる位置のマージンの幅を指定する | |
scroll-margin-right | ||
scroll-margin-bottom | ||
scroll-margin-left | ||
scroll-margin |
スナップされる位置のマージンの幅を まとめて指定する |
|
scroll-padding-top |
スクロールコンテナーのパディングの幅を 指定する |
|
scroll-padding-right | ||
scroll-padding-bottom | ||
scroll-padding-left | ||
scroll-padding |
スクロールコンテナーのパディングの幅を まとめて指定する |
|
scroll-margin-block-start |
書字方向に応じてスナップされる位置の マージンの幅を指定する |
|
scroll-margin-block-end | ||
scroll-margin-inline-start | ||
scroll-margin-inline-end | ||
scroll-margin-block |
書字方向に応じてスナップされる位置の マージンの幅をまとめて指定する |
|
scroll-margin-inline | ||
scroll-padding-block-start |
書字方向に応じてスクロールコンテナーの パディングの幅を指定する |
|
scroll-padding-block-end | ||
scroll-padding-inline-start | ||
scroll-padding-inline-end | ||
scroll-padding-block |
書字方向に応じてスクロールコンテナーの パディングの幅をまとめて指定する |
|
scroll-padding-inline |
段組み
プロパティ | 頻度 | 解説 |
---|---|---|
column-count | 段組みの列数を指定する | |
column-width | 段組みの列幅を指定する | |
columns | 段組みの列幅と列数をまとめて指定する | |
column-gap | 段組みの間隔を指定する | |
column-span | 段組みをまたがる要素を指定する | |
column-fill | 段組みの内容を揃える方法を指定する | |
column-rule-width | 段組みの罫線の幅を指定する | |
column-rule-style | 段組みの罫線のスタイルを指定する | |
column-rule-color | 段組みの罫線の色を指定する | |
column-rule | 段組みの罫線の幅とスタイル、色をまとめて指定する | |
windows |
先頭に表示されるブロックコンテナーの最小行数を 指定する |
|
orphans |
末尾に表示されるブロックコンテナーの最小行数を 指定する |
|
break-before | ブロックの前後での改ページや段区切りを指定する | |
break-after | ||
break-inside | ブロック内での改ページや段区切りを指定する |
フレキシブルボックス
プロパティ | 頻度 | 解説 |
---|---|---|
display | フレキシブルボックスレイアウトを指定する | |
flex-direction | フレックスアイテムの配置方法を指定する | |
flex-wrap | フレックスアイテムの折り返しを指定する | |
flex-flow | フレックスアイテムの配置方法と折り返しを指定する | |
order | フレックスアイテムを配置する順序を指定する | |
flex-grow | フレックスアイテムの幅の伸び率を指定する | |
flex-shrink | フレックスアイテムの幅の縮み率を指定する | |
flex-basis | フレックスアイテムの基本の幅を指定する | |
flex | フレックスアイテムの幅をまとめて指定する | |
justify-content | フレックスアイテムの主軸方向の揃え位置を指定する | |
place-content | ボックス全体の揃え位置をまとめて指定する | |
justify-self | 個別のボックスの横方向の揃え位置を指定する | |
align-items | フレックスアイテムのクロス軸方法の揃え位置を指定する | |
align-self | フレックスアイテムのクロス軸方向の揃え位置を個別に 指定する |
|
place-self | 個別のボックスの揃え位置をまとめて指定する | |
justify-items | すべてのボックスの横方向の揃え位置を指定する | |
place-items | すべてのボックスの揃え位置をまとめて指定する | |
align-content | 複数行のアイテムのクロス軸方向の揃え位置を指定する | |
トランジション
プロパティ | 頻度 | 解説 |
---|---|---|
transition-property | トランジションを適用するプロパティを指定する | |
transition-duration | トランジションが完了するまでの時間を指定する | |
transition-timing-function | トランジションの進行度を指定する | |
transition-delay | トランジションが開始されるまでの時間を 指定する | |
transition | トランジションをまとめて指定する |
トランスフォーム
プロパティ | 頻度 | 解説 |
---|---|---|
transform | 平面空間で要素を変形する | |
transform | 3D空間で要素を変形する | |
transform-origin | 変形させる要素の中心点を指定する | |
perspective | 3D空間で変形する要素の奥行を表す | |
transform-style | 3D空間で変形する要素の子要素の配置を指定する | |
perspective-origin | 3D空間で変形する要素の視点の位置を指定する | |
backface-visibility | 3D空間で変形する要素の背面の表示方法を指定する | |
transform-box | 変形の参照ボックスを指定する |
アニメーション
プロパティ | 頻度 | 解説 |
---|---|---|
@keyframes | アニメーションの動きを指定する | |
animation-name | アニメーションを適用する要素を指定する | |
animation-duration | アニメーションが完了するまでの時間を 指定する |
|
animation-delay | アニメーションが開始するまでの時間指定する | |
animation-play-state | アニメーションの再生、または一時停止を 指定する |
|
animation-timing-function | アニメーションの進行度を指定する | |
animation-fill-mode | アニメーションの再生中・再生後のスタイルを 指定する |
|
animation-iteration-count | アニメーションの実行回数を指定する | |
animation-direction | アニメーションの再生方向を指定する | |
animation | アニメーションのプロパティをまとめて指定する |
コンテンツ
プロパティ | 頻度 | 解説 |
---|---|---|
cursor | マウスポインターの表示方法を指定する | |
touch-action | タッチ画面におけるユーザーの操作を指定する | |
content | :afterと:beforeを対象にコンテンツを挿入する | |
quotes | contentプロパティで挿入する記号を指定する | |
counter-increment | カウンター値を更新する | |
counter-reset | カウンター値をリセットする | |
object-fit | 画像などをボックスにフィットさせる方法を指定する | |
object-position | 画像などをボックスに揃える位置を指定する | |
image-orientaion | 画像の回転角度を指定する | |
ime-mode | テキスト入力欄での入力モードを指定する | |
will-change | ブラウザーに対して変更が予測される要素を指示する | |
pointer-events | ポインターイベントの対象になる場合の条件を指定する | |
all | 要素のすべてのプロパティを初期化する |
グリッドレイアウト
プロパティ | 頻度 | 解説 |
---|---|---|
grid-template-rows | グリッドトラックの行のライン名と高さを指定する | |
grid-template-columns | グリッドトラックの列のライン名と幅を指定する | |
grid-template-areas | グリッドエリアの名前を指定する | |
grid-template | グリッドトラックをまとめて指定する | |
grid-auto-rows | 暗黙的グリッドトラックの行の高さを指定する | |
grid-auto-columns | 暗黙的グリッドトラックの列の幅を指定する | |
grid-auto-flow | グリッドアイテムの自動配置方法を指定する | |
grid |
グリッドトラックとアイテムの配置方法をまとめて 指定する |
|
grid-row-start |
アイテムの配置と大きさを行の始点・終点を基準に 指定する |
|
grid-row-end | ||
grid-row |
アイテムの配置と大きさを行方向を基準に まとめて指定する |
|
grid-column-start | アイテムの配置と大きさを列方向を基準に指定する | |
grid-column-end | ||
grid-column | ||
grid-area | アイテムの配置と大きさをまとめて指定する | |
row-gap | 行の間隔を指定する | |
column-gap | 列の間隔を指定する | |
gap | 行と列の間隔をまとめて指定する |