ショートハンドとは
複数のプロパティをまとめて指定する方法。
-
値の順番に意味があるもの
- padding
- margin
- border
- border-radius
-
部分的に値の順番に意味があるもの
- font
- transition
- animation
-
値の順番に意味が無いもの
- background
- list-style
という感じで整理すると覚えやすい。
paddingとmargin
paddingとmarginは上、右、下、左の4つの値を設定できるが、
以下のようにまとめて指定することができる。
padding: 10px 15px 20px 30px; /* 上 右 下 左 */
padding: 10px 15px 20px; /* 上 左右 下 */
padding: 10px 15px; /* 上下 左右 */
padding: 10px; /* 上下左右 */
marginも同じなので省略。
border
borderにはボーダーの幅、スタイル、色を指定するための
border-width,border-style,border-colorの3つのプロパティがあり、
上、右、下、左のそれぞれに設定できる。
まずは幅、スタイル、色をまとめて指定する方法
幅とスタイル、色をまとめて指定する。それぞれのプロパティの順序は関係ない
border: 1px solid #f00; /* 上下左右 */
border-top: 1px solid #f00; /* 上 */
border-right: 1px solid #f00; /* 右 */
border-bottom: 1px solid #f00; /* 下 */
border-left: 1px solid #f00; /* 左 */
次に幅(スタイルor色)を個別に指定する方法
幅を上下左右まとめて指定する。順番はpadding、marginと同じ。
border-width: 1px 2px 3px 4px; /* 上 右 下 左 */
border-width: 1px 2px 3px; /* 上 左右 下 */
border-width: 1px 2px; /* 上下 左右 */
border-width: 1px; /* 上下左右 */
border-style,border-colorも同じなので省略。
border-radius
ボックスの4つの角それぞれに対して、水平方向と垂直方向の半径を指定する。
水平と垂直は/で区切る。
border-radius: 1em 2em 2em 1em/3em 2em 2em 1em; /* 左上 右上 右下 左下 */
border-radius: 1em 2em 2em/2em 1em 1em; /* 左上 右上左下 右下 */
border-radius: 1em 2em/2em 1em; /* 左上右下 右上左下 */
border-radius: 1em/2em; /* 全部まとめて */
paddingやmarginは上が起点だが、それが左上になっただけ。
水平方向と垂直方向の半径が同じ値なら/は省略可能
border-radius: 1em 2em 2em 1em; /* 左上 右上 右下 左下 */
border-radius: 1em 2em 2em; /* 左上 右上左下 右下 */
border-radius: 1em 2em; /* 左上右下 右上左下 */
border-radius: 50%; /* 全部まとめて */
font
font-style,font-variant,font-weight,font-size,line-height,font-familyをまとめて指定する。
- font-sizeより前に
font-style,font-variant,font-weightを書く（順不同） - line-heightは、font-sizeの直後に
/を付けて指定 - font-familyは最後
/* font-size、line-height、font-familyをを指定 */
font: 1.2em/1.5 sans-serif;
transition
transition-property,transition-duration,transition-timing-function,transition-delayをまとめて指定する。
基本的に順不同だが、transition-durationはtransition-delayより先に書く。
/* property duration timing-function delayを指定 */
transition: width 1s linear 2s;
/* durationのみ指定 */
transition: 1s;
transition-propertyを複数指定する場合は、それぞれの設定をカンマで区切る。
transition: width 1s linear 2s,height 1s ease-in 500ms;
animation
animation-name,animation-duration,animation-timing-function, animation-delay,animation-iteration-count,animation-directionをまとめて指定する。
transitionと同じで基本的に順不同だが、animation-durationはanimation-delayより先に書く。
animation: 'anime1' 1s ease 0s infinite alternate;
複数のアニメーションを指定するには、カンマで区切る。
animation: 'anime1' 1s ease 0s infinite alternate,
'anime2' 2s ease 1s infinite;
background
background-attachment,background-color,background-image,background-position,background-repeat,background-size
をまとめて指定する。プロパティ順序は関係ない。
/* image,color,repeat,attachmentを指定 */
background: url("logo.png") #00A repeat-y fixed;
list-style
list-style-type,list-style-position,list-style-imageをまとめて指定する。
list-style: square inside url(icon.gif);