Webエンジニアのブログ

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

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

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

Processing 4系以降、Retinaや4Kモニターで描画がぼやけて見える原因と対策を解説します。最新版での仕様変更や警告メッセージへの対応から、displayDensity() による自動判別、p5.jsとの考え方の違いまで詳しくま...
続きを読む>>

Processingのムービーメーカーで動画が出ないエラーを解決。Macのerror 13（実行権限）の解除やWindowsのerror 2（ffmpeg.exeの欠落）の修正手順を解説します。書き出し失敗の原因となる解像度の制約や、FFm...
続きを読む>>

Pythonで大量のデータを一定数ずつ処理する際、スライスよりも効率的な「itertools.batched」の使い方を解説します。スライス方式とのコード比較やメモリ効率の差、実務での具体的な活用シーン、リスト管理における使い分けまで詳しく...
続きを読む>>

これまでimgやiframeに限られていたloading="lazy"属性が、video・audioなどのメディア要素の遅延読み込みにも対応が進んでいます。ブラウザのサポート状況や具体的なコード例、LCP（表示速度）改善のメリットなどを解説...
続きを読む>>

CSSの新機能「View Transitions API」を使えば、JavaScript不要。ブラウザの標準機能だけでアプリのような滑らかなページ遷移が実現できます。フェード、スライド、戻るボタンでの逆転制御など、従来のMPA（マルチページ...
続きを読む>>

検索エンジン（SEO）だけでなく、AI回答（AIO/GEO）への対応が求められる今、大切なのは形だけの対策ではなく「情報の整理」です。デザイン、コード、文章の質を統合し、テーブルやリストを用いてユーザーとAIの両方に正しく伝えるための構造化...
続きを読む>>

JavaScriptスクロール判定の新常識「Intersection Observer API」を解説。従来のscrollイベントによる負荷を抑え、滑らかなアニメーションを実装する手順をまとめました。SEOやAI検索（AIO）で重視される軽...
続きを読む>>