Dev log - 7, CSS #6

2795 ワード
テキストリンク
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
    Section 5
    [Fluth]TVINGクローン計画1.ホーム上部バー