このページは Cloud Translation API によって翻訳されました。

好みのメディアクエリを使用してユーザー適応インターフェースを構築

1. 始める前に

最近では、ユーザーがデバイスでさまざまな設定を指定しています。オペレーティングシステムとアプリの外観や操作性を自分たちのものに近いものにしたいと考えています。ユーザーアダプティブインターフェースとは、そうした設定を使用してユーザーエクスペリエンスを向上させ、より自宅のように感じてもらうことができるインターフェースです。正しく行えば、ユーザーはユーザーエクスペリエンスが適応していることや、調整されていることにまったく気づかない可能性があります。

ユーザー設定

デバイスのハードウェアは好み、オペレーティングシステムは選択肢、アプリとオペレーティングシステムの色が好み、アプリとオペレーティングシステムのドキュメントの言語がそれぞれ好みです。ユーザーの好みは増加する一方です。ウェブページがすべてにアクセスできるわけではありません。もっともな理由があります。

CSS が使用できるユーザー設定の例を以下に示します。

デバイスのビューポートのサイズ
デバイスの向き（縦向き | 横向き）
フォントサイズ
オンライン / オフライン
ネットワークの品質
カラーパターン（ライト | ダーク）
インターフェースアニメーション（オン | 縮小）
入力の品質（マウス | タップ | タッチペン）
ドキュメントの向きと文書モード（左から右、上から下など）
表示モード（全画面 | スタンドアロン | 最小限の UI | ブラウザ）

CSS で近日公開予定のユーザー設定の例を以下に示します。

データ使用量の削減 / ライトモード
色範囲
コントラスト（低 | 高 | 縮小）
色（ユーザーの色をページに強制的に表示します）
透明性（オン | 低下）

メディアクエリ

CSS とウェブでは、メディアクエリを通じて適応と応答性を実現しています。メディアクエリとは、この条件が満たされている場合、一連のスタイルを含む宣言型の条件です。最も一般的なのは、デバイスのビューポートサイズに関する条件です。サイズが 800 ピクセル未満の場合は、適切なスタイルがあります。

ユーザー適応性

適応性に欠けるインターフェースとは、ユーザーがアクセスしても何も変わらないインターフェースです。基本的には、調整できない単一のエクスペリエンスをすべてのユーザーに提供します。ユーザー適応型インターフェースは、5 人のユーザーに対応して 5 種類のデザインとスタイルを用意できます。機能は同じですが、UI を調整できるユーザーにとって、見た目が良くなり、ユーザビリティが以前よりも向上しています。

前提条件

HTML と CSS に関する知識
デベロッパーツール（Google Chrome デベロッパーツールなど）に関する知識

作成するアプリの概要

この Codelab では、以下に適合するユーザー適応フォームを作成します。

フォームコントロールと周囲の UI 要素のライトとダークのカラーパターンを提供することによる、システムのカラーパターン設定。
複数のタイプのアニメーションを提供することで、システムのモーション設定。
モバイルとデスクトップのエクスペリエンスを提供するデバイスのビューポートの大きさ
各種の入力タイプ（キーボード、スクリーンリーダー、タップ、マウスなど）
すべての言語とリーディング/ライティングモード

学習内容

この Codelab では、ユーザー適応フォームの作成に役立つ最新のウェブ機能について学びます。次の方法について学びます。

ライトモードとダークモードをオンにする
アニメーション化されたアクセス可能なフォームを作成する
レスポンシブフォームのレイアウト
相対単位と論理プロパティを使用する

この Codelab は、ユーザーアダプティブインターフェースに焦点を当てています。関連のない概念やコードブロックについては詳しく触れず、コードはコピーして貼るだけの状態で提供されています。

必要なもの

Google Chrome 89 以降または任意のブラウザ

2. セットアップする

コードを取得する

このプロジェクトに必要なすべてのものは GitHub リポジトリにあります。まず、コードを取得して、お好みのデベロッパー環境で開きます。または、この Codepen をフォークして、そこから作業することもできます。

推奨: Codepen を使用する

新しいブラウザタブを開きます。
https://codepen.io/argyleink/pen/abBMeeq にアクセスします。
アカウントをお持ちでない場合は、アカウントを作成して作業内容を保存してください。
[Fork] をクリックします。

