https://firstlayout.net/ 学んだことを書き留める Web デザイナーのブログ 2025-09-09T00:24:01.000+09:00 https://firstlayout.net/images/icon/favicon-32x32.png Akira https://firstlayout.net/astro-x-shiki-codeblock-with-filename-diff-and-more/

Astro + Shikiで MDX のコードブロックを拡張し、ファイル名の表示・差分表示・行ハイライト・コピー機能などを Transformers API で実装します。

2025-09-09T00:24:01.000+09:00 2025-09-09T00:24:01.000+09:00 Akira https://firstlayout.net/default-value-to-avoid-any-when-using-astro-polymorphic/

CSS の @layer を Astro で書いた時、意図しないレイヤー順序になるケースがありました。その問題となるケースと injectScript などによる対策です。

2024-11-18T14:46:25.000+09:00 2024-11-18T14:46:25.000+09:00 Akira https://firstlayout.net/css-cascade-layer-order-management-in-astro/

CSS の @layer を Astro で書いた時、意図しないレイヤー順序になるケースがありました。その問題となるケースと injectScript などによる対策です。

2024-07-29T15:38:15.000+09:00 2024-07-29T15:38:15.000+09:00 Akira https://firstlayout.net/differences-in-color-mix-function-depending-on-color-space/

CSS の color-mix() 関数に指定する色空間によって、どれほど色が異なるのかが分かる一覧を作りました。

2024-06-28T15:40:12.000+09:00 2024-06-28T15:40:12.000+09:00 Akira https://firstlayout.net/generate-a-material-design-3-color-scheme-with-material-color-utilities/

npm パッケージの Material Color Utilities の TypeScript 版を使い、ライトモードとダークモードに対応するマテリアルデザイン 3 の色を作ります。

2024-05-13T14:21:51.000+09:00 2024-05-13T14:21:51.000+09:00 Akira https://firstlayout.net/upload-directly-to-cloudflare-pages-using-wrangler/

静的サイトを Cloudflare Pages で公開する時に Wrangler を使って成果物を直接アップロードする方法です。

2024-02-14T15:10:57.000+09:00 2024-02-14T15:10:57.000+09:00 Akira https://firstlayout.net/how-to-output-a-comma-other-than-at-the-end-in-json-created-with-nunjucks/

JSON では末尾のカンマは許容されていないため、末尾以外にカンマを出力しなければなりません。Nunjucks では、主に 3 つの方法で末尾以外にカンマを出力できます。

2024-01-29T00:00:00.000+09:00 2024-01-29T00:00:00.000+09:00 Akira https://firstlayout.net/browser-testing-safari-on-windows/

Playwright を使い、Windows で Safari のブラウザテストをする方法です。WebKit ブラウザをインストールでき、デベロッパーツールも使えます。

2022-10-28T20:06:18.000+09:00 2022-10-28T20:06:18.000+09:00 Akira https://firstlayout.net/converting-strings-and-arrays-in-nunjucks/

JavaScript テンプレートエンジン Nunjucks で文字列と配列を変換する split と join の紹介です。

2022-09-19T15:26:40.000+09:00 2022-09-19T15:26:40.000+09:00 Akira https://firstlayout.net/using-recaptcha-v3-on-wordpress-without-plugins/

WordPress のコメントフォームとログインフォーム、パスワードリセット手順のリクエストフォームに reCAPTCHA v3 を実装するカスタマイズです。

2022-08-21T17:28:22.000+09:00 2022-08-21T17:28:22.000+09:00 Akira https://firstlayout.net/speed-up-wordpress-by-lazy-loading-twitter-and-instagram/

WordPress の表示を速くするカスタマイズです。Intersection Observer API を使い、Twitter と Instagram の埋め込みを遅延で読み込みます。

2022-06-06T13:30:19.000+09:00 2022-06-06T13:30:19.000+09:00 Akira https://firstlayout.net/using-sass-with-eleventy-and-minify-css/

