ReactのCSS記述方法は戦国時代らしい。しっかり学習しておく必要がある。 Pure CSS 通常のCSSです。create-react-appした時にデフォルトで適用されているCSSでもあります。 メリット 「通常のCSS」なの…

• React
• コメントを書く

ブラウザの開発者ツールで表示されるソースコードはあくまでSassなどの出力結果になります。なので、出力結果がsassのソースのどの行に対応しているのかはわかりません。これでは開発時に不便ですので、「sourcemap(ソースマップ）」という…

• Sass
• コメントを書く

リリースノート 2018年3月31日現在では、8.0まで出ています。スマホアプリ全盛期は、4.0位のイメージがありましたが、年に1ずつくらいでメジャーバージョンアップを繰り返しているようです。 「APIレベル」というのは、聞きなれな…

• Android
• コメントを書く

Sassフレームワークとは？ レイアウトやパーツなどCSSでよく使われるパーツをまとめたものになります。Sassのmixin集です。 種類 機能拡張系フレームワーク Bourbon Sassのミックスイン集、CSSフレームワークの…

• Sass
• コメントを書く

mixinの基本的な使い方 変換前 [crayon-688ba52697fa1477754952/] 変換後 [crayon-688ba52697fa8249380421/] 命名規則 半角数字から始まる名前はつけられま…

• Sass
• コメントを書く

実装例 結合前 ファイル1 [crayon-688ba526987cc000920767/] ファイル2 [crayon-688ba526987d3458027549/] 結合後 以下のようなファイルが生成されます。 [cr…

• Sass
• コメントを書く

用途 同じカラーコードをまとめておく。 デザイナーのケアレスミスなどで色コードを微妙に変えたいなどと言った場合にもすぐ対応できます。一括置換よりは楽です。 変数名のルール 変数名として使える記号は以下の三種類だけです。それ以外の記号…

• Sass
• コメントを書く

隣接セレクタ [crayon-688ba526991ce439056780/] +記号を使って隣にあるセレクタを指定できます。 [crayon-688ba526991d5024597712/] Sass [crayon-688ba…

• Sass
• コメントを書く

Sassのビルドツールには様々な種類があります。おそらく多くの現場で使われているのはタスクランナーの「Gulp」でしょう。GulpはSassだけじゃなく、TypeScript、CofeeScriptなどのトランスパイル、構文チェックにも対応…

• Sass
• コメントを書く

TailwindCSSのバージョン3からですが、アスペクト比を設定できるクラスが登場しました。 aspect-ratio アスペクト比を設定することができるクラス群になります。 aspect-auto 自動調整です。 aspect…

• CSS
• コメントを書く