CSSプロパティのショートハンド指定でコードをスッキリさせる
CSSCSSのプロパティにはショートハンドと呼ばれる、関連するプロパティをまとめて指定できる方法があります。種類によって記述方法が異なったり順序が決まっていたりするので忘備録としてまとめてみました。
記述する順序が決まっていないプロパティ
backgroundプロパティ
背景色、背景画像、背景画像サイズなど背景に関するプロパティを一括で指定します。
//個別指定
div {
background-image: url("../bg-image.png") ;
background-color: #ffff00 ;
background-repeat: no-repeat ;
background-position: top center ;
background-attachment: fixed ;
background-size: cover ;
}
//ショートハンド指定
div {
background: url("../bg-image.png") #ffff00 no-repeat top center/cover fixed ;
}
list-styleプロパティ
リストのマーカーや位置などをまとめて指定できます。
//個別指定
ul {
list-style-type: disc ;
list-style-position: outside ;
list-style-image: url("../list-icon.png") ;
}
//ショートハンド指定
ul {
list-style: disc outside url("../list-icon.png") ;
}
animationプロパティ
アニメーションに関する項目をまとめて指定します。
//個別指定
div {
animation-name: sample-animation1 ;
animation-duration: 12s ;
animation-timing-function: ease ;
animation-delay: 5s ;
animation-iteration-count: infinite ;
animation-direction: alternate ;
}
//ショートハンド指定
div {
animation: sample-animation1 12s ease 5s infinite alternate ;
}
borderプロパティ（スタイル）
枠線の色、太さや形をまとめて指定します。
//個別指定
div {
border-width: 2px ;
border-style: solid ;
border-color: #ff0066 ;
}
//ショートハンド指定
div {
border: 2px solid #ff0066 ;
}
記述する順序が決まっているプロパティ
marginプロパティ
オブジェクトの外余白を周囲すべて指定します。
//個別指定
div {
margin-top: 15px ;
margin-right: 20px ;
margin-bottom: 35px ;
margin-left: 10px ;
}
//ショートハンド指定
div {
margin: 15px 20px 35px 10px ;
}
ショートハンド設定では、（margin）top → （margin）right → （margin）bottom → （margin）leftの順に設定します。上から時計回りに指定することになります。
paddingプロパティ
オブジェクトの内余白を周囲すべて指定します。
//個別指定
div {
padding-top: 15px ;
padding-right: 20px ;
padding-bottom: 35px ;
padding-left: 10px ;
}
//ショートハンド指定
div {
padding: 15px 20px 35px 10px ;
}
ショートハンド設定では、（padding）top → （padding）right → （padding）bottom → （padding）leftの順に設定します。上から時計回りに指定することになります。
※marginとpaddingについては共通の値がある場合は次のように省略できます。
margin: 10px 30px 15px ; //top left&right bottom margin: 10px 30px ; //top&bottom left&right margin: 10px ; //all
transitionプロパティ
効果のタイミングや時間的変化などの指定を行います。
//個別指定
div {
transition-property: all ;
transition-duration: 0.3s ;
transition-timing-function: ease-in-out ;
transition-delay: 5s ;
}
//ショートハンド指定
div {
transition: all 0.3s ease-in-out 5s ;
}
ショートハンド設定では、transition-property → transition-duration → transition-timing-function → transition-delayの順に設定します。
fontプロパティ
フォントの太さや大きさ、書体などをまとめて指定します。
//個別指定
div {
font-style: italic ;
font-variant: normal ;
font-weight: 300 ;
font-size: 2.4em ;
line-height: 1.6 ;
font-family: sans-serif ;
}
//ショートハンド指定
div {
font: italic normal 300 2.4em/1.6 sans-serif ;
}
ショートハンド設定では、font-style・font-variant・font-weight（順番指定無し） → font-size / line-height → font-familyの順に設定します。
borderプロパティ（位置）
上下左右の枠線をまとめて指定します。スタイルとは異なり指定する順番が決まっています。
//個別指定
div {
border-top-width: 1px ;
border-right-width: 2px ;
border-bottom-width: 3px ;
border-left-width: 4px ;
}
//ショートハンド指定
div {
border-width: 1px 2px 3px 4px ;
}
ショートハンド設定では、（border）top → （border）right → （border）bottom → （border）leftの順に設定します。上から時計回りに指定することになります。
※共通の値がある場合は次のように省略できます。
border-width: 1px 2px 3px ; //top left&right bottom border-width: 1px 2px ; //top&bottom left&right border-width: 1px ; //all
border-radiusプロパティ
角丸の大きさをまとめて指定します。
//個別指定
div {
// 水平方向の角丸半径 / 垂直方向の角丸半径
border-radius: 6px 8px 8px 6px/6px 8px 8px 6px ;
}
//ショートハンド指定
div {
border-radius: 6px 8px 8px 6px ;
}
ショートハンド設定では水平方向と垂直方向の角丸半径が同じ場合に省略することができます。
（指定位置については、左上 → 右上 → 右下 → 左下と左上から時計回りに指定します）
※共通の値がある場合は次のように省略できます。
border-radius: 6px 8px 10px ; //左上 右上&左下 右下 border-radius: 6px 8px ; //左上&右下 右上&左下 border-radius: 10px ; //全方向
-
-
この記事を書いた人オガワ シンヤ
DesignSupply.代表 ／ ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中！制作中はチョコレートが欠かせない三十路Webクリエイター。
制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら
デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。
ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。
コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。
