- JavaScript
Astro の Polymorphic を使う時に any にしないためのデフォルト値
CSS の @layer を Astro で書いた時、意図しないレイヤー順序になるケースがありました。その問題となるケースと injectScript などによる対策です。
Web Designer's Blog.
学んだことを書き留める Web デザイナーのブログ
- CSS
- JavaScript
Astro での CSS カスケードレイヤーの順序の管理：問題ケースと解決方法
CSS の @layer を Astro で書いた時、意図しないレイヤー順序になるケースがありました。その問題となるケースと injectScript などによる対策です。
- CSS
color-mix() の色空間による違い
CSS の color-mix() 関数に指定する色空間によって、どれほど色が異なるのかが分かる一覧を作りました。
- JavaScript
マテリアルデザイン 3 のカラースキームを Material Color Utilities で作る
npm パッケージの Material Color Utilities の TypeScript 版を使い、ライトモードとダークモードに対応するマテリアルデザイン 3 の色を作ります。
- JavaScript
Wrangler を使い Cloudflare Pages に直接アップロード
静的サイトを Cloudflare Pages で公開する時に Wrangler を使って成果物を直接アップロードする方法です。
- JavaScript
Nunjucks で作る JSON で末尾以外にカンマを出力する方法
JSON では末尾のカンマは許容されていないため、末尾以外にカンマを出力しなければなりません。Nunjucks では、主に 3 つの方法で末尾以外にカンマを出力できます。
- JavaScript
Windows で Safari のブラウザテストをする
Playwright を使い、Windows で Safari のブラウザテストをする方法です。WebKit ブラウザをインストールでき、デベロッパーツールも使えます。
- JavaScript
Nunjucks での文字列と配列の変換
JavaScript テンプレートエンジン Nunjucks で文字列と配列を変換する split と join の紹介です。
- WordPress
WordPress に reCAPTCHA v3 をプラグインを使わず実装
WordPress のコメントフォームとログインフォーム、パスワードリセット手順のリクエストフォームに reCAPTCHA v3 を実装するカスタマイズです。
- WordPress
- 高速化
Twitter と Instagram の遅延読み込みで WordPress を高速化
WordPress の表示を速くするカスタマイズです。Intersection Observer API を使い、Twitter と Instagram の埋め込みを遅延で読み込みます。
- JavaScript
Eleventy での Sass の使用と CSS の軽量化
静的サイトジェネレーター Eleventy で Sass 環境を構築する方法です。また、未使用の CSS の削除と CSS の縮小も行います。
- JavaScript
Eleventy の collections を Nunjucks で dump する
静的サイトジェネレーターの Eleventy の collections に Nunjucks の dump を使うとエラーが出ました。その対処法です。
- CSS
Sass と clamp() で作る可変のフォントサイズ
CSS の clamp() を使えば、ビューポートに応じて大きさが変わるフォントサイズを指定できます。その clamp() を生成する Sass の独自関数です。
- AMP
amp-script で button タグの属性の変更が HTML に反映されない
class や aria-* などの属性を amp-script で追加や更新、削除をする場合、button タグの HTML に変更が反映されません。
- CSS
CSS で作るぼかした円のアクセント
サイトのアクセントとしてよく見かける円をぼかす CSS の紹介です。
- CSS
CSS で円をぼかして作るグラデーション
CSS の filter: blur() を使い、円をぼかして作るグラデーションの紹介です。contrast() などで色の調整もできます。
- CSS
アクティブなメニューの外側の角を丸くする CSS
「アクティブなメニューやタブ」と「その他の部分」の境界の角を丸くする CSS の紹介です。box-shadow を使い、湾曲を表現します。
- WordPress
Google アナリティクスのデータを使い WordPress で人気ランキングを作る
アナリティクス Reporting API v4 を使用し、Google アナリティクスの計測結果に基づいた人気ランキングを WordPress で作成する方法。
- AMP
WordPress プラグインの AMP のコメントフォームで reCAPTCHA を使用する
WordPress プラグインの AMP を使用しているサイトのコメントフォームに reCAPTCHA v3 を導入する方法の紹介です。
- HTML
マテリアルデザインにおける alt テキスト
画像の特徴を示す情報を文脈に沿ってキーワードを含めながら 125 文字以内で説明するように推奨されています。また、画像を説明するキャプションや本文がある場合は省略できます。
- 高速化
CSS と JavaScript の縮小化 PHP ライブラリ「Minify」
PHP ライブラリ Minify を使えば、CSS と JavaScript を簡単に縮小できます。 縮小化と同時に複数のファイルの結合も可能です。
- AMP
さらなる高速表示のための AMP ページの最適化
AMP ページは、必ずしも AMP キャッシュで表示されるわけではありません。しかし、最適化により常に高速な表示が可能です。
- AMP
AMP に最適な PWA を 1 行で実装する AMP Service Worker の使い方
AMP ページで簡単に Service Worker を利用できる AMP Service Worker の紹介です。AMP ランタイムや HTML などをキャッシュできます。
- HTML
ナビゲーションの構造化データ SiteNavigationElement の書き方
Schema.org の SiteNavigationElement のマークアップ方法の解説です。「ナビゲーションセクションが対象」「ナビゲーションリンクは WebPage もしくは WebPage のサブタイプを使う」など。