カテゴリー：CSS
-
「object-fit」とは？ 置換要素(imageやvideoなど）にコンテナの中身をどのように埋め込むか設定すること。 プロパティ 拡大縮小 トリミング fill 引き伸ばされる × cont…
-
CSS 実装例 [crayon-633f1b90cd0fc350693510/] 仕組み ブラウザが解釈して外部ファイルを実際に読み込みます。 ファイル数が増えるので、リクエスト数が増えてしまいます。 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…
-
【CSS】「Grid」レイアウトについて
02.11
Gridとは？ flexboxの後発でより自由にレイアウトを組み立てることができます。新しいだけあってこれまでのCSSを革新するような内容になっている。 メリット レイアウト用に不要なdivタグを追加しなくてもよくなる。（fl…
-
JITとは？ tailwind.config.jsの中のcontentに指定したものに関しては、実際に使われたCSSだけが使われるようになります。（tailwindcss2までのpurgeと同じ効果ですね。） JITのメリット ビルド…
-
POSTCSSを使えばCSSのビルドを行うことができます。本番環境向けにminify化するには「cssnano」というプラグインを使用します。 インストール [crayon-633f1b90ce241985794729/] 設定 p…