Web技術 CSSの新常識@scope入門 HTMLとCSSだけでスコープ化して保守地獄を抜ける
CSSは自由だ。自由すぎて事故る。コーポレートの改修で、たった1行の追記が別ページのレイアウトを壊す。あの瞬間の血の気の引き方、覚えていますか。原因はだいたい同じです。グローバルに効くセレクタ、長生きしすぎたユーティリティ、名前の衝突。BE...
css
Web技術 Web技術 UnoCSSとは何か 2026年の実務で失敗しない導入ガイド出来ること 出来ないこと 使いどころとやめどきまで全部まとめ
Tailwind系のユーティリティCSSに慣れてくると、ある日ふと思います。「もっと速くならないのか」「設定の自由度がもう少し欲しい」「使うクラスだけ生成してくれればいいのに」。 この欲が出てきたタイミングで候補に上がるのがUnoCSSです...
Web技術 CSSカスタムプロパティとSassの違い 完全整理 どっちを使うか迷う時間を終わらせる
CSSの変数って結局どれを使えばいいのか。現場で一回は迷います。CSSカスタムプロパティ(var)が出てきてから、Sassの変数やmixinの立場が変わった。変わったのに、昔の成功体験もまだ強い。結果として、プロジェクトごとに流派が分かれる...
Web技術 ぐるっと円で画像が現れる！mask: conic-gradient()で作る気持ちいいCSSアニメーション完全ガイド
「画像の上に円がぐるっと一周して、スッと表示されるアニメーションをCSSだけで作りたい。」そんな時にめちゃくちゃ頼れるのが、mask: conic-gradient(from 150deg, black 100%, transparent ...
Web技術 UIデザインが一段上がる 2025年版「最新CSS」完全ガイド― text-autospace から scroll-state(), dialog の新仕様まで実務目線で解説
はじめに：2025年のCSSは「情報収集」から「実戦投入」の段階へここ数年、CSS は「ちょっとした新機能」どころではなく、UIデザインそのものを組み替えるレベルで進化しています。2025年の MTDDC Meetup Tokyo で公開さ...
Web技術 CSS Anchor Positioning徹底解説 CSS Anchor Positioning徹底解説
ツールチップ、ドロップダウン、ポップオーバー、トースト通知。フロントエンドをやっていると「この要素を、別の要素の横にぴったり添わせて出したい」という場面は山ほどあります。今まではだいたいこうでした。対象要素の座標を JavaScript で...
Web技術 タップ時の「青いハイライト」を自在にコントロールする完全ガイドモバイルWebのための -webkit-tap-highlight-color 実務レシピ
スマホでリンクやボタンをタップすると、iOS Safari や Android Chrome では要素の上に一瞬「色付きのハイライト」が出ます。これはユーザーに「タップが認識された」ことを伝える大切なフィードバックですが、UIのトーンと合わ...
Web技術 HTMLとCSSだけで「止まらない」美しいスライドショーを作る完全ガイドJavaScript最小で運用できる設計と、停止・再生ボタンまでの拡張
スマホ主流のいま、トップのヒーローエリアやロゴスライダーはサイトの第一印象を決める重要パーツです。ところが、ライブラリに頼りすぎると読み込みサイズの増加、バージョン差異による不具合、カスタマイズの難しさに悩みがち。そこで本稿では、「HTML...
Web技術 【完全ガイド】WindowsでCSSのスムーススクロール（scroll-behavior）が効かない原因と対処法｜アクセシビリティ設定を見直そう
Webサイトでscroll-behavior: smooth;を指定してもWindows環境でスムーススクロールが動作しないことがあります。本記事ではその原因となるWindowsの「アクセシビリティ設定」を徹底解説し、SEOを意識したキーワ...
Web技術 【完全攻略】CSS calc()で“片側フルワイド”レイアウトをスマートに実装する方法
Webデザインでよく見る「中央固定コンテンツ＋片側だけブラウザ端まで広がる（フルワイド）パターン」。この記事では、CSSの強力な関数 calc() を活用し、レスポンシブ対応かつシンプルなコードで「片側のみをビューポート端まで広げる」テクニ...