<h2 id="hae76a5038a">なぜPostCSSを選んだのか</h2><p>これまでSCSSを使用してスタイルを管理していましたが、より新しいCSS機能を活用したいと考え、PostCSSを選択することにしました。</p><p>Sass(SCSS)の@mixinを使い慣れていたこともあり、PostCSSへ移行したときにメディアクエリはVSCodeにスニペットを登録して対応していました。</p><p>スニペットで簡単に呼び出すことはできても可読性があまりよくないため、Sass(SCSS)のように可読性を保ち、変更に柔軟に対応できるcustom-media機能を使えるようにするために、PostCSSの導入を最終的に決定しました。</p><h2 id="hf51de7b49c">AstroでPostCSSを使えるようにする</h2><p>３つのパッケージを使います。</p><p><strong>@csstools/postcss-global-data</strong><br>グローバルデータとしてCSSファイルをインポートするためのプラグイン。指定したファイルをCSS全体で利用可能にする。</p><p><strong>postcss-custom-media</strong><br>カスタムメディアクエリをサポートするプラグイン。ユーザー定義のメディアクエリを定義し、使いやすくする。</p><p><strong>postcss-preset-env</strong><br>将来のCSS仕様を現在のブラウザ向けに変換するプリセット。CSSの最新機能を利用可能にし、ブラウザ互換性を確保する。</p><pre><code>npm i @csstools/postcss-global-data postcss-custom-media postcss-preset-env</code></pre><h3 id="h3001c5a44e">postcss.config.cjsの設定</h3><p>postcss.config.cjsを作成してカスタムメディアをまとめたcssファイルの読み込みなどパッケージの設定をします。</p>

module.exports = {
  plugins: [
    require('@csstools/postcss-global-data')({
      files: ['./src/styles/media.css'],  // @custom-mediaをまとめたファイル
    }),
    require('postcss-custom-media'),
    require('postcss-preset-env')
  ],
};

<h3 id="h896a1c3245">カスタムメディアの設定</h3><p>今回はBootstrapのブレイクポイントに合わせて設定ファイルを作ってみました。</p>

@custom-media --sm (width >= 576px);
@custom-media --md (width >= 768px);
@custom-media --lg (width >= 992px);
@custom-media --xl (width >= 1200px);
@custom-media --xxl (width >= 1400px);

@custom-media --sm-only (768px > width >= 576px);
@custom-media --md-only (992px > width >= 768px);
@custom-media --lg-only (1200px > width >= 992px);
@custom-media --xl-only (1400px > width >= 1200px);

<p>設定はこれで終わりです。</p><h2 id="h97a19aa59e">設定したカスタムメディアを使ってみる</h2><p>使い方は簡単です。</p>

@media (--sm){
  p{
    font-size: 1rem;
  }
}

<h2 id="h20a07fbcd2">出力されたcssを確認してみる</h2><p>ビルドされたcssファイルを確認してみる<code>@media (--sm)</code>が<code>@media (min-width: 576px)</code>に変換されてます。</p>

@media (--sm){ ～ }
　↓
@media (min-width: 576px){ ～ }

@media (--md){ ～ }
　↓
@media (min-width: 768px){ ～ }

@media (--lg){ ～ }
　↓
@media (min-width: 992px){ ～ }

@media (--xl){ ～ }
　↓
@media (min-width: 1200px){ ～ }

@media (--xxl){ ～ }
　↓
@media (min-width: 1400px){ ～ }

@media (--sm-only){ ～ }
　↓
@media (min-width: 576px) and (max-width: 767.98px){ ～ }

@media (--md-only){ ～ }
　↓
@media (min-width: 768px) and (max-width: 991.98px){ ～ }

@media (--lg-only){ ～ }
　↓
@media (min-width: 992px) and (max-width: 1199.98px){ ～ }

@media (--xl-only){ ～ }
　↓
@media (min-width: 1200px) and (max-width: 1399.98px){ ～ }

