miyabisan2の記事一覧
-
mixinの基本的な使い方 変換前 [crayon-6adfe3c928443483663221/] 変換後 [crayon-6adfe3c92844c880393470/] 命名規則 半角数字から始まる名前はつけられま…
-
実装例 結合前 ファイル1 [crayon-6adfe3c92adfa962863052/] ファイル2 [crayon-6adfe3c92ae03415912073/] 結合後 以下のようなファイルが生成されます。 [cr…
-
用途 同じカラーコードをまとめておく。 デザイナーのケアレスミスなどで色コードを微妙に変えたいなどと言った場合にもすぐ対応できます。一括置換よりは楽です。 変数名のルール 変数名として使える記号は以下の三種類だけです。それ以外の記号…
-
隣接セレクタ [crayon-6adfe3c92d492887661565/] +記号を使って隣にあるセレクタを指定できます。 [crayon-6adfe3c92d49b105408182/] Sass [crayon-6adfe…
-
02.23
【Sass】Gulpについて
Sassのビルドツールには様々な種類があります。おそらく多くの現場で使われているのはタスクランナーの「Gulp」でしょう。GulpはSassだけじゃなく、TypeScript、CofeeScriptなどのトランスパイル、構文チェックにも対応…
-
TailwindCSSのバージョン3からですが、アスペクト比を設定できるクラスが登場しました。 aspect-ratio アスペクト比を設定することができるクラス群になります。 aspect-auto 自動調整です。 aspect…
-
tailwindでは以下のCSSを読み込ませて使います。この三つがベースとなって追加が必要であれば、開発者がここに設定していくことになります。 [crayon-6adfe3c92dfdf935352897/] @tailwind bas…
-
単位の種類 px デバイスの1ドットを表す絶対的な値。現在はほぼ全てのブラウザで小数点を表すことができる。ただし、borderなど一部プロパティでは小数点を許容しなかったりする。 html要素のfont-size …
-
theme関数とは？ 「tailwind.config.js」のthemeに定義されている定数の値を返す関数です。 メリット デザインの統一化 コードやテーマ修正の際の保守性向上になる。 tailwind.css.…
-
@layer カスタムスタイルがどのレイヤーに属するか指定できます。定義したカスタムスタイルが指定したレイヤーに自動的に移動します。 メリット CSSを記述する順序による問題が発生しずらくなる。 未使用のCSSは本番ビル…
