CSSショートハンド

ショートハンド

ショートハンドは特定条件に沿って省略したCSSの書き方です。
無駄をなくす事でファイルサイズの縮小化が可能になり、全体的にもきれいにまとまるので見やすくなります。
ただし、何でもかんでもまとめると編集しづらくなるので、自分に合った形で利用してください。
CSSのちょっと高度な書き方
ショートハンドプロパティでCSSを効率化する

要素のグループ化

要素のグループ化

CSSでは指定するスタイルが同一であれば、複数の要素をグループ化する事ができます。
グループ化する場合は要素と要素の間に「,」を入れるだけです。
また、共通のスタイルだけを抜き出して部分的にまとめる事もできますが、a要素は順序が決まっているので注意が必要です。

全てをグループ化

全ての要素をグループ化する方法です。

1. 全ての値が同じ場合：h1 {color:#000000;} h2 {color:#000000;} h3 {color:#000000;}
2. グループ化：h1,h2,h3 {color:#000000;}

一部だけグループ化

一部の要素だけをグループ化する方法です。

1. 一部だけ同じ場合：h1 {color:#000000; padding:10px;} h2 {color:#000000; padding:20px;}
2. 一部だけグループ化：h1,h2 {color:#000000;} h1 {padding:10px;} h2 {padding:20px;}

値や単位の省略

値の省略

CSSではプロパティの値が同じなら、一定の法則に従ってまとめる事ができます。
また、borderの場合は同じ値のものだけまとめて、違う値のものは別に記述する事ができます。
他にも6ケタのカラーコードは3ケタに省略する事ができます。

ショートハンドが可能なプロパティ：margin、padding、border、background、font、colorなど

1. 通常の書き方：padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:20px;
2. 一行にまとめた場合：padding:10px 20px 10px 20px;（上、右、下、左）
3. 上下・左右が同じ数値の場合：padding:10px 20px 10px 20px;→padding:10px 20px;（上下、左右）
4. 左右だけが同じ数値の場合：padding:10px 20px 30px 20px;→padding:10px 20px 30px;（上、左右、下）
5. 全て同じ数値の場合：padding:10px 10px 10px 10px;→padding:10px;

カラーコードの省略

カラーコードも隣接する値が同じなら省略する事ができます。

#ff4400→#f40（1と2、3と4、5と6）

単位の省略

値が0pxなら単位を省略する事ができます。

1. 省略例1：0px→0
2. 省略例2：20px 0px 30px 0px→20px 0 30px 0

0の省略

小数点を挟んだ0の値も省略する事ができます。

1. 省略例1：0.1em→.1em
2. 省略例2：10.0em→10em

その他のCSSショートハンド

空白スペースの削除

空白スペース、改行、インデントなども不要なら削除する事ができますが、必要な空白スペースもあるので注意が必要です。
また、改行やインデントを削除すると、編集がやりづらくなるので利便性は低下します。

空白スペース、改行、インデント→削除