CSS ・ CSSの記法
ショートハンド
複数のプロパティをまとめて書く（一括指定）
関係の深い複数のプロパティを、1つのプロパティでまとめて指定する書き方です。コードが短く読みやすくなります。
01
サンプルコード
HTML
1<p class="long">個別に指定</p>
2<p class="short">ショートハンドで指定</p>
CSS
1/* 個別に書く */
2.long {
3 margin-top: 10px;
4 margin-right: 10px;
5 margin-bottom: 10px;
6 margin-left: 10px;
7 background: #f6ead8;
8}
9/* まとめて書く（結果は同じ） */
10.short {
11 margin: 10px;
12 background: #f6ead8;
13}
02
実行結果
ブラウザでの表示
03
解説
ショートハンド（一括指定）とは、margin-top・margin-right… のような関係の深いプロパティを、margin 1つでまとめて指定する方法です。上の例の2つの段落は、同じ余白になります。
margin と padding は、値の数によって意味が変わります。1つなら上下左右、2つなら「上下・左右」、3つなら「上・左右・下」、4つなら「上・右・下・左」の時計回りです。
border: 1px solid #333 や font: bold 16px/1.5 sans-serif のように、種類の違う値をスペース区切りで並べるものもあります。
コード量が減って読みやすくなる一方、どの値がどのプロパティに入るか分かりにくくなることもあります。案件によってはショートハンドを使わないルールのこともあるので、コーディング規約を確認します。
04
応用例・注意点
ショートハンドで指定できる主なプロパティ
| プロパティ | 説明 |
|---|---|
margin / padding | 上・右・下・左の順に記述する |
border | 太さ・線の種類・色（border-top なども同じ） |
outline | アウトラインの太さ・種類・色 |
background | 背景色・背景画像・表示位置 / サイズ・繰り返し・スクロール方法 など |
font | スタイル・太さ・サイズ / 行の高さ・書体（サイズと書体は必須） |
list-style | リストマーカーの種類・位置・画像 |
border-image | 枠線に使う画像・切り出し方・太さ・はみ出し・繰り返し |
columns | 段組みの列数・列の幅 |
transition | 変化させるプロパティ・時間・速度の変化・開始の遅れ |
animation | 名前・1回の時間・速度の変化・開始の遅れ・回数・方向 など |
margin・padding の値の数
値の数で、どの辺に入るかが変わります。
CSS
1.a { margin: 10px; } /* 上下左右 */
2.b { margin: 10px 20px; } /* 上下 | 左右 */
3.c { margin: 10px 20px 30px; } /* 上 | 左右 | 下 */
4.d { margin: 10px 20px 30px 40px; } /* 上 | 右 | 下 | 左 */
一部だけ上書きする
ショートハンドで全体を決めてから、変えたい1辺だけ個別のプロパティで上書きします。
CSS
1.card {
2 padding: 24px;
3 padding-bottom: 0;
4}
注意点
- 01ショートハンドで省略した値は、指定しなかったのではなく「初期値」で上書きされます。例えば background: red と書くと、先に指定した background-image も消えます。
- 02個別のプロパティとショートハンドを両方書くときは、ショートハンドを先に書きます。後に書くと個別の指定を上書きしてしまいます。