<h2 id="ha214098e44">まとめ</h2><p>Sass(SCSS)でもいいのでは？ともなりますが、将来のCSSが使えるのはメリットが大きいかなと感じています。</p><p>Sass(SCSS)からの移行も最初は慣れなかったり、設定が大変かもしれませんが、プラグインを使えば大抵のことはできるし、それほど不便ではありません。（慣れ..？）</p><p></p><p>💭余談</p><p>パッケージをインストールしなくても使える？と思ったけど、そういうわけではなかった。エラー出ました。</p><pre><code>Astro detected an unhandled rejection. Here&apos;s the stack trace:
Failed to load PostCSS config: Failed to load PostCSS config (searchPath: C:/Users/xxx): [Error] Cannot find module &apos;postcss-preset-env&apos;Require stack:
- C:\xxx\postcss.config.cjs
Error: Cannot find module &apos;postcss-preset-env&apos;</code></pre><blockquote><p>Astroには、Viteの一部としてPostCSSが同梱されています。プロジェクトにPostCSSを設定するには、プロジェクトルートにpostcss.config.cjsファイルを作成します。プラグインはrequire()を使ってインポートできます。</p><p>Astroドキュメント PostCSS<br><a href="https://docs.astro.build/ja/guides/styling/#postcss" target="_blank" rel="noopener noreferrer nofollow">https://docs.astro.build/ja/guides/styling/#postcss</a></p></blockquote>

AstroとPostCSSで実現するカスタムメディアクエリを使った効率的なCSS管理

<p><br>型エラー参考<br>https://takaittakait.hatenablog.com/entry/nextjs-typescript-microcms-blog<br>https://chaika.hatenablog.com/entry/2023/02/28/083000<br>https://zenn.dev/elletech/articles/nextjs_microcms<br><br><br>cloudflare デプロイしたらエラー<br><br>02:04:11.099 &nbsp;info &nbsp;- using build directory: /opt/buildhome/repo/.next<br>02:04:11.105 &nbsp;info &nbsp;- Copying "static build" directory<br>02:04:11.155 &nbsp;info &nbsp;- No "exportPathMap" found in "/opt/buildhome/repo/next.config.js". Generating map from "./pages"<br>02:04:11.158 &nbsp;Error: Image Optimization using Next.js' default loader is not compatible with `next export`.<br>02:04:11.159 &nbsp; &nbsp;Possible solutions:<br>02:04:11.159 &nbsp; &nbsp; &nbsp;- Use `next start` to run a server, which includes the Image Optimization API.<br>02:04:11.159 &nbsp; &nbsp; &nbsp;- Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.<br>02:04:11.159 &nbsp; &nbsp;Read more: https://nextjs.org/docs/messages/export-image-api<br>02:04:11.159 &nbsp; &nbsp; &nbsp;at /opt/buildhome/repo/node_modules/next/dist/export/index.js:153:23<br>02:04:11.159 &nbsp; &nbsp; &nbsp;at async Span.traceAsyncFn (/opt/buildhome/repo/node_modules/next/dist/trace/trace.js:79:20)<br>02:04:11.169 &nbsp;Failed: build command exited with code: 1<br>02:04:12.177 &nbsp;Failed: error occurred while running build command<br><br>画像が×のようです・・<br>https://nextjs.org/docs/api-reference/next.config.js/custom-image-loader-config#cloudflare<br><br><br>Image Optimization using Next.js' default loader is not compatible with<br><br>キャッシュについての記事<br>https://st4ng.medium.com/how-to-use-next-js-image-optimization-with-cloudflare-569da7b3ddc6<br><br>参考：<a href="https://nishinatoshiharu.com/classname-pattern/" target="_blank" rel="noopener noreferrer">【React】classNameでよく使う定義方法(複数クラス、条件付きクラス)</a><br></p>

