-
【Sass】「変数」について
02.26
用途 同じカラーコードをまとめておく。 デザイナーのケアレスミスなどで色コードを微妙に変えたいなどと言った場合にもすぐ対応できます。一括置換よりは楽です。 変数名のルール 変数名として使える記号は以下の三種類だけです。それ以外の記号…
-
【Sass】「@at-root」について
02.26
使い方 @at-rootとつけたものを入れ子になっていたとしてもルート要素にすることができる機能です。 [crayon-628f2cbbefe40148327739/] 変換後のCSS [crayon-628f2cbbefe5004…
-
プロパティのネスト セレクタだけでなくプロパティもハイフンで区切った要素をネストさせることができます。プロパティの場合は:(コロン)を使用してネストさせます。 [crayon-628f2cbbf03bd274266646/] 生成され…
-
【Sass】「擬似要素」の書き方
02.26
[crayon-628f2cbbf0884728345965/] というのがあったらSassでは以下のように記述することが可能です。 [crayon-628f2cbbf088e109010923/] …
-
隣接セレクタ +記号を使って隣にあるセレクタを指定できます。 [crayon-628f2cbbf0bff539296184/] Sass [crayon-628f2cbbf0c09807982670/] 間接セレクタ ある要素と…
-
【Sass】Gulpについて
02.23
Sassのビルドツールには様々な種類があります。おそらく多くの現場で使われているのはタスクランナーの「Gulp」でしょう。GulpはSassだけじゃなく、TypeScript、CofeeScriptなどのトランスパイル、構文チェックにも対応…
-
TailwindCSSのバージョン3からですが、アスペクト比を設定できるクラスが登場しました。 aspect-ratio アスペクト比を設定することができるクラス群になります。 aspect-auto 自動調整です。 aspect…
-
tailwindでは以下のCSSを読み込ませて使います。この三つがベースとなって追加が必要であれば、開発者がここに設定していくことになります。 [crayon-628f2cbbf14cc185325285/] @tailwind bas…
-
【CSS】「アニメーション」について
02.20
仕組み 数秒の間の繰り返しで、始点と終点のCSSを指定します。通常は、transformと組み合わせて使います。 tailwindCSS 厳選して以下の4つが使えます。 spin ローディングのように表示できます。 ping …
-
【CSS】トランスフォームについて
02.20
トランスフォームとは？ 変換や、変形のことです。CSSではかなり細かく設定できますが、TailwindCSSでは厳選されています。 デザインのポイント hoverなどの特定の場合などに設定したりもします。 Origin 原点、どこ…