CSSショートハンドプロパティ早見表

CSSのショートハンドは複数のロングハンドプロパティを一度に設定するものであり、省略したロングハンドはショートハンドのデフォルト値にリセットされます。このリセットはカスケード内で以前に設定した値を無音で上書きします。

background-size: coverを設定したにもかかわらず、後から記述したbackground:によって消えてしまった経験があれば、まさにこの落とし穴にはまっています。エラーは一切発生しないため、原因の特定に多大な時間を要します。ショートハンドにまつわるバグのほとんどは、構文ではなくこの挙動に起因しています。本記事では、日常的に使用する6つのショートハンド（margin、padding、border、font、background、flex）を取り上げ、それぞれの値の順序、必須の値、そして無音の失敗を引き起こすリセットの注意点を解説します。

CSSショートハンドが他のプロパティをリセットする理由

CSSのショートハンドはそれぞれ固定されたロングハンドプロパティの集合に展開されます。指定しなかった値はショートハンドが定義するデフォルト値に設定され、それ以前にそのロングハンドに設定した値を上書きします。background: redと記述すると、単に色を設定するだけでなく、background-image、background-position、background-sizeをはじめとするすべてのbackgroundロングハンドを初期値にリセットします。

これが、ショートハンドにまつわるバグが構文エラーとして現れない最大の理由です。実際には、後から記述したショートハンドが、別の場所で正しく設定されたロングハンドを静かに上書きしているのです。

/* バグ: ショートハンドがbackground-sizeをautoにリセットしてしまう */
.hero {
  background-size: cover;
  background: url('hero.jpg') no-repeat center;
}

/* 修正: sizeをショートハンドの中に含める */
.hero {
  background: url('hero.jpg') no-repeat center / cover;
}

この問題は宣言自体では気づきにくく、レンダリングされたページを確認して初めて発覚することがほとんどです。本番環境のセッションを再生すると実際の算出スタイルを再現でき、異なるアセットを使ったローカル確認では見逃しやすいbackground-sizeの崩壊を発見できます。

marginとpadding：時計回りルール

marginとpaddingは1〜4つの値を上から時計回りに指定します：top、right、bottom、left（TRBLは”trouble”の子音字）。値の数によって適用される辺が変わります。

.button  { padding: 12px 24px; }   /* 垂直12px、水平24px */
.section { margin: 40px auto; }     /* 垂直40px、水平auto */

margin: 0 autoは余白のインラインスペースを均等に分割することでブロックレベル要素を水平方向に中央揃えします。インライン要素には効果がなく、flexやgridのアイテムはそれぞれの配置プロパティで中央揃えを行います。

border：styleは必須

borderショートハンドにおいて、width、style、colorの値は型が異なるため順序に依存しません。2px solid redとsolid red 2pxは同等です。ただしborder-styleは必須です。初期値がnoneであるため、スタイルを省略すると幅や色に関係なく何も描画されません。