<p>▼変更前・変更後</p><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/084d3c236327456eba684d8ac649011c/Group%2054.png?w=716&amp;h=331" alt="" width="716" height="331"></p><ul><li>コンポーネントに分けてCSS Modulesを適用</li><li>Google Fontsの読み込み</li><li>パッケージclsxの利用</li><li>サムネイル画像と公開日を追加　など</li></ul><p><br></p><h2 id="h15acd91e35">Figmaで一覧と詳細のレイアウトを作成</h2><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/a4e3587e5568489f9a47fbba633e96e7/rapture_20230506223509.png" alt="" width="1002" height="679"></p><ul><li>共通<ul><li>ロゴ追加</li><li>ファビコン変更</li></ul></li><li>一覧<ul><li>サムネイル画像を追加（画像がない場合noimage画像を表示）</li><li>公開日を追加</li><li>カテゴグまたはタグ表示（※）</li><li>検索機能<sup>（※）</sup></li><li>キーボード操作<sup>（※）</sup></li></ul></li><li>詳細<ul><li>見出し、他パーツのサイズなど最適化</li><li>リンクホバーでURL表示</li><li>更新日<sup>（※）</sup></li></ul></li></ul><p>※次回以降に</p>

<h2 id="h3925e732ee">CSSの設定変更</h2><h3 id="he77e18aba7">Tailwindの設定を削除</h3><ul><li>tailwind.config.jsファイルを削除</li><li>Tailwindのパッケージを削除 <code>npm remove tailwindcss</code></li><li>globals.cssでインポートしていたTailwindを削除</li><li>postcss.config.jsからTailwindの設定を削除</li></ul><p><br></p>

@tailwind base;
@tailwind components;
@tailwind utilities;
//↑全部削除

module.exports = {
  plugins: {
    tailwindcss: {}, // ←削除
    autoprefixer: {},
  },
}

<h3 id="hf7705e8165">Google Fonts の読み込み</h3><p>サイト全体にNoto Sans JPを適応させる</p>

import { Noto_Sans_JP } from "@next/font/google";

const notojp = Noto_Sans_JP({
  weight: ["400", "700"],
  subsets: ["latin"],
  display: "swap",
});

<div className={notojp.className}>
～
</div>

<p>参考：<a style="background-color:#ffffff" href="https://nextjs.org/docs/basic-features/font-optimization#google-fonts" target="_blank" rel="noopener noreferrer">Next.js公式 Font Optimization</a></p>

<h3 id="h2987cf65b0">CSS Modulesの準備</h3><p>Sassを使いたいので「sass」パッケージインストール</p><p><code>npm install sass</code></p><p><br></p><p>クラス設定を扱いやすくするため「clsx」パッケージインストール</p><p><code>npm install clsx</code></p><p>classNamesが有名のようだけどclsxのほうがパフォーマンスがいいという情報があったので今回はclsxを採用</p><p><br></p><ul><li>reset.cssはnormalize.css v8.0.1を採用<ul><li>globals.cssにインポート</li></ul></li><li>細かくコンポーネント分けできていなかったのでアーカイブ一覧・記事単体をコンポーネント化</li></ul>

.archive{
  display: grid;
  gap: 1em 0;
}

import styles from "./PostArchive.module
.scss";

<div className={styles.archive}>
～
</div>

<h3 id="h63712a031b">ファビコンを設定</h3><p>ファビコン・アイコン画像を一括生成してくれるサイトで作成・ダウンロード</p><p><a href="https://realfavicongenerator.net/" target="_blank" rel="noopener noreferrer">RealFaviconGenerator</a></p><p>publicフォルダにまとめて入れる</p>

Tailwind CSSからCSS Modulesに変更しデザインをリニューアルしました

<p>Tailwindcss公式<br><a href="https://tailwindcss.com/docs/guides/nextjs" target="_blank" rel="noopener noreferrer">https://tailwindcss.com/docs/guides/nextjs</a></p><pre><code>npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p</code></pre><p><br>tailwind.config.js</p><pre><code>module.exports = {
&nbsp; content: [
&nbsp; &nbsp; "./src/**/*.{js,ts,jsx,tsx}",
&nbsp; ],
…
}</code></pre><p><br>globals.css</p><pre><code>@tailwind base;
@tailwind components;
@tailwind utilities;</code></pre><p><br></p>

<p>Tailwindcss公式</p><p><a href="https://tailwindcss.com/docs/guides/nextjs" target="_blank" rel="noopener noreferrer">https://tailwindcss.com/docs/guides/nextjs</a></p>

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
…
}

@tailwind base;
@tailwind components;
@tailwind utilities;

841-biborokuWebフロントエンドの備忘録

CSS/SCSS