別の方法: ローカルで作業する

コードをダウンロードしてローカルで作業する場合は、Node.js バージョン 12 以降とコードエディタの設定と準備が必要です。

Git を使用する

https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces をご覧ください。
リポジトリのクローンをフォルダに作成します。
デフォルトのブランチは beginning です。

ファイルを使用する

ダウンロードした zip ファイルをフォルダに展開します。

プロジェクトを実行する

上記の手順のいずれかで確立したプロジェクトディレクトリを使用して、次の操作を行います。

npm install を実行して、サーバーの実行に必要な依存関係をインストールします。
npm start を実行して、ポート 3000 でサーバーを起動します。
新しいブラウザタブを開きます。
http://localhost:3000 に移動します。

HTML について

このレッスンでは、ユーザー適応型のインタラクティビティをサポートする HTML の側面について説明します。このワークショップでは、CSS に特に重点を置いています。フォームやウェブサイトを初めて作成する場合は、提供される HTML を確認することをおすすめします。アクセシビリティやレイアウトに関しては、HTML 要素の選択が重要です。

開始する準備ができたら、これが動的で適応性の高いユーザーエクスペリエンスに変換するための土台となります。

3. アダプティブインタラクション

Git ブランチ: beginning

このセクションの終わりまでに、設定フォームは以下に合わせて適応されます。

ゲームパッド + キーボード
マウス+タップ
スクリーンリーダーなどの支援技術

HTML の属性

フォームの入力のグループ化、順序、ラベル付けに役立つセマンティック要素がすでに選択されているため、ソースコードで提供される HTML は出発点として最適です。

フォームはビジネスで重要なインタラクションポイントとなることが多いため、ウェブで促進できるさまざまなタイプの入力にフォームが適応できることが重要です。たとえば、モバイルでのタップ操作に対応したフォームを用意することが重要になります。このセクションでは、レイアウトとスタイルを設定する前に、アダプティブ入力のユーザビリティを確認します。

入力のグループ化

HTML の <fieldset> 要素は、類似する入力やコントロールをグループ化するために使用します。フォームには、音量用と通知用の 2 つのグループがあります。これは、セクション全体をスキップできるよう、ユーザーエクスペリエンスにとって重要です。

要素を並べ替える

要素の順序は論理的な順序で示されます。これはユーザーエクスペリエンスにとって重要な要素であり、ゲームパッド、キーボード、スクリーンリーダーのテクノロジーの視覚的エクスペリエンスの順序は同一または類似しています。

キーボード操作

ウェブのユーザーは Tab キーを使用してフォーム内を移動するのに慣れています。しかし、ユーザーが予期した HTML 要素を提供すると、Tab キーがブラウザによって処理されます。<button>、<input>、<h2>、<label> などの要素を使用すると、自動的にキーボードまたはスクリーンリーダーのデスティネーションになります。

上の動画は、Tab キーと Tab キーを使用してインターフェース内を移動して変更を加える方法を示しています。青い枠線は入力要素の周囲をかなりタイトしているため、次のスタイルを追加して、このやり取りに少し余裕を持たせます。

style.css

input {
  outline-offset: 5px;
}

次の方法をお試しください

index.html で使用されている HTML 要素を確認します。
ブラウザでデモページをクリックします。
tab キーと shift+tab キーを押して、フォーム内で要素のフォーカスを移動します。
キーボードを使用して、スライダーとチェックボックスの値を変更します。
Bluetooth ゲームパッドコントローラを接続し、フォーム内で要素のフォーカスを移動します。

マウス操作

ウェブのユーザーは、マウスでフォームを操作することに慣れています。フォーム上でマウスを使ってみてください。スライダーとチェックボックスは機能しますが、もっとうまく作れます。これらのチェックボックスは、マウスでクリックできる範囲がかなり小さくなっています。

ラベルとその入力を結び付けるために、2 つのユーザーエクスペリエンス機能がどのように利用できるかをご覧ください。

1 つ目の特徴は操作用のオプションがあることです。そのため、マウスは小さな正方形よりラベルをターゲットとして指定しやすくなります。

2 つ目の特徴は、ラベルがどの入力を対象としているかを正確に把握することです。現時点では、CSS を使用しない場合は、複数の属性を指定しない限り、どのラベルがどのチェックボックスなのかを判断するのは非常に困難です。

