Webエンジニアのブログ

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

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

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

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

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

最新CSSのsibling-index()とsibling-count()を徹底解説！JavaScriptを使わずCSSだけで要素の番号や総数を取得し、スタッガーアニメーションや段階的な色変化を自動計算で実装する手法を紹介します。HTMLの...
続きを読む>>

「AIでWebデザインやプログラミングの学習は無駄になる？」そんな不安を現役エンジニアが解決します。実はAI時代だからこそ「基礎スキル」の価値は高まります。学習を続けるべき理由と、AIを使いこなし価値を高める人材になる方法について解説します...
続きを読む>>

標準CSSの@functionで自作関数を作る方法をわかりやすく解説します。multiplyやpx→remなどの単位変換といった実例も紹介し、Sassなしでも効率的かつ柔軟にスタイルを管理できる最新テクニックを学べます。...
続きを読む>>

Web制作では、必要に応じてテーマカラーに合わせてWebデザインを作っていくこともありますが、Webサイトの作りによっては、JavaScriptでダークモードとライトモードの切り替えを行う必要も出てきます。JavaScriptではmatch...
続きを読む>>

Chrome 137のバージョンから、if()関数がサポートされ、CSSにおける条件分岐が可能となりました。 これまでJavaScriptを使ったり、複雑なセレクタを駆使したりして実現していたスタイルの動的な切り替えが、これからはCSSだけ...
続きを読む>>