カテゴリー：CSS
-
「object-fit」とは？ 置換要素(imageやvideoなど）にコンテナの中身をどのように埋め込むか設定すること。わかりやすく言えば、「画像をトリミングする」イメージです。 以前は、positionプロパティなどを駆使して頑…
-
TailwindCSSのバージョン3からですが、アスペクト比を設定できるクラスが登場しました。 aspect-ratio アスペクト比を設定することができるクラス群になります。 aspect-auto 自動調整です。 aspect…
-
tailwindでは以下のCSSを読み込ませて使います。この三つがベースとなって追加が必要であれば、開発者がここに設定していくことになります。 [crayon-651398fd455b0938964350/] @tailwind bas…
-
単位の種類 px デバイスの1ドットを表す絶対的な値。現在はほぼ全てのブラウザで小数点を表すことができる。ただし、borderなど一部プロパティでは小数点を許容しなかったりする。 html要素のfont-size デフォルトで16p…
-
theme関数とは？ 「tailwind.config.js」のthemeに定義されている定数の値を返す関数です。 メリット デザインの統一化 コードやテーマ修正の際の保守性向上になる。 tailwind.css.…
-
@layer カスタムスタイルがどのレイヤーに属するか指定できます。定義したカスタムスタイルが指定したレイヤーに自動的に移動します。 メリット CSSを記述する順序による問題が発生しずらくなる。 未使用のCSSは本番ビル…
-
Twailwindcss2までは purge.cssを使います。通常、tailwindcssは71kbほどの容量なのですが、さらに不要なcssを削除してくれるツールでパフォーマンスが良くなります。（ちなみに、bootstrapとかではまだ…
-
POSTCSSを使えばCSSのビルドを行うことができます。本番環境向けにminify化するには「cssnano」というプラグインを使用します。 インストール [crayon-651398fd46533451433608/] 設定 p…
-
02.06
【CSS】「autoprefixer」について
autoprefixerとは？ 自動でベンダープレフィックスをつけてくれるものです。CSSはブラウザによって使えるもの使えないものが変わってきますが、ベンダープレフィックスをつけることによってどのブラウザでも動くようにしてくれるものです。…
-
02.05
【CSS】「postcss」について
PostCSSとは？ Node.js製のCSS変換ツールです。さまざまなプラグインを組み合わせることでCSSファイルにさまざまな処理を行った上で変換を行うことができます。 実務では、SassやTailwindと組み合わせで使うことが…
