メインコンテンツまでスキップ

CSS

animation, transition, transform​

下記がよくまとまっているので参照すること

フォントサイズ​

絶対値​

  • px 10px なら絶対に 10px

相対値​

親要素のサイズによって可変

  • em 親要素のfont-sizeをベースに算出
  • % 親要素のfont-sizeをベースに算出
  • rem ルート要素(HTML 要素)のfont-sizeをベースに算出。ブラウザ規定は 16px。

padding での％使用​

padding で%指定を使うと、width をベースに算定される。 これは、「横幅*アスペクト比」で高さを指定したい時に便利。（例えば、4:3 にしたいならpadding-top: 75%など）

BEM​

BEM ＝ Block, Element, Modefier

公式

block-longname
block-longname--modefier
block-longname--modkey-modvalue
block-longname__element-longname
block-longname__element-longname--modefier
block-longname__element-longname--modkey-modvalue

変化型、これがいいかも

blockLongname-modefier
blockLongname-modkeyModvalue
blockLongname_elementLongname
blockLongname_elementLongname-modefier
blockLongname_elementLongname-modkeyModvalue

z-index​

  1. HTML において出現順が後のものほど上に重なる
  2. position:static以外のものは、position:staticのものより上に重なる
  3. transform や opacity を使うと z-index:0 が指定されたのと同じように振る舞うので注意する
  4. 親要素がposition:static以外の場合、子要素はその親の積み重ねコンテキストに限定される。回避するには、親の外側に移動するか、親のposition指定を削除する。

参考

レスポンシブ​

レスポンシブにするには​

  • 親が幅高をもつ状態であること
  • 子が自由伸縮する場合
    • 子に幅高 100%を指定する
  • 子が自由伸縮しない場合
    • コンテナでラップして幅高に 100%を設定した上で、本体は absolute で表示するなどの工夫が必要
    • 自由伸縮しないとは
      • 画像や単なるテキストではないもの
      • props で受け取った幅高を固定的に設定しているコンポーネントなど

制約​

  • アスペクト比率が固定なら、幅と高さのどちらか一方しかレスポンシブにできない

その他 Tips​

  • margin-left: autoで右寄せにできる
  • pointer-events: noneでポインタの形が変わるのを無効にできる
  • clip-pathで表示内容にマスクをかけることができる(サポートしているブラウザは少ないので注意)
  • transitionの第 4 引数で開始までの遅延時間を指定できる