ショートハンド・プロパティ
アセンブラの魔女 ⧫ CSS ⧫ ショートハンド・プロパティ
アセンブラの魔女 ⧫ CSS ⧫ ショートハンド・プロパティ

 CSSで扱うプロパティの中には「ショートハンド・プロパティ」(horthand properties)(短縮プロパティ)と呼ばれるプロパティを持つものもあります。ショートハンド・プロパティを使えば、関連する複数のプロパティを同時に設定することができます。

 例えば、ショートハンド・プロパティのfontを使えば、関連する以下のプロパティを同時に設定することができます。

  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-height
  • font-family

 通常の書き方で書かれた次のスタイルは、

h1 { 
  font-weight: bold; 
  font-size: 12pt;
  line-height: 14pt; 
  font-family: Helvetica; 
  font-variant: normal;
  font-style: normal;
}

 ショートハンド・プロパティを使って、以下のように簡潔に書くことができます。

h1 { font: bold 12pt/14pt Helvetica }

 ショートハンド・プロパティでは、必ずしも関連するすべての値を指定する必要はありません。値を省略すると、「欠落」プロパティには初期値が割り当てられます。

 上記の例では、省略されたfont-variant、font-styleには、初期値が適用されます。

▼ Property
記事情報
datePublished2011-01-01
dateModified2018-06-22
authorアセンブラの魔女
headlineショートハンド・プロパティに関する記事です
keywordsCSS
keywordsCascading Style Sheets
keywordsショートハンド・プロパティ
keywordsshorthand properties
publisher name= wiredFish, logo.name= wiredFish, logo.url= https://books-nekoya.jp/Programming/chigu-hagu-title-01.png size= 208 pixel x 50 pixel
image.url url= https://books-nekoya.jp/Programming/chigu-hagu-title-01.png , size= 208 pixel x 50 pixel