Webエンジニアのブログ

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

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

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

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

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

Google Colab（Google Colaboratory）を使いやすくカスタマイズするためのエディタ設定方法を解説します。デフォルトでは少し使いにくい縦の罫線の削除から、Python開発に必須のインデント幅の調整、エラー特定を早める...
続きを読む>>

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（マルチページ...
続きを読む>>