-
カードとは? 画像、テキスト、アイコン、ボタンなどの要素をまとめられます。 メリット カードごとに折り返して表示することができるのでレスポンシブと相性が良いので最近とてもよく使われています。 デザイン テキスト サイズ、太さ、色…
-
単位の種類 px デバイスの1ドットを表す絶対的な値。現在はほぼ全てのブラウザで小数点を表すことができる。ただし、borderなど一部プロパティでは小数点を許容しなかったりする。 html要素のfont-size デフォルトで16p…
-
theme関数とは? 「tailwind.config.js」のthemeに定義されている定数の値を返す関数です。 メリット デザインの統一化 コードやテーマ修正の際の保守性向上になる。 tailwind.css.…
-
@layer カスタムスタイルがどのレイヤーに属するか指定できます。定義したカスタムスタイルが指定したレイヤーに自動的に移動します。 メリット CSSを記述する順序による問題が発生しずらくなる。 未使用のCSSは本番ビル…
-
個別のReducerのみをテストする場合 通常の例 [crayon-662f2fa8293f4524894119/] ExtraReducerの場合 非同期の結果が失敗した場合と成功した場合などで様々なケースでテス…
-
聖杯レイアウトとは? 当時は、flexもgridもなかったので西欧では聖杯を探すのが難しいという意味を込めて「聖杯レイアウト」と呼ばれていました。 用途 情報量が多いサービス ページ数が多いサービス ベンチャーなど…
-
02.06
【HTML】「viewport」とは?
viewportとは? 表示領域(今このページを見ている範囲)のことです。 注意点 画面サイズ(例えば、iPhone5で言えば320✖️568)とviewportは関係ないです。 実装方法 HTMLのheadのmetaタグで以下の…
-
Twailwindcss2までは purge.cssを使います。通常、tailwindcssは71kbほどの容量なのですが、さらに不要なcssを削除してくれるツールでパフォーマンスが良くなります。(ちなみに、bootstrapとかで…
-
POSTCSSを使えばCSSのビルドを行うことができます。本番環境向けにminify化するには「cssnano」というプラグインを使用します。 インストール [crayon-662f2fa82ac7d740932298/] 設定 p…
-
02.06
【CSS】「autoprefixer」について
autoprefixerとは? 自動でベンダープレフィックスをつけてくれるものです。CSSはブラウザによって使えるもの使えないものが変わってきますが、ベンダープレフィックスをつけることによってどのブラウザでも動くようにしてくれるもの…