カテゴリー：CSS
-
【CSS】パーセント指定について
01.25
width 親要素の横幅(width)に対する割合を表します。 ボックスモデルのcontentsだけの指定になるので同じ要素に、padding、margin、borderなどを指定してしまうとコンテンツが見た目からはみ出してしまうこ…
-
Styled Componentsとは？ 根強い人気があって今でも人気上位のReact CSSライブラリになります。 メリット sassと同じ記法で記述ができ、hoverなどが使える。（普通のcssがデフォルトで拡張されている。）、な…
-
【CSS】「flexbox」の子要素
10.28
flex 「flex:1」と指定するとその子要素の幅だけがいっぱいに広がります。 [crayon-63e161f5d8f72958331184/] 各子要素に指定 1、2、1とそれぞれ指定します。そうすると子要素の横幅の比が「1…
-
「object-fit」とは？ 置換要素(imageやvideoなど）にコンテナの中身をどのように埋め込むか設定すること。 プロパティ 拡大縮小 トリミング fill 引き伸ばされる × cont…
-
CSS 実装例 [crayon-63e161f5d93c3915666714/] 仕組み ブラウザが解釈して外部ファイルを実際に読み込みます。 ファイル数が増えるので、リクエスト数が増えてしまいます。 SaSSで…
-
【CSS】「アニメーション」について
02.20
仕組み 数秒の間の繰り返しで、始点と終点のCSSを指定します。通常は、transformと組み合わせて使います。 tailwindCSS 厳選して以下の4つが使えます。 spin ローディングのように表示できます。 ping …
-
【CSS】トランスフォームについて
02.20
トランスフォームとは？ 変換や、変形のことです。CSSではかなり細かく設定できますが、TailwindCSSでは厳選されています。 デザインのポイント hoverなどの特定の場合などに設定したりもします。 Origin 原点、どこ…
-
【CSS】「トランジション」について
02.20
トランジションとは？ 「時間的変化」のことです。 例 「ボタンにマウスオーバーした際に色を変えたい」という要件があった場合に、すぐに変化させるのではなく時間をかけて変化させたいケース どうやって変化させるか delay マウスを…
-
モバイルファーストとは？ スマホサイトからコーディングをして、その後にタブレットやPCの幅に合わせていくスマホサイト中心のコーディング思想のことです。 経緯 2018年にGoogleがモバイルファーストインデックスというものを発表しま…
-
単位の種類 px デバイスの1ドットを表す絶対的な値。現在はほぼ全てのブラウザで小数点を表すことができる。ただし、borderなど一部プロパティでは小数点を許容しなかったりする。 html要素のfont-size デフォルトで16p…