一括指定プロパティ
一括指定プロパティ (shorthand property) は、他のいくつかの CSS プロパティを一度に設定できる CSS プロパティです。一括指定プロパティを用いると、もっと簡単に (そして普通はもっと読みやすく) スタイルシートが書け、時間や労力を節約することができます。
CSS 仕様書では、同じ主題に作用する共通のプロパティの定義をグループ化するために、一括指定プロパティを定義しています。例えば、 background
プロパティは background-color
、 background-image
、 background-repeat
、background-position
の値を定義することができる一括指定プロパティです。同様に、フォントに関連したプロパティは一括指定の font
を使用して定義することができ、ボックスの周囲のマージンは一括指定の margin
を使用して定義することができます。
注意するべき場合
一括指定プロパティを使用する際には、いくつかの留意すべきエッジケースがあります。
プロパティの省略
指定されなかった値は初期値に設定されます。つまり、以前設定した値を上書きすることになります。例を見てください。
p {
background-color: red;
background: url(images/bg.gif) no-repeat left top;
}
この場合、背景の色は red
ではなく、 background-color
の既定値である transparent
に設定されます。
継承 (inherit) は個別プロパティのみで行うことができます。一括指定では欠けている値が初期値に置き換えられるため、省略することで個別のプロパティを継承させることはできません。 inherit
キーワードをプロパティに適用することはできますが、全体に対して適用できるのみで、 1 つ 1 つに対するキーワードではありません。つまり、いくつか特定の値のみを継承させたい場合は、個別指定 (longhand) プロパティで inherit
キーワードを指定するしかありません。
プロパティの順序
一括指定プロパティは、置き換えるプロパティの指定順序をなるべく強制しないようにしています。ただしこれは、順序が重要ではないとき、プロパティがそれぞれ異なる型の値を使用する場合はうまく機能しますが、いくつかのプロパティが同じ値を持つことができるときは簡単ではありません。このような場合の扱い方は、いくつかに分類されます。
ここで重要なのは 2 つのケースです。
border-style
,margin
,padding
など、ボックスの辺に関連したプロパティ。border-radius
のように、ボックスの角に関連するプロパティ
ボックスの辺
ボックスの境界に関するプロパティを扱う一括指定 (border-style
, margin
, padding
) は、それぞれの辺を表すために、一貫して 1 ~ 4 つの値の構文を使用します。
-
値 1 つの構文:
border-width: 1em
— 1 つの値ですべての辺を表します。 -
値 2 つの構文:
border-width: 1em 2em
— 最初の値は垂直、すなわち上下の辺を、次の値は水平、すなわち左右の辺を表します。 -
値 3 つの構文:
border-width: 1em 2em 3em
— 最初の値は上辺、 2 番目の値は水平、すなわち左右の辺、 3 番目の値は下辺を表します。 -
値 4 つの構文:
border-width: 1em 2em 3em 4em
— 4 つの値がそれぞれ上、右、下、左の辺を表し、これは上を起点に時計回りの順です。Top-Right-Bottom-Left の頭文字は、 trouble の子音 TRBL の順と一致します。また、時計の上で針が回転する順番として覚えることもできます。
1em
は 12 時の位置で始まり、 3 時の位置で2em
、それから 6 時の位置で3em
、そして 9 時の位置で4em
です。
ボックスの角
同様に、ボックスの角に関する一括指定プロパティ (border-radius
など) は、それぞれの角を表すために一貫して 1 ~ 4 つの値を使用します。
-
値 1 つの構文:
border-radius: 1em
— 1 つの値がすべての角を表現します。 -
値 2 つの構文:
border-radius: 1em 2em
— 最初の値は左上と右下の角、 2 番目の値は右上と左下の角を表します。 -
値 3 つの構文:
border-radius: 1em 2em 3em
— 最初の値は左上、 2 番目の値は右上と左下、 3 番目の値は右下の角をそれぞれ表します。 -
値 4 つの構文:
border-radius: 1em 2em 3em 4em
— 4 つの値がそれぞれ左上、右上、右下、左下を表し、これは左上を起点にした時計回りの順です。
background プロパティ
以下のようなプロパティを持つ背景を考えてみましょう。
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;
この 4 つの宣言は、たった 1 つに短縮することができます。
background: #000 url(images/bg.gif) no-repeat left top;
(一括指定の形式は、実際は上記の個別指定に加えて、 background-attachment: scroll
や、 CSS3 ではいくつかの追加プロパティと等価になります。)
CSS3 のプロパティを含む詳しい情報は、 background
をご覧ください。
font プロパティ
以下のような宣言を考えてみましょう。
font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;
この 5 つの文は、以下のように短くまとめることができます。
font:
italic bold 0.8em/1.2 Arial,
sans-serif;
この一括指定宣言は、実際には上記の個別指定宣言に加えて、 font-variant: normal
、font-size-adjust: none
、font-stretch: normal
と等価になります。
border プロパティ
境界の幅、色、スタイルについては 1 つの宣言にまとめることができます。例えば、以下の CSS を考えてみてください。
border-width: 1px;
border-style: solid;
border-color: #000;
これは、以下のように簡略化できます。
border: 1px solid #000;
margin プロパティと padding プロパティ
margin
と padding
の一括指定も同様に動作します。 margin
プロパティでは、1 つ、2 つ、3 つ、または 4 つの値を使用して一括で値を指定することができます。以下の CSS 宣言はを考えてみてください。
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
これらは以下の値 4 つの一括指定を使用した宣言と同じです。なお、値は上から始まって時計回りに、上、右、下、左の順になります (TRBL、 "trouble" の子音)。
margin: 10px 5px 10px 5px;
マージンの値 1 つ、 2 つ、 3 つ、 4 つの一括指定宣言は次の通りです。
- 値が 1 つ指定された場合、全 4 辺に同じマージンが適用される。
- 値が 2 つ指定された場合、 1 つ目のマージンは上下、 2 つ目は左右の辺に適用される。
- 値が 3 つ指定された場合、 1 つ目のマージンは上、 2 つ目は左右、 3 つ目は下の辺に適用される。
- 値が 4 つ指定された場合、マージンはそれぞれ上、右、下、左の順 (時計回り) に適用される。
位置のプロパティ
位置においては、上、右、下、左の一括指定を 1 つの宣言に簡略化することができます。例えば、以下の CSS を考えてみましょう。
top: 0;
right: 20px;
bottom: 0;
left: 20px;
これは、次のように簡略化できます。
inset: 0 20px 0 20px;
マージンやパディングと同様、 inset
の値は時計回りに上、右、下、左 (TRBL) の順に並べられます。
全体一括指定プロパティ
CSS は全体の一括指定プロパティとして all
を提供しており、値を文書中のすべてのプロパティに適用させます。これは、プロパティの継承モデルを変更するためのものです。
CSS の継承がどのように動作するかについての詳細については、競合の処理または CSS カスケード入門をご覧ください。
一括指定プロパティ
all
animation
animation-range
background
border
border-block
border-block-end
border-block-start
border-bottom
border-color
border-image
border-inline
border-inline-end
border-inline-start
border-left
border-radius
border-right
border-style
border-top
border-width
column-rule
columns
contain-intrinsic-size
container
flex
flex-flow
font
font-synthesis
font-variant
gap
grid
grid-area
grid-column
grid-row
grid-template
inset
inset-block
inset-inline
list-style
margin
margin-block
margin-inline
mask
mask-border
offset
outline
overflow
overscroll-behavior
padding
padding-block
padding-inline
place-content
place-items
place-self
position-try
scroll-margin
scroll-margin-block
scroll-margin-inline
scroll-padding
scroll-padding-block
scroll-padding-inline
scroll-timeline
text-decoration
text-emphasis
text-wrap
transition
view-timeline
-webkit-text-stroke
-webkit-border-before
-webkit-mask-box-image