• ホーム
• miyabisan2

miyabisan2の記事一覧

1. 02.11

   【Redux】Redux Tool Kitの「Reducer」のテスト

   個別のReducerのみをテストする場合 通常の例 [crayon-6adfe3c6b89f5531094160/] ExtraReducerの場合 非同期の結果が失敗した場合と成功した場合などで様々なケースでテス…

   • Redux
   • コメントを書く

2. 02.06

   【HTML】「レイアウト」手法の種類(聖杯レイアウト、flex、grid)、モバイルファースト、レスポンシブ

   聖杯レイアウトとは？ 当時は、flexもgridもなかったので西欧では聖杯を探すのが難しいという意味を込めて「聖杯レイアウト」と呼ばれていました。 用途 情報量が多いサービス ページ数が多いサービス ベンチ…

   • Webデザイン
   • コメントを書く

3. 02.06

   【CSS】Tailwind CSS3以降のJIT(Just In Time)モードについて

   Twailwindcss2までは purge.cssを使います。通常、tailwindcssは71kbほどの容量なのですが、さらに不要なcssを削除してくれるツールでパフォーマンスが良くなります。（ちなみに、bootstrapとかで…

   • CSS
   • コメントを書く

4. 02.06

   【CSS】POSTCSSのビルド結果をminify化するには。

   POSTCSSを使えばCSSのビルドを行うことができます。本番環境向けにminify化するには「cssnano」というプラグインを使用します。 インストール [crayon-6adfe3c6b966d933616570/] 設定 p…

   • CSS
   • コメントを書く

5. 02.06

   【CSS】「autoprefixer」について

   autoprefixerとは？ 自動でベンダープレフィックスをつけてくれるものです。CSSはブラウザによって使えるもの使えないものが変わってきますが、ベンダープレフィックスをつけることによってどのブラウザでも動くようにしてくれるもの…

   • CSS
   • コメントを書く

6. 02.05

   【CSS】「postcss」について

   PostCSSとは？ Node.js製のCSS変換ツールです。さまざまなプラグインを組み合わせることでCSSファイルにさまざまな処理を行った上で変換を行うことができます。 実務では、SassやTailwindと組み合わせで使う…

   • CSS
   • コメントを書く

7. 02.05

   【CSS】「TailwindCSS」の再利用について(@apply)、レスポンシブ対応(@responsive、@screenなど）

   @apply tailwindはどうしても長くなるので可読性が落ちます。そういう場合は似たようなcssをまとめて再利用することも可能です。（通常のcssのように使うことができるみたいなイメージですね。） 記述方法 CSS…

   • CSS
   • コメントを書く

8. 02.05

   【CSS】「TailwindCSS」の文字装飾、ブロック装飾

   文字装飾 フォントファミリー font-sans tailwindのデフォルトのフォントファミリーになります。 font-serif フォーマルな印象を与えます。 font-mono 等幅フォントです。 オリジナルフォント …

   • CSS
   • コメントを書く

9. 01.20

   【Next.js】「エラーハンドリング」

   Error Boundary コンポーネント内で発生する特定のエラー（実行時エラーなど）しかcatchしてくれない。以下のエラーは捕捉しないので、現状はあまり使い道はないかもしれない。 イベントハンドラ内で発生したエラー …

   • Next.js
   • コメントを書く

10. 01.17

    【Next.js】ディレクトリ構成、「.next」ディレクトリ、「_app.tsx」と「_document.tsx」、APIルート機能など

    ディレクトリ名説明.nextプロジェクト作成時にはなく実行すると生成されます。この中にプロジェクトから生成されたWebアプリのファイル類が保存されます。pagesここで指定したファイル名はパス名になる。（_app以外）└_app.tsxこ…

    • Next.js
    • コメントを書く