CSSショートハンド（省略記法）プロパティの使い方 ― スタイルシートをコンパクトに書くテクニック

CSSショートハンドプロパティ（省略記法）を使えば、スタイルシートのコード量を大幅に減らし、よりスッキリとした記述が可能になります。この記事では、その基本的な使い方と実例をわかりやすく解説します。

CSSショートハンドとは？

CSSのショートハンドプロパティとは、複数のスタイル宣言を1行にまとめて書ける便利な記法のことです。「少ないコードで、多くのことを実現できる」というのが最大のメリットです。

たとえば、h1要素にGeorgiaフォントファミリー、フォントサイズ42px、行の高さ1.25を指定したいとしましょう。

まずは、通常のCSSの書き方を見てみます。

h1 {
    font-family: "Georgia", "serif";
    font-size: 42px;
    line-height: 1.25;
}

次に、fontショートハンドを使った場合の書き方と比較してみましょう。

h1 {
    font: 42px/1.25 "Georgia", "serif";
}

3行がたった1行に！ これがショートハンドの威力です。

ショートハンドプロパティは、複数のスタイル宣言を1行にまとめることで、コード全体の分量を抑えることができます。

可読性について

ショートハンドで書かれたコードは、通常の書き方に比べると一見読みにくく感じるかもしれません。通常の書き方の方が意図が明確に表現できるからです。しかし、それは単に「慣れていない」だけ。使い始めれば、すぐに自然と身につくようになります。

paddingショートハンドの実例

もうひとつ、別のショートハンドの例を見て理解を深めましょう。

ここに、上下のパディングが12px、左右のパディングが20pxのボタンがあります。

通常の書き方では、以下のように4つのpaddingプロパティを使います。

button {
    padding-top: 12px;
    padding-right: 20px;
    padding-bottom: 12px;
    padding-left: 20px;
}

次に、ショートハンドのpaddingプロパティを使って、コードをすっきりさせてみます。

button {
    padding: 12px 20px; /* 上下・左右 */
}

4行が1行になりました！

上記のpaddingショートハンドは、値を2つ使っていることから「2値ショートハンド」と呼ばれます。

• 1つ目の値12pxは、padding-topとpadding-bottom（上下）に対応します。
• 2つ目の値20pxは、padding-leftとpadding-right（左右）に対応します。

なお、paddingやmarginのショートハンドには、値の数によって意味が変わるルールがあります。

• 値が1つ： 全4辺に同じ値が適用される
• 値が2つ： 1つ目が上下、2つ目が左右に適用される
• 値が3つ： 1つ目が上、2つ目が左右、3つ目が下に適用される
• 値が4つ： 上・右・下・左の順（時計回り）に適用される

CSSショートハンドプロパティの一覧

CSSには以下のようなショートハンドプロパティが存在します：

all、animation、background、border、border-block-end、border-block-start、border-bottom、border-color、border-image、border-inline-end、border-inline-start、border-left、border-radius、border-right、border-style、border-top、border-width、column-rule、columns、flex、flex-flow、font、gap、grid、grid-area、grid-column、grid-row、grid-template、list-style、margin、mask、offset、outline、overflow、padding、place-content、place-items、place-self、scroll-margin、scroll-padding、text-decoration、text-emphasis、transition

詳細については、Mozilla（MDN Web Docs）のCSSショートハンド公式ドキュメントを参照してください。

覚えておくべきショートハンドはどれ？

すべてのショートハンドプロパティを暗記する必要はありません。実際に使う機会がほとんどないものも多いからです。

ただし、このチュートリアルで紹介したfontとpaddingは、最も使用頻度の高いショートハンドなので、確実にマスターしておきましょう。

さらに、以下のショートハンドプロパティも頻繁に使うことになるので、合わせて学んでおくことをおすすめします。

• margin（マージンの一括指定）
• background（背景色・画像・位置などの一括指定）
• border（境界線の太さ・種類・色の一括指定）
• animation（アニメーション設定の一括指定）
• transition（トランジション効果の一括指定）
• border-radius（角丸の半径の一括指定）

ショートハンドを活用すれば、CSSのコードが短くなり、保守性も向上します。まずはfontやpadding、marginといった頻出のものから、日々のコーディングに取り入れてみてください。