この明示的な接続により、次のセクションで解説するスクリーンリーダーのエクスペリエンスも向上します。

関連付けなし: 要素をつなぐ属性がない

<input type="checkbox">
<label>...</label>

関連: 要素を接続する属性

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

指定された HTML では、すべての入力とラベルがすでにアトリビューションされています。これが新しいコンセプトであるかどうかについては、さらに調査する必要があります。

次の方法をお試しください

ラベルにカーソルを合わせると、チェックボックスがハイライト表示されます。
Chrome デベロッパーツールでラベル要素を調べ、チェックボックスを選択できるクリック可能な表示領域を可視化します。

支援技術はこのフォームと相互作用でき、いくつかの HTML 属性を使用して、ユーザーエクスペリエンスをよりスムーズにすることができます。

ユーザーが Chrome でスクリーンリーダーを使用して現在のフォーム内を移動する場合、<picture> 要素に不要な停止位置があります（Chrome 固有ではありません）。スクリーンリーダーを使用しているユーザーは、視覚障がいのためにスクリーンリーダーを使用している可能性が高いため、画像で止めても役に立ちません。属性を使用して、スクリーンリーダーで要素を非表示にできます。

index.html

<picture aria-hidden="true">

これで、スクリーンリーダーは純粋に視覚的な要素を渡すようになりました。

スライダー要素 input[type="range"] には、特別な ARIA 属性 aria-labelledby="media-volume" が含まれています。スクリーンリーダーは、ユーザーエクスペリエンスを向上させるための特別な指示になります。

次の方法をお試しください

オペレーティングシステムのスクリーンリーダー技術を使用して、フォーム内のフォーカスを移動します。
フォームからスクリーンリーダーソフトウェアをダウンロードして試します。

4. アダプティブレイアウト

Git ブランチ: layouts

このセクションを終了すると、設定ページで次のことが可能になります。

カスタムプロパティとユーザーの相対単位を使用して間隔のシステムを作成する
CSS グリッドを作成して、柔軟でレスポンシブな配置と間隔を実現する
グローバルなアダプティブレイアウトに論理プロパティを使用する
コンパクトなレイアウトと広々としたレイアウトに適応するメディアクエリを作成する

間隔

適切なレイアウトを実現するための鍵は、限られたスペースのオプションパレットです。これにより、コンテンツは自然なアライメントやハーモニーを見出すことができます。

カスタムプロパティ

このワークショップは、7 種類のカスタムプロパティサイズを基盤としています。

以下の行を style.css の先頭に追加します。

style.css

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

この名称は、空間を説明するために人々が互いに使用する言い回しに近いものです。また、ユーザーの好みに配慮でき、全体的に判読できるサイズにするためにも、rem 単位を使用します。

ページのスタイル

次に、ドキュメントスタイルを設定し、要素の余白を削除して、フォントを適切な Sans Serif に設定する必要があります。

style.css に以下を追加します。

style.css

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

最初の演習では、間隔カスタムプロパティを使用します。これで宇宙の旅が始まります。

タイポグラフィ

このレイアウトのフォントはアダプティブです。system-ui キーワードは、ユーザーのオペレーティングシステムによって最適なインターフェースフォントであると判断したフォントを使用します。

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

h1、h2、h3 のスタイルは、マイナーかつスタイルです。ただし、small 要素では、テキストの折り返し時に追加の line-height が必要です。そうでなければ、膨らませすぎている。

論理プロパティ

body の padding では、論理プロパティ（block-start、block-end）を使用して側面を指定しています。論理プロパティは、この Codelab の残りの部分で幅広く使用されます。これも、rem ユニットと同様に、ユーザーに適応します。このレイアウトは、別の言語に翻訳したり、ユーザーの母国語でなじみのある自然な文章やドキュメントの指示にしたりできます。論理プロパティを使用すると、スペース、方向、配置の 1 つの定義のみを使用してこれをサポートできます。

グリッドとフレックスボックスは、すでにフロー相対です。つまり、ある言語用に記述されたスタイルは、コンテキストに即して他の言語にも適切に適用されます。アダプティブな方向性コンテンツの方向性に左右されます。

