LoginSignup
47

More than 5 years have passed since last update.

CSSのショートハンド

Last updated at Posted at 2014-07-09

ショートハンドとは

複数のプロパティをまとめて指定する方法。

  • 値の順番に意味があるもの

    • 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-durationtransition-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-durationanimation-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);

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
47