.card { border: 1px solid #e0e0e0; }  /* 描画される */
.card { border: 1px #e0e0e0; }        /* styleなし → 何も描画されない */

widthとcolorは省略可能で、それぞれデフォルト値（mediumとcurrentcolor）にフォールバックします。習慣としてstyleを最初に記述するようにすれば、このクラスのバグを防げます。

font：sizeとfamilyは必須

fontショートハンドはfont-style、font-variant、font-weight、font-size、line-height、font-familyをまとめて指定するものであり、font-sizeとfont-familyの両方が必須です。どちらかを省略すると宣言全体が無視されます。記述順序は厳格で、style、variant、weightはfont-sizeより前に記述し、line-heightはfont-sizeの直後にスラッシュで区切って記述する必要があります。

/* 完全な記述: style variant weight size/line-height family */
.text { font: italic small-caps bold 16px/1.5 'Segoe UI', sans-serif; }

/* 最小限の有効な宣言 */
.text { font: 16px Arial, sans-serif; }

/* 無効 — familyがsizeより前にある、宣言全体が無視される */
.text { font: Arial 16px; }

fontは省略したすべてのコンポーネントを初期値にリセットするため、別の場所で設定したfont-weightの後にfontを適用すると、そのweightがnormalに戻ってしまいます。

background：position/sizeのスラッシュ記法

backgroundはショートハンドの中で最もエラーが発生しやすいプロパティです。多くの開発者がつまずく唯一のルールは、background-sizeはbackground-positionの直後にスラッシュで区切って記述する場合にのみ有効（center / cover）であり、スラッシュの前にpositionがない状態でsizeを指定すると無効となり値が無視されるという点です。background-sizeを別の宣言で指定する必要があるとする古い解説記事もありますが、ショートハンドの中に含めることができます。

値の標準的な記述順序は：image、position / size、repeat、attachment、origin、clip、colorです。

/* 正しい: position / size */
.panel { background: #000 url('bg.jpg') center / cover no-repeat fixed; }

/* 誤り: スラッシュの前にpositionがない → 無効 */
.panel { background: url('bg.jpg') / cover; }

/* 誤り: スラッシュがないため、'cover'が2つ目のposition値として解釈される */
.panel { background: url('bg.jpg') center cover; }

単一レイヤーの構文ではcolorをどこにでも配置できますが、MDNの記述順序に合わせて末尾に置くと一貫性が保たれます。

flex：flex: 1は1 1 autoではない

ブラウザはflex: 1をflex: 1 1 0%として計算します（1 1 autoではありません）。そのため、スペースを分配する際にアイテム自身の幅やコンテンツサイズは無視されます。単一の数値が指定された場合、ブラウザはflex-basisを0%として扱います（仕様書のテキストでは0と記載されています）。DevToolsのComputedタブを開いてflex-basisを確認することで検証できます。

.grow  { flex: 1; }          /* 1 1 0%  — 伸長する、コンテンツサイズを無視 */
.auto  { flex: auto; }       /* 1 1 auto — コンテンツサイズを基準に伸長 */
.fixed { flex: 0 0 200px; }  /* 固定200pxのトラック、伸縮なし */
.none  { flex: none; }       /* 0 0 auto — コンテンツに合わせてサイズ固定 */

コンテンツサイズを基準にアイテムを配置したい場合はflex: autoを、固定トラックにはflex: 0 0 <size>を使用してください。

CSSショートハンドでよくあるミスとは？

ショートハンドのバグのほとんどは、以下の4つのパターンに集約されます。いずれも上述のルールを直接の原因としています。

1. 後から記述したショートハンドがロングハンドをリセットする。 テーマの上書きでbackground:を記述すると、以前のbackground-size: coverが消える。値をショートハンドの中に含めるか、ロングハンドをショートハンドの後に記述してください。
2. font-familyまたはfont-sizeの省略。 font宣言全体が破棄され、部分的な適用も行われません。
3. border-styleの省略。 スタイルがなければデフォルトのnoneが適用され、何も描画されません。
4. positionとスラッシュなしのbackground-size。 center / coverと記述し、cover単独での記述は避けてください。

list-style、outline、place-itemsなどの使用頻度の低いショートハンドも同じリセットルールに従いますが、使用頻度はずっと低いです。日常的な6つのショートハンドが身についてから、同じ要領で使用するとよいでしょう。

ほぼすべてのミスを防ぐ習慣が一つあります。それは、ショートハンドをプロパティグループの追加的な調整としてではなく、完全なリセットとして捉えることです。別の場所で設定したスタイルが消えた場合は、Computedパネルを開いて後から記述したショートハンドが上書きしていないか確認してください。原因はほぼ必ずそこにあります。

よくある質問

CSSのショートハンドとロングハンドはどう使い分けるべきですか？

プロパティグループのほとんどまたはすべてを一度に設定したく、省略した値がデフォルトにリセットされても問題ない場合はショートハンドを使用してください。既存のbackground-imageを維持しながらbackground-sizeだけを変更するなど、他のプロパティに影響を与えずに単一のプロパティを変更したい場合はロングハンドを使用してください。ショートハンドは省略したロングハンドを常にリセットするため、ピンポイントの調整にはロングハンドを使うことでその副作用を回避できます。

backgroundショートハンドを追加するとbackground-size: coverが効かなくなるのはなぜですか？

backgroundショートハンドは指定しなかったすべてのbackgroundロングハンドを初期値にリセットし、background-sizeはautoにリセットされるためです。以前のルールでbackground-size: coverが設定されていても、後から記述したbackground:宣言でsizeを省略すると、そのショートハンドが上書きします。修正するには、positionの後にcenter / coverとしてsizeをショートハンドの中に記述するか、ショートハンドの後にbackground-sizeロングハンドを記述してください。

flex: 1とflex: autoの違いは何ですか？

ブラウザはflex: 1を1 1 0%として計算し、flex-basisが0%となるため、アイテムは自身のコンテンツサイズを無視して利用可能なスペースのみを基準に伸長します。flex: autoは1 1 autoに展開され、アイテムはコンテンツサイズを起点として伸長します。コンテンツに関係なく均等なカラムにしたい場合はflex: 1を、コンテンツ量に応じてアイテムをサイズ調整したい場合はflex: autoを使用してください。

borderショートハンドでは値の順序が重要ですか？

いいえ、borderショートハンドのwidth、style、colorの値は型が異なるため順序に依存しません。2px solid redとsolid red 2pxは同等です。唯一の必須要件はborder-styleが存在することです。初期値がnoneであるため、スタイルキーワードがなければwidthやcolorを指定していても何も描画されません。