【翻訳】2025年 デザイナーのための新しいフロントエンド機能（Cosima Mielke, Smashing Magazine）
最も柔軟なフロントエンドのワークフローやツールキットを探していると、最近のウェブ上の基本的な機能がどれほど強力になっているかを忘れてしまいがちです。この記事では、フロントエンドの新機能とその可能性を紹介します。
- CSS コンテナクエリとスタイルクエリ
- 泣き別れのタイポグラフィはもういらない
- フォームのフィールドサイズの自動調整
- 隠れたコンテンツを検索可能に
- セレクトメニュー内のグループのスタイリング
- スクロール可能なコンテナのためのシンプルなスナップ
- ツールチップとポップオーバーのアンカーポジショニング
- OKLCHとOKLABによる高精細カラー
- CSS での相対色
- View Transitions API によるスムーズな遷移
- 排他的アコーディオン
- ライブ・バリデーションとレイト・バリデーション
- スムーズなスクロール動作
- フォーカスの可視化
- 子に基づく親のスタイル設定
- タイプとスペーシングの値を補間
- 信頼性の高いダイアログとポップオーバー
- レスポンシブ HTML の動画と音声
- モバイルでの正しい仮想キーボード
- 未来への展望
コンポーネント固有のスタイリング、子要素に基づく親のスタイリング、相対的な色 - Web プラットフォームはエキサイティングな時代を迎えており、過去には JavaScript が必要だった多くのことが、今日ではHTML と CSS のシンプルな行で実現できるようになっています。
2025年に向けて動き始めている今、モダンブラウザで広く利用でき、サポートされている素晴らしい新技術のいくつかを見直す良い機会です。さっそく、日々の作業を簡素化し、モダンな UI コンポーネントを構築するのに役立つ、新しいテクノロジーについて見ていきましょう。
CSS コンテナクエリとスタイルクエリ
コンポーネント固有のスタイリング？開発者にとって長年の夢だったことが、少しずつ、しかし確実に現実のものとなりつつあります。コンテナ クエリのおかげで、コンポーネントを格納するコンテナの幅とスタイルをクエリできるようになりました。
Una Kravets 氏がスタイル クエリ入門で指摘しているように、現在のところ、これは CSS カスタム プロパティ値でのみ機能します： 特に、複数のバリエーションを持つ再利用可能なコンポーネントがある場合や、すべてのスタイルを制御できるわけではないが特定の場合に変更を適用する必要がある場合に便利です。
コンテナ スタイル クエリで何が可能なのか、そして私たちが（もしかしたら）今後期待できることについてもっと深く知りたい場合は、Geoff Grahamの投稿もぜひご覧ください。彼はスタイルクエリのより微妙な側面を深く掘り下げ、目立った点をまとめています。
泣き別れのタイポグラフィはもういらない
私たちは皆、最後の単語が改行され、単独でそこに立ち、ビジュアルを壊し、奇妙に見える見出しを知っています。もちろん、手動でテキストを改行する古き良き<br>や、コンテンツを異なる部分に分割する<span>もあります。でも、text-wrap: balanceはもうご存知ですか？
text-wrap:balanceプロパティを適用すると、ブラウザは自動的に単語数を計算し、2行で均等に分割します。Ahmad Shadeed氏は、 text-wrap: balanceプロパティの詳細と、見出しをより一貫性のあるものにするのに役立つ方法について、役立つガイドを執筆しています。
段落のような大きなテキスト・ブロックを扱う場合、最終行の孤児を防ぐためにtext-wrap: prettyを調べるとよいでしょう。
フォームのフィールドサイズの自動調整
入力フィールドのちょうど良いサイズを見つけるには、多くの推測作業、または JavaScript が必要です。CSS のフィールドサイジングがそれを変えます。フィールドサイジングを使えば、入力やテキストエリアを自動で大きくしたり、短いセレクトメニューを自動で縮小したりすることができます。これを実現するために必要なのは、1行のCSSだけです。
Adam Argyle氏は、フィールドのサイズ調整について知っておくべきことをすべてまとめ、フィールドのサイズ調整がさまざまな<form>要素にどのように影響するかを詳しく説明しています。入力フィールドが小さすぎたり大きすぎたりするのを防ぐには、フィールドの形を維持する追加のスタイルを挿入するのも良いアイデアです。Adamは、すぐにコピー＆ペーストできるコード・スニペットを共有しています。
隠れたコンテンツを検索可能に
アコーディオンは人気のあるUIパターンですが、折り畳まれたセクション内のコンテンツはページ内検索で検索できないという注意点があります。hidden=until-found属性とbeforematchイベントを使用することで、この問題を解決し、検索エンジンがコンテンツにアクセスできるようにすることができます。
Joey Arhar氏が「折りたたまれたコンテンツを検索可能にするガイド」で説明しているように、セクションを隠すスタイルを hidden=until-found属性で置き換えることができます。もしあなたのページが、セクションが表示されるか否かに同期する必要がある別の状態も持っている場合、彼はbeforematchイベントリスナーを追加することを推奨します。このイベント・リスナーは、hidden=until-found要素がブラウザによって公開される直前に発生します。
セレクトメニュー内のグループのスタイリング
<select>要素の小さなアップグレードですが、強力なものです： 選択オプションのリストに<hr> を追加できるようになり、リスト内のオプションを視覚的に分割するセパレータとして表示されるようになりました。
さらに絞り込みたい場合は、<optgroup> も見てみましょう。HTML 要素では、各グループに小見出しを追加することで、`` 要素内のオプションをグループ化できます。
スクロール可能なコンテナのためのシンプルなスナップ
要素をスクロール可能なコンテナにするために、素早く簡単な方法が必要になることがあります。CSS スクロールスナップはそれを可能にします。この CSS 機能を使用すると、ユーザーが左右に正確にスワイプしてコンテナ内の特定のアイテムにスナップできる、制御性の高いスクロール体験を作成できます。JavaScriptは不要です。
Ahmad Shadeed氏は、スクロールスナップを使ったコンテナの設定手順を順を追って説明する実用的なガイドを書いています。画像ギャラリーやアバターリストなど、水平・垂直を問わずユーザーがコンテンツをスクロールしたりスナップしたりするコンポーネントを作成する際に使用できます。
ツールチップとポップオーバーのアンカーポジショニング
脚注、ツールチップ、コネクターライン、視覚的な相互参照、グラフの動的ラベルなど、CSS Anchor Positioning API を使用すると、アンカーとして知られる他の要素との相対的な位置関係をネイティブに設定できます。
Una Kravets氏によるCSSAnchor Positioning APIの紹介では、アンカーポジショニングがどのように機能するのかが詳しくまとめられています。彼女は、アンカーポジショニングの背後にあるメカニズム、1つまたは複数のアンカーにテザリングする方法、アンカーのサイズに基づいてアンカーポジショニングされた要素のサイズと位置を決定する方法を詳しく見ていきます。ブラウザのサポートはまだ限定的なので、いくつかの注意事項を守ってAPIを使用することをお勧めします。Unaのガイドには注意すべき点が含まれています。
OKLCHとOKLABによる高精細カラー
LCH、okLCH、LAB、okLABによる高精細カラーで、50%以上の色にアクセスできるようになり、RGB/HSLの時代はもうすぐ終わるかもしれません。新しいカラースペースに慣れ親しむために、Vitalyが知っておくべきことの簡単な概要を書きました。
OKLCHとOKLABはどちらも人間の知覚に基づいており、人間の目が見ることができるあらゆる色を指定することができます。OKLABはリッチなグラデーションに最適ですが、OKLCHはデザインシステムのカラーパレットに最適です。OKLCH/OKLABカラーは、Chrome、Edge、Safari、Firefox、Operaで完全にサポートされています。Figmaはまだサポートしていません。
CSS での相対色
背景色があり、その明度を25%下げたい、あるいは自分で計算することなく補色を使いたいとしましょう。相対色構文(RCS)を使えば、指定した色を元に新しい色を作ることができます。
新しい色を導き出したり計算したりするには、色関数 (color(),hsl(),oklch() など) のfromキーワードを使用して入力色の値を変更します。Adam Argyleは、この方法が実際にどのようなものか、いくつかのコード・スニペットを公開しています。
View Transitions API によるスムーズな遷移
スムーズな視覚的遷移がユーザー体験をより魅力的なものにするユースケースは数多くあります。例えば、商品一覧ページのサムネイル画像が商品詳細ページのフルサイズ画像に遷移する場合や、固定ナビゲーションバーがあるページから別のページに移動する際もそのままの位置にある場合などです。View Transitions API は、サイト上の異なるビュー間のシームレスなビジュアル遷移を作成するのに役立ちます。
ビュー遷移は、単一のドキュメント上だけでなく、2つの異なるドキュメント間でもトリガーできます。ブラウザが古い状態と新しい状態のスナップショットを取得し、レンダリングが抑制されている間に DOM が更新され、遷移は CSS Animations によって行われます。唯一の違いは、Bramus Van Damme氏がView Transitions APIのガイドで説明しているように、それらをトリガーする方法にあります。重いJavaScriptフレームワークに依存しがちなシングルページアプリの良い選択肢です。
排他的アコーディオン
排他的アコーディオン」はアコーディオンコンポーネントのバリエーションです。ユーザーが新しいウィジェットを開くと、すでに開いているウィジェットはスペースを節約するために自動的に閉じられます。CSSのおかげで、JavaScriptを1行も使わずにこの効果を作り出すことができます。
排他的アコーディオンを構築するには、<details>要素にname属性を追加する必要があります。この属性を使用すると、同じname値を持つすべての<details>要素がセマンティック・グループを形成し、排他的アコーディオンとして振る舞います。Bramus Van Damme氏が、その仕組みについて詳しくまとめています。
ライブ・バリデーションとレイト・バリデーション
validと :invalidを使用してユーザーの入力に基づいたスタイルを適用する場合、欠点があります：必須で空のフォームコントロールは、ユーザーがまだそれを操作していなくても:invalidにマッチしてしまいます。これを防ぐために、通常はユーザーが変更した入力を追跡するステートフルなコードを書く必要がありました。しかし、今は違います。
user-validと :user-invalidによって、私たちはこれらすべてを自動的に処理するネイティブのCSSソリューションを手に入れました。validと :invalidとは逆に、:user-validと :user-invalid擬似クラスは、ユーザーが入力を変更した後にのみ、間違いに関するフィードバックをユーザーに与えます。:user-validと :user-invalidは、input、select、textareaコントロールで動作します。
スムーズなスクロール動作
スクロールするボックスと、ボックス内のアンカー位置をターゲットとする一連のリンクがあるとします。ユーザーがリンクの 1 つをクリックすると、スクロール ボックス内のコンテンツ セクションに移動します。scroll-behaviorプロパティは、CSSだけでスクロールの遷移をよりスムーズにします。
scroll-behaviorの値をsmoothに設定すると、スクロールボックスは、ユーザーエージェントが定義した期間にわたって、ユーザーエージェントが定義したイージング関数を使用して滑らかな方法でスクロールします。もちろん、scroll-behavior: auto を使用することもでき、その場合はスクロールボックスは即座にスクロールします。
フォーカスの可視化
フォーカス・スタイルは、キーボード・ユーザーがページをナビゲートするのに不可欠です。しかし、マウスユーザーにとっては、ボタンやリンクをクリックしたときにフォーカスのリングが表示されると、イライラすることがあります： キーボード・ユーザーにはフォーカス・スタイルを表示し、マウス・ユーザーには非表示にします。
focus-visibleは、要素が:focus擬似クラスと一致し、ユーザエージェントがヒューリスティックによってその要素にフォーカスを可視にすべきと判断した場合に適用されます。実際にどのように動作するのか気になりませんか？MDN Web Docsでは、 :focusと :focus-visibleの違い、アクセシビリティを考慮する必要がある点、:focus-visibleをサポートしていない古いバージョンのブラウザにフォールバックを提供する方法について説明しています。
子に基づく親のスタイル設定
歴史的に、CSS セレクタはトップダウン方式で動作し、親を基準に子のスタイルを設定できました。新しい CSS 擬似クラス:hasは、その逆の動作をします： 新しいCSS擬似クラス:hasは、その逆の働きをします。しかし、まだそれだけではありません。Josh W. Comeau氏は :hasの素晴らしい入門書を書いており、擬似クラスができることを示す実際の使用例を探求しています。
hasは、親子関係や直接の兄弟関係に限定されません。その代わりに、ある要素を、全く別のコンテナ内の他の要素のプロパティや状態に基づいてスタイルすることができます。Josh が示すように、これは一種のグローバル イベント リスナーとして使用できます。たとえば、モーダルが開いているときにページのスクロールを無効にしたり、JavaScript を使用しないダーク モードのトグルを作成したりできます。
タイプとスペーシングの値を補間
CSSの比較関数min()、max()、clamp()は、今日、すべての主要なブラウザでサポートされており、流動的なタイプスケール、グリッド、スペーシングシステムでダイナミックなレイアウトを作成する効果的な方法を提供しています。
あなたのプロジェクトですぐに関数を使えるように、Ahmad Shadeedは、min()、max()、clamp()について知っておくべきことを、実践的な例や使用例を交えながら、混乱しそうな点をすべて含めて説明する包括的なガイドを書きました。
流体スケールを素早く簡単に作成する方法をお探しなら、Utopiaの流体タイプスケール計算機がお役に立ちます。ビューポート幅の最小値と最大値、そしてスケールのステップ数を定義するだけで、スケールのレスポンシブプレビューとCSSコードスニペットが表示されます。
信頼性の高いダイアログとポップオーバー
モーダルやポップアップをすばやく作成する方法をお探しなら、`` HTML 要素がついにネイティブな（そしてアクセスしやすい！）ソリューションを提供します。これは、モーダルダイアログボックスや非モーダルダイアログボックス、あるいは確認プロンプトやデータ入力用のサブウィンドウのような他のインタラクティブなコンポーネントを表します。
<dialog> メニューと、ブロックしないメニューのためのポップオーバーがあります。
モーダルダイアログボックスはページとのインタラクションを中断しますが、非モーダルダイアログボックスはダイアログが開いている間、ページとのインタラクションを許可します。Adam Argyle 氏は、<dialog>がどのようにしてノンブロッキング・メニューのポップアップやポップオーバーをブロックできるかを示すコード・スニペットを公開しています。
レスポンシブ HTML の動画と音声
2014 年、HTML 標準から HTML 動画ソースのメディア属性サポートが削除されました。昨年、メディア属性は復活し、レスポンシブな HTML 動画を配信するためにメディアクエリを使用できるようになりました。
Scott Jehl 氏は、レスポンシブ HTML 動画（音声も）がどのように機能するか、マークアップを記述する際に考慮する必要があること、HTML 動画と組み合わせて使用できる他のメディア クエリについてまとめました。
モバイルでの正しい仮想キーボード
数字や句読点、＠記号のような特殊文字を入力するために何度も切り替えたりすることなく、ユーザーが情報を入力しやすいタッチスクリーンのキーボードを表示することです。
正しいキーボードレイアウトを表示するには、inputmode. これはどのキーボードを表示するかをブラウザに指示し、数字、電話、10進数、電子メール、URL、検索キーボードの値をサポートします。さらにUXを改善するために、enterkeyhint属性を追加することができます。enterkeyhintが使われない場合、ユーザエージェントはinputmode属性からの文脈情報を使うかもしれません。
未来への展望
私たちのプロジェクトでこれらのピカピカの新しいフロントエンド機能を採用し始めていますが、ウェブプラットフォームはもちろん常に進化しています！例えば、メーソンリーレイアウト、<selectmenu>を使ったフルカスタマイズ可能なドロップダウン、グリッド内でフォントを完璧に揃えるためのテキストボックスのトリミングなどです。ウェブを前進させるためにたゆまぬ努力を続けている素晴らしい人たちに感謝します！👏
とりあえず、この投稿の中に、あなたの製品やアプリケーションにすぐに適用できるような役に立つものが見つかれば幸いです。それではまた！
