CSS 基本ユーザーインターフェイス

基本ユーザーインターフェイスの実例

基本ユーザーインターフェイスプロパティが UI 機能の外観をどのように変化させるかを見るには、この例の要素を操作してください。なお、このサンプルの機能の中には、使い勝手を向上させるものもあれば、ユーザー体験を損なうものもあります。

<div><span contenteditable>このテキストを編集</span></div>
<fieldset>
  <legend>これらのフォームコントロールを操作してみましょう</legend>
  <input type="checkbox" id="check" />
  <input type="radio" name="a" />
  <input type="radio" name="a" />
  <input type="range" />
  <progress></progress>
</fieldset>
<fieldset>
  <legend>ユーザビリティを台無しにしないよう注意してください。これらのサイズを変更してみてください。</legend>
  <textarea>
  cursor: wait;
  </textarea>
  <textarea>
  resize: none;
  </textarea>
  <textarea>
  pointer-events: none;
  </textarea>
</fieldset>

body {
  font-family: sans-serif;
  font-size: 1.25rem;
}
[contenteditable] {
  cursor: copy;
  caret-color: magenta;
  border: 1px solid #cccccc;
}
:focus {
  outline: dashed magenta 3px;
  outline-offset: 10px;
}
* {
  accent-color: magenta;
}
div,
fieldset {
  margin: 20px;
}
textarea:nth-of-type(1) {
  cursor: wait;
}
textarea:nth-of-type(2) {
  resize: none;
}
textarea:nth-of-type(3) {
  pointer-events: none;
}

CSS の outline と outline-offset プロパティは、どの要素が現在フォーカスを持っているかをユーザーにフィードバックするために使用されました。 accent-color は、すべてのフォームコントロールにテーマ色を提供します。テキスト編集時に現れるキャレットは、 caret-color プロパティのおかげで同じ色になっています。これらはすべて UI の改善と考えることができます。

いくつかの機能はユーザビリティを損ないます。 cursor プロパティは、ブラウザー既定値からカーソルを変更するために使用され、混乱を招きます。 resize プロパティは 2 つ目の <textarea> がリサイズ可能になるのを防ぎ、 pointer-events プロパティは 3 つ目の <textarea> がクリックイベントを受け取るのを防ぎます。キーボードを使用してフォーカスを移動することは可能です。

上記の例の "Play" クリックすると、 MDN Playground でこのアニメーションのコードを見たり編集したりすることができます。

リファレンス

プロパティ

• accent-color
• appearance
• caret-animation
• caret-color
• caret-shape
• cursor
• interest-delay、以下の一括指定
  • interest-delay-start
  • interest-delay-end
• outline、以下の一括指定
  • outline-color
  • outline-style
  • outline-width
• outline-offset
• pointer-events
• resize
• user-select

CSS 基本ユーザーインターフェイスモジュールは、caret、nav-down、nav-left、nav-right、nav-up の各プロパティも定義しています。今のところ、これらの機能に対応しているブラウザーはありません。

ガイド

フォームの学習: フォームへの高度なスタイル設定

appearance を使用してフォームコントロールをスタイル設定する方法を説明します。

関連概念

• CSS の cursor プロパティ
• SVG の cursor 属性
• CSS の :focus, :focus-within, :focus-visible 擬似クラス
• CaretPosition インターフェイス

仕様書

関連情報

• Tips for Designing Useful and Usable Focus Indicators (2016)