論理プロパティを使用すると、記述するスタイルを減らして、より多くのユーザーにリーチできます。

CSS グリッドレイアウト

grid CSS プロパティは、複雑なタスクに対処するための多くの機能を備えた強力なレイアウトツールです。シンプルなグリッドレイアウトと複雑なレイアウトをそれぞれ 1 つずつ作成します。また、マクロレイアウトからマイクロレイアウトまで、外部から作業します。スペースのカスタムプロパティは、パディングやマージンの値だけでなく、列のサイズ、枠線の半径なども重要になります。

次のスクリーンショットでは、Chrome DevTools で各 CSS グリッドレイアウトを同時に重ねています。

style.css に次の各スタイルを追加します。

<main>

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);
}

グリッドでは、デフォルトで各子要素が個別の行に配置されるため、要素の積み重ねに適しています。また、gap を使用するという利点もあります。先ほど、* セレクタを使用してすべての要素に margin: 0 を設定しました。これは、間隔に gap を使用する場合に重要になります。ギャップは、コンテナ内のスペースを 1 か所で管理できるだけでなく、相対的なフローでもあります。

<form>

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

このデザインのグリッドレイアウトは最も扱いにくいものですが、レスポンシブという最も魅力的な要素について説明されています。

max-width は、サイズを決定するときに使用するレイアウトアルゴリズムの値を指定します。
gap がカスタムプロパティを使用しており、column-gap とは異なる row-gap を渡しています。
アイテムの高さを引き延ばさないよう、align-items は flex-start に設定されています。
grid-template-columns の構文は複雑ですが、簡潔なものが目標です。列の幅を 35ch とし、10ch 以上にすること。余裕があれば列を列に入れ、それ以外は行を許容する。

ブラウザのサイズを変更してみましょう。小さなビューポートではフォームが行に折りたたまれますが、余裕があれば新しい列に流れ込み、メディアクエリなしで適応します。メディアクエリのないレスポンシブスタイルのこの戦略は、コンポーネントやコンテンツ中心のレイアウトで特に役立ちます。

<section>

section {
  display: grid;
  gap: var(--space-md);
}

各セクションは、子要素の間に中程度の間隔を空けた行のグリッドにする必要があります。

header {
  display: grid;
  gap: var(--space-xxs);
}

各ヘッダーは行のグリッドとし、子要素の間にはさらに小さなスペースを入れてください。

<fieldset>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

このレイアウトは、カードのような外観を作成し、入力をグループ化します。overflow: hidden と gap: 1px は、次のセクションで色を追加すると明確になります。

.fieldset-item

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

このレイアウトでは、アイコンとチェックボックスを、関連するラベルやコントロールとともに中央に配置します。グリッドテンプレートの最初の列 var(--space-lg) は、アイコンよりも幅の広い列を作成するため、子要素が中央に配置されます。

このレイアウトは、カスタムプロパティですでにいくつの設計上の決定が行われているかを示しています。パディング、ギャップ、列はすべて、すでに定義した値を使用して、システムの調和の範囲内でサイズ設定されていました。

.fieldset-item <画像>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

このレイアウトでは、設定、アイコンの円のサイズ、円形の作成、その中の画像の中央配置を行います。

画像>&[checkbox] 配置" id="picture-[checkbox]-alignment" is-upgraded="" tabindex="-1"><画像>および[checkbox] 配置

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

このレイアウトでは、:is 疑似セレクタを使用して、画像要素とチェックボックス要素の中央に配置が分離されています。

次のように、セレクタ picture > svg を .fieldset-item svg に置き換えます。

.fieldset-item <svg>

.fieldset-item svg {
  block-size: var(--space-md);
}

svg アイコンのサイズをサイズ表記の値に設定します。

.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

チェックボックスのラベル要素用のユーティリティクラスで、チェックボックスのヘルパーテキストを間隔を空けます。

