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