Dev log - 7, CSS #6

CSS関連

フォントサイズが12 px以下になると、フォントが破損する可能性があります

display: flex属性

justify-content: center属性設定時、中央

align-items: center属性を設定する場合は、縦方向中央

相対単位

em:親ラベルに適用されるfont-size単位でサイズを決める(デフォルトサイズは16 px)

rem:htmlタグに適用されるfont-size単位でサイズを決める(最も一般的)

vh:スクリーンサイズ(Viewport height)の1%を占める

vw:スクリーンサイズ(Viewport width)の1%を占める

vmin:画面の横または縦のサイズが小さい(占めるViewport smaller dimensionの1%)

vmax:画面の横または縦のサイズが大きい(占めるViewport larger dimensionの1%)

毎回相対サイズが適用されるわけではなく、より多くの場合は固定サイズが使用される

media query

異なるデバイス上のhtmlドキュメントに適切なフォーマットのルールを持たせる

link方式、@import方式、@media方式(推奨)

以下の形式、screenまたはall属性は、印刷を含めると後者

@media screen and ( min-width: 751px ) and ( max-width: 992px ) {
  body { background: darkorange; }
  #wrap:before {
    content: 'orange';
    font-size: 2em;
    color: white;
  }
}

@media screen and ( min-width: 501px ) and ( max-width: 750px ) {
  body { background: gold; }
  #wrap:before {
    content: 'yellow';
    font-size: 1.75em;
    color: white;
  }
}

and ( orientation: landscape )属性を設定する場合、横画面を設定する場合の属性、and ( orientation: portrait )属性設定時、垂直画面時の属性

transition
:アトリビュート変更時間の設定(アニメーションアトリビュートは個別に設定する必要があります)

transition-property:transition該当する属性

transition-duration:transitionの合計時間

transition-delay:transition開始までの最小保持時間

transition-timing-function:transitionの進捗
(属性参考サイト:https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function)

transition: (property), (duration), (delay), (timing-function)手順

transform
:要素の移動、スケール、回転などの属性を設定します.

translate(x,y):x軸、y軸で移動

scale(x,y):X軸、Y軸で拡大・縮小

skew(x,y):X軸、Y軸ねじれ

rotate(각도):角度回転

Do it! Web規格における定式化356 p~376 p,389 p~408 p