静的サイトジェネレーター Eleventy で Sass 環境を構築する方法です。また、未使用の CSS の削除と CSS の縮小も行います。

2022-05-09T12:13:24.000+09:00 2022-05-09T12:13:24.000+09:00 Akira https://firstlayout.net/dump-eleventy-collections-in-njk-file/

静的サイトジェネレーターの Eleventy の collections に Nunjucks の dump を使うとエラーが出ました。その対処法です。

2022-04-04T14:23:50.000+09:00 2022-04-04T14:23:50.000+09:00 Akira https://firstlayout.net/fluidly-font-size-created-with-sass-and-clamp/

CSS の clamp() を使えば、ビューポートに応じて大きさが変わるフォントサイズを指定できます。その clamp() を生成する Sass の独自関数です。

2022-02-04T12:33:45.000+09:00 2022-02-04T12:33:45.000+09:00 Akira https://firstlayout.net/amp-script-does-not-reflect-changes-in-button-tag-attributes-in-html/

class や aria-* などの属性を amp-script で追加や更新、削除をする場合、button タグの HTML に変更が反映されません。

2021-12-03T11:47:16.000+09:00 2024-01-28T00:00:00.000+09:00 Akira https://firstlayout.net/blurred-circle-accents-made-with-css/

サイトのアクセントとしてよく見かける円をぼかす CSS の紹介です。

2021-09-29T15:58:27.000+09:00 2021-09-29T15:58:27.000+09:00 Akira https://firstlayout.net/gradation-created-by-blurring/

CSS の filter: blur() を使い、円をぼかして作るグラデーションの紹介です。contrast() などで色の調整もできます。

2021-08-04T12:59:10.000+09:00 2021-08-04T12:59:10.000+09:00 Akira https://firstlayout.net/css-to-round-the-outer-corners-of-the-active-menu/

「アクティブなメニューやタブ」と「その他の部分」の境界の角を丸くする CSS の紹介です。box-shadow を使い、湾曲を表現します。

2021-07-25T16:24:07.000+09:00 2021-07-25T16:24:07.000+09:00 Akira https://firstlayout.net/create-rankings-in-wordpress-based-on-google-analytics-data/

アナリティクス Reporting API v4 を使用し、Google アナリティクスの計測結果に基づいた人気ランキングを WordPress で作成する方法。

2021-04-22T13:22:50.000+09:00 2021-04-22T13:22:50.000+09:00 Akira https://firstlayout.net/use-recaptcha-in-comment-form-with-wordpress-plugin-amp/

WordPress プラグインの AMP を使用しているサイトのコメントフォームに reCAPTCHA v3 を導入する方法の紹介です。

2021-03-16T11:31:38.000+09:00 2021-06-15T12:18:06.000+09:00 Akira https://firstlayout.net/alt-text-in-material-design/

画像の特徴を示す情報を文脈に沿ってキーワードを含めながら 125 文字以内で説明するように推奨されています。また、画像を説明するキャプションや本文がある場合は省略できます。

2020-08-06T13:11:01.000+09:00 2020-08-06T13:11:01.000+09:00 Akira https://firstlayout.net/minify/

PHP ライブラリ Minify を使えば、CSS と JavaScript を簡単に縮小できます。 縮小化と同時に複数のファイルの結合も可能です。

2020-06-05T16:08:01.000+09:00 2020-06-05T16:08:01.000+09:00 Akira https://firstlayout.net/optimize-amp-pages/

AMP ページは、必ずしも AMP キャッシュで表示されるわけではありません。しかし、最適化により常に高速な表示が可能です。

2020-05-05T13:45:25.000+09:00 2021-07-18T16:37:05.000+09:00 Akira https://firstlayout.net/amp-service-worker/

AMP ページで簡単に Service Worker を利用できる AMP Service Worker の紹介です。AMP ランタイムや HTML などをキャッシュできます。

2020-04-08T12:28:11.000+09:00 2020-04-08T12:28:11.000+09:00 Akira