Webエンジニアのブログ

Speculation Rules APIを使ってWebサイトのページ遷移を高速化する方法をご紹介します。4つの発動タイミングや基本の書き方はもちろん、広告計測トラブルを防ぐ設定やWordPressへの安全な組み込み方まで実践的に解説します...
続きを読む>>

PDFのプロパティ（タイトルやキーワード）を設定する方法を解説します。PowerPointやWordでの具体的な手順からGoogleツールの注意点まで紹介。メタデータを正しく入力し、検索エンジン（SEO）や生成AI（AIO/GEO）に評価さ...
続きを読む>>

GoogleサーチコンソールでSNSアカウント（Instagram・TikTok・X・YouTube）の連携が可能に。検索経由の表示回数や流入キーワードの分析など、SNS連携でできることやメリット、具体的な追加・設定手順まで分かりやすく解説...
続きを読む>>

Processing 4から導入された配布用ファイル形式「.pdez」の仕組みやメリット、注意点を解説。素材の添付漏れや解凍時のエラーを防ぐ仕組みをはじめ、外部ライブラリに関する注意点やファイルが開かない場合の対処法をまとめています。Pro...
続きを読む>>

画像バナーをHTML+CSS化する際に発生するブラウザの強制ダークモードによる色反転問題。デザインの崩れや文字の視認性低下を、メディアクエリを使わずにCSSの2行だけで解決する方法を分かりやすく解説します。...
続きを読む>>

JSやclamp()の計算は不要。コンテナ幅に合わせて文字サイズを自動拡縮する、CSSのtext-fitプロパティの使い方を解説します。PC・スマホ対応はもちろん、日本語環境で発生しやすい変な位置での改行（表示崩れ）を防ぎ、文節ごとに綺麗に...
続きを読む>>

WordPress 7.0から導入された新機能「PHPのみのブロック登録（PHP-only block registration）」を解説！JavaScriptやReactのビルド環境（npm）を一切構築することなく、functions.p...
続きを読む>>

JavaScriptを使わずにCSSだけで要素をランダムに配置・装飾できるrandom()関数の使い方。基本的な書き方から、複数のプロパティを同期させてサイズや色をきれいに連動させる仕組みなど、実際のWebデザインで使える実用的なコード例と...
続きを読む>>

CSSのat-rule()関数を使い、特定のアットルールがブラウザで動くかを直接判定する方法をまとめました。プロパティの有無で推測するような判定を介さずに、最新のCSS構文をスマートに使い分けられます。状況に合わせ適切なスタイルを適用し、こ...
続きを読む>>

JavaScriptで、マウスの動きに「柔らかい」質感で追従するカスタムカーソルの作り方を解説。GPU（translate3d）を使用した負荷の低い実装方法や、リロード時の座標のズレを防ぐ対策、イージングによる滑らかな挙動の作り方まで具体的...
続きを読む>>