アーカイブ:2022年 2月
-
theme関数とは? 「tailwind.config.js」のthemeに定義されている定数の値を返す関数です。 メリット デザインの統一化 コードやテーマ修正の際の保守性向上になる。 tailwind.css.…
-
@layer カスタムスタイルがどのレイヤーに属するか指定できます。定義したカスタムスタイルが指定したレイヤーに自動的に移動します。 メリット CSSを記述する順序による問題が発生しずらくなる。 未使用のCSSは本番ビル…
-
個別のReducerのみをテストする場合 通常の例 [crayon-6606528f53ac2634736203/] 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-6606528f548d3415703279/] 設定 p…
-
02.06
【CSS】「autoprefixer」について
autoprefixerとは? 自動でベンダープレフィックスをつけてくれるものです。CSSはブラウザによって使えるもの使えないものが変わってきますが、ベンダープレフィックスをつけることによってどのブラウザでも動くようにしてくれるもの…
-
02.05
【CSS】「postcss」について
PostCSSとは? Node.js製のCSS変換ツールです。さまざまなプラグインを組み合わせることでCSSファイルにさまざまな処理を行った上で変換を行うことができます。 実務では、SassやTailwindと組み合わせで使う…
-
@apply tailwindはどうしても長くなるので可読性が落ちます。そういう場合は似たようなcssをまとめて再利用することも可能です。(通常のcssのように使うことができるみたいなイメージですね。) 記述方法 CSS [cray…