CSSプロパティをショートハンドで記述

2020.10.12

CSSプロパティをショートハンドで記述します。プロパティによって記述順や省略可・不可のルールがあります。

■ fontプロパティ
font-style・font-variant・font-weight（順番指定無し）→font-size/line-height→font-familyの順に指定します。line-heightはfont-sizeの後にスラッシュを記述して続けて指定します。font-size・font-familyは省略不可です。他のプロパティは省略できますが、省略した場合は初期値が適用されます。

font-styleはnormal（初期値）以外にitalic（筆記体）とoblique（斜体）が指定できますが、日本語フォントにitalicやobliqueが用意されていることはほとんどありません。font-variantはnormal（初期値）かsmall-caps（小文字を小さめの大文字に変換）のどちらかを指定します。

/* fontプロパティ */
font: normal normal 400 1.6rem/2 "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","メイリオ", sans-serif;

■ backgroundプロパティ

background-color→background-image→background-repeat→background-position/background-size→background-attachmentの順に指定するのが一般的です。指定順は順不同ですがbackground-sizeはbackground-positionの後にスラッシュを記述して続けて指定します。各プロパティは省略できますが、省略した場合は初期値が適用されます。なお、background-positionを省略する場合、background-sizeは個別に指定します。

background-attachmentはscroll（初期値）かfixed（画面スクロール時に背景画像固定）のどちらかを指定します。

【初期値】
background-color: transparent;
background-image: none;
background-repeat: repeat;
background-position: 0% 0%; //X軸方向・Y軸方向
background-size: auto auto; //横幅・高さ
background-attachment: scroll;

/* backgroundプロパティ */
background: #f2f2f2 url("../img/bg_mv.jpg") no-repeat 50% 50%/cover;

/* backgroundプロパティ（background-positionは省略してbackground-sizeを指定したい場合） */
background: #f2f2f2 url("../img/bg_mv.jpg") no-repeat;
background-size: cover;

■ flexプロパティ
flexプロパティはフレックスアイテムに指定します。適用対象がフレックスアイテム以外の場合、flexプロパティの指定は無効となります。
flex-grow→flex-shrink→flex-basisの順に指定します。各プロパティは省略できますが、省略したプロパティに必ずしも初期値が適用される訳ではないため注意が必要です。なお各プロパティを省略した場合、IE11でバグが発生する可能性があるため必ず3つのプロパティ値を指定します。

【初期値】
flex-grow: 0; //flexアイテムの拡大比率
flex-shrink: 1; //flexアイテムの縮小比率
flex-basis: auto; //flexアイテムの横幅

以下はフレックスコンテナの空き領域を埋めるために、flex-grow: 1;を指定してフレックスアイテムを伸長しています。

/* flexプロパティ */
flex: 1 1 auto;

■ transitionプロパティ
transition-property→transition-duration→transition-timing-function→transition-delayの順に指定するのが一般的です。指定順は順不同ですが時間の値は、1つ目がtransition-duration、2つ目がtransition-delayと解釈されます。各プロパティは省略できますが、省略した場合は初期値が適用されます。transition-propertyごとに、カンマで区切って複数の指定ができます。

【初期値】
transition-property: all;
transition-duration: 0;
transition-timing-function: ease;
transition-delay: 0;

/* transitionプロパティ */
transition: all 0.6s linear 0.3s;

/* transitionプロパティ（複数指定） */
transition: opacity 0.6s linear 0.3s,transform 0.6s linear 0.3s;

■ animationプロパティ
animation-name→animation-duration→animation-timing-function→animation-delay→animation-iteration-count→animation-direction→animation-fill-modeの順に指定するのが一般的です。指定順は順不同ですが時間の値は、1つ目がanimation-duration、2つ目がanimation-delayと解釈されます。各プロパティは省略できますが、省略した場合は初期値が適用されます。

animation-iteration-countはアニメーションを繰り返す回数です。infiniteを指定すると無限ループになります。
animation-directionはアニメーションの進行方向です。reverseを指定すると100%から始まり0%で終了します。
animation-fill-modeはアニメーション実行後の適用スタイルを決定します。初期値のnoneの場合は元のスタイルに戻りますが、forwardsを指定するとアニメーションの最後のキーフレームのスタイルを保持します。

【初期値】
animation-name: none;
animation-duration: 0;
animation-timing-function: ease;
animation-delay: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;

/* animationプロパティ */
.loader {
  height: 8px;
  background: linear-gradient(#62aac8 0 0) 0 100% / 0% 8px no-repeat;
  animation: loading-animation 2s linear forwards;
}

@keyframes loading-animation {
  to {
    background-size: 100% 8px;
  }
}