input[type="checkbox"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

これらのスタイルでは、間隔セットの値を使用してチェックボックスのサイズが大きくなります。

次の方法をお試しください

Chrome デベロッパーツールを開き、[Elements] パネルで HTML のグリッドバッジを確認します。これらをクリックしてデバッグツールを有効にします。
Chrome デベロッパーツールを開き、[スタイル] ペインのギャップにカーソルを合わせます。
Chrome デベロッパーツールを開き、[スタイル] ペインで [スタイル] から [レイアウト] に切り替えます。この領域を探索するには、設定を切り替えて、レイアウトをオンにしてください。

メディアクエリ

次の CSS は、ビューポートのサイズと向きに基づいてスタイルを調整し、ビューポートのコンテキストに合わせて間隔や配置が最適になるように調整します。

<main>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

これら 2 つのメディアクエリでは、ビューポートのスペースが増えるほど main のパディングが追加されます。つまり、最初は小さなパディングからスタートしますが、スペースが増えるにつれてスペースも大きくなります。

<form>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

フォームはすでに auto-fit でビューポートのサイズにレスポンシブですが、モバイルデバイスでのテストでは、デバイスを横向きにしても 2 つのフォームグループが並べて表示されることはありません。orientation メディアクエリとビューポートの幅をチェックして、この横向きのコンテキストに適応します。次に、デバイスが横向きで、幅が 640 ピクセル以上の場合、--repeat カスタムプロパティを auto-fit キーワードではなく数値に切り替えて、2 列を強制的に作成します。

.fieldset-item

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

このメディアクエリは、ビューポートのスペースが十分にあるときにスペースを広げます。グリッドテンプレートでは、テンプレート内の大きいカスタムプロパティ（var(--space-xxl)）を使用して、最初の列が展開されています。パディングは、より大きなカスタムプロパティにも取り込まれます。

次の方法をお試しください

ブラウザを広げたり縮めたりして、スペースの変化を観察します。
モバイルデバイスでプレビューする
モバイルデバイスで横向きでプレビューする

5. アダプティブカラー

Git ブランチ: colors

このセクションを終えると、設定フォームは次のようになります。

暗い色と明るい色の設定に調整する
ブランドの 16 進数から導出されたカラーパターンがある
アクセシブルな色を使用する

HSL

次のセクションでは、HSL を使用してカラーシステムを作成し、ライトモードとダークモードを作成します。CSS の中核的なコンセプトである calc() に基づいて構築されています。

HSL は、色相、彩度、明度の略です。色相は角度で、時計上の一点のようなものですが、彩度と明度はパーセンテージです。calc() は、パーセンテージと角度の計算を行うことができます。CSS では、これらのパーセンテージに対して明度と彩度を計算できます。カラーチャネル計算とカスタムプロパティを組み合わせると、基本カラーからバリエーションが計算される、最新のダイナミックカラーパターンが完成します。これにより、少数の色をコードで管理する必要がなくなります。

カスタムプロパティ

このセクションでは、他のスタイルで使用するカスタムプロパティのセットを作成します。先ほど :root タグで作成した間隔設定と同様に、色を追加します。

アプリのブランドカラーは #0af とします。最初のタスクでは、この 16 進数の色値を HSL の色値 hsl(200 100% 50%) に変換します。この変換により、HSL でブランドのカラーチャネルが明らかになります。これに対して calc() を使用して、さまざまなサポートブランドカラーを計算できます。

このセクションの次のコードブロックは、それぞれ同じ :root セレクタに追加する必要があります。

ブランドチャンネル

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

3 つの HSL チャネルが抽出され、独自のカスタムプロパティに配置されています。

3 つのプロパティをすべてそのまま使用し、ブランドカラーを再現します。

ブランド

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

カラーパターンはデフォルトで暗いため、暗いサーフェスで使用するために色の彩度を下げることをおすすめします（そうしないと、目が振動したりアクセスできなくなったりします）。ブランドカラーの彩度を下げるには、色相と明度をそのまま使用しますが、彩度を半分に分割します（calc(var(--saturation) / 2)）。ブランドカラーはテーマに沿って適切ですが、使用すると彩度が低くなります。

テキスト

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

ダークモードの読み上げテキストでは、ブランドの色調をベースとして使用し、そこから白に近い色を作成します。多くのユーザーはテキストが白であると感じるでしょうが、実際には非常に薄い青色です。色相を守ることは、デザインのハーモニーを生み出す強力な方法です。--text1 は白色が 85%、--text2 が 65% 白色です。どちらも彩度がほとんどありません。

プロジェクトにコードを追加したら、Chrome デベロッパーツールを開いて、チャネルの値を変更します。HSL とそのチャンネルの相互作用を把握しましょう。好みの彩度を高くまたは低くしたい場合があります。

画面

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

ダークモードではサーフェスが暗くなるため、テキストが非常に明るくなります。テキストの色に高い明度の値（85% 以上）が使用されていた場合、サーフェスでは低い値（30% 以下）が使用されます。サーフェスとテキストの明度に適切な幅を設けることで、ユーザーが読みやすい色にできます。

色は、明度 10%、彩度 10% の最も暗いグレーから始まり、薄くなるにつれて彩度が下がります。新しいサーフェスはそれぞれ以前のサーフェスより 5% 軽量になりました。明るいサーフェスでは、彩度も少し低下します。サーフェスの彩度をすべて 10% にしてみてください。その方が好みではないか？

ライトモード

ダークモードを指定するテキストとサーフェスの色の正常なセットを確認したら、prefers-color-scheme メディアクエリ内のカラーカスタムプロパティを更新して、ライトモードの設定に適応させます。

同じ手法を使用して、サーフェスとテキストの色の明度の値に大きな差を持たせ、色のコントラストをうまく維持します。

ブランド

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

1 つ目はブランドカラーです。彩度を最大限まで戻す必要がある。

テキスト

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

ダークモードで非常に薄い青色のテキスト色だったのと同様に、ライトモードではテキストの色が非常に濃い青色になります。HSL 色の明度の値が 10% と 30% の場合は、これらの色が暗いことがわかります。

Surface

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

これらのサーフェスカラーは、最初にパターンを破るものです。ここまではかなり合理的で直線的だと思っていたことが、今では壊れています。良い点は、コード内で HSL ライトテーマカラーの組み合わせを試し、明度と彩度を調整して、クールで青すぎない素晴らしいライトカラーパターンを作成できることです。

カラーシステムを使用する

色が定義されたので、次は色を使用します。ポップなアクセントのブランドカラー、テキストの色が 2 色、サーフェスの色が 4 色になっています。

以下のコードセクションでは、一致するセレクタを見つけて、その色の CSS を既存のコードブロックに追加します。

<body>

body {
  background: var(--surface1);
  color: var(--text1);
}

ページのプライマリカラーは、最初に作成したサーフェスとテキストの色です。デフォルトのコントラストの強さも最大に設定されます。ライトとダークの切り替えをテストできるようになりました。

<fieldset>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

これは、カードのようなデザインの要素です。1 ピクセルの枠線と 1 ピクセルのギャップは同じ色で、各 .fieldset-item の背後にあるサーフェスを表します。これにより、視覚的なハーモニーがよくなり、管理も簡単になります。

.fieldset-item

.fieldset-item {
  background: var(--surface3);
}

各フォーム入力はそれぞれのサーフェスにあります。これらがどのように組み合わされ、明度のバリエーションがどのように重なり合っているかをおわかりいただけたでしょうか。

.fieldset-item >画像

.fieldset-item > picture {
  background: var(--surface4);
}

これは、アイコンを囲む円の形状を示すためのスタイルの選択です。次のセクションでインタラクションを追加すれば、その理由が明らかになります。

.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

フォーム内のアイコンは、代替テキスト --text2 を使用するように設定されています。塗りつぶしアイコンをテキストよりもわずかに明るくして、重すぎた印象を与えないデザイン。

.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

このセレクタは、内部入力の 1 つが操作されたときに入力コンテナ要素と一致し、SVG をターゲットにしてブランドのアクセントでハイライト表示します。これにより、フォームの優れた UX フィードバックが得られ、入力を操作すると、関連するアイコン画像がハイライト表示されます。

<small>

small {
  color: var(--text2);
}

小さい文字のテキストです。ヘッダーや段落（主要なコンテンツ）と比較すると、やや控えめな表現にします。

ダークフォームコントロール

:root {
  color-scheme: dark light;
}

最後に、このページがダークモードとライトモードの両方に対応していることをブラウザに伝えます。ブラウザにはダークフォームコントロールが備わっています。

6. アダプティブアニメーション

Git ブランチ: animations

このセクションを終了すると、設定ページで次のことが可能になります。

ユーザーのモーションの設定に適応する
ユーザー操作に応答する

モーションの軽減 / 動きなし

オペレーティングシステムにあるモーションに関するユーザー設定に、アニメーションなしの値を指定することはできません。このオプションは、動きの軽減です。クロスフェードアニメーションや色遷移などは、動きの軽減を好むユーザーに適しています。

この設定ページでは、画面上での動きはほとんどありません。モーションは、むしろスケール効果であり、要素がユーザーの方向に進んでいるようなものです。小さな動きに対応するために CSS コードを調整するのはとても簡単です。そのため、スケーリングの遷移を減らすことができます。

インタラクションスタイル

<fieldset>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

ユーザーが <fieldset> カードのような要素のいずれかの入力を操作すると、リフティング効果が追加されます。インターフェースは要素を前進させ、コンテキストに応じたフォームグループがユーザーの元に届くときに、ユーザーが集中できるようにします。

.fieldset-item

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

ユーザーが入力を操作すると、特定のアイテムレイヤの背景がハイライトされたサーフェス色に変わります。これは、ユーザーの注意を引き、入力を受け取ったことを知らせるのに役立つもう 1 つのサポートインターフェース機能です。ほとんどの場合、色の遷移を減らす必要はありません。

.fieldset-item >画像

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

以下は、モーションの軽減に関してユーザーに好みがない場合にのみ使用する clip-path アニメーションです。最初のセレクタとスタイルでは、円のクリップパスを 10% 制限し、遷移パラメータを設定します。2 つ目のセレクタとスタイルは、ユーザーが入力を操作するまで待ってから、アイコンの円をスケールアップします。控えめながらも問題のない効果を期待できます。

7. 完了

Git ブランチ: complete

これで、ユーザーアダプティブインターフェースを作成できました。

さまざまなユーザーシナリオや設定に適応するインターフェースを作成するために必要な主な手順を学習しました。

好みのメディアクエリを使用してユーザー適応インターフェースを構築

1. 始める前に

ユーザー設定

メディアクエリ

ユーザー適応性

前提条件

作成するアプリの概要

学習内容

必要なもの

2. セットアップする

コードを取得する

推奨: Codepen を使用する

別の方法: ローカルで作業する

HTML について

3. アダプティブ インタラクション

HTML の属性

入力のグループ化

要素を並べ替える

キーボード操作

style.css

次の方法をお試しください

マウス操作

次の方法をお試しください

スクリーン リーダーの操作

index.html

次の方法をお試しください

4. アダプティブ レイアウト

間隔

カスタム プロパティ

style.css

ページのスタイル

style.css

タイポグラフィ

論理プロパティ

CSS グリッド レイアウト

<main>

<form>

<section>

<header>

<fieldset>

.fieldset-item

.fieldset-item <画像>

画像>&amp;[checkbox] 配置" id="picture-[checkbox]-alignment" is-upgraded="" tabindex="-1"><画像>および[checkbox] 配置

.fieldset-item <svg>

.sm-stack

input[type=&quot;checkbox&quot;]

次の方法をお試しください

メディアクエリ

<main>

<form>

.fieldset-item

次の方法をお試しください

5. アダプティブ カラー

HSL

カスタム プロパティ

ブランド チャンネル

ブランド

テキスト

画面

ライトモード

ブランド

テキスト

Surface

カラーシステムを使用する

<body>

&lt;fieldset&gt;

.fieldset-item

.fieldset-item >画像

.fieldset-item svg

.fieldset-item:focus-within svg

&lt;small&gt;

ダーク フォーム コントロール

6. アダプティブ アニメーション

モーションの軽減 / 動きなし

インタラクション スタイル

&lt;fieldset&gt;

.fieldset-item

.fieldset-item >画像

7. 完了

3. アダプティブインタラクション

スクリーンリーダーの操作

4. アダプティブレイアウト

カスタムプロパティ

CSS グリッドレイアウト

画像>&[checkbox] 配置" id="picture-[checkbox]-alignment" is-upgraded="" tabindex="-1"><画像>および[checkbox] 配置

input[type="checkbox"]

5. アダプティブカラー

カスタムプロパティ

ブランドチャンネル

<fieldset>

<small>

ダークフォームコントロール

6. アダプティブアニメーション

インタラクションスタイル

<fieldset>