From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/html/element/kbd/index.html | 213 +++++++++++++++++++++++++++++++ 1 file changed, 213 insertions(+) create mode 100644 files/ja/web/html/element/kbd/index.html (limited to 'files/ja/web/html/element/kbd/index.html') diff --git a/files/ja/web/html/element/kbd/index.html b/files/ja/web/html/element/kbd/index.html new file mode 100644 index 0000000000..f24b3f9c1f --- /dev/null +++ b/files/ja/web/html/element/kbd/index.html @@ -0,0 +1,213 @@ +--- +title: ': キーボード入力要素' +slug: Web/HTML/Element/kbd +tags: + - Element + - HTML + - HTML 文字レベルの意味付け + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - 'HTML:記述コンテンツ' + - Reference + - Web + - ウェブ + - キーボード + - リファレンス + - 要素 +translation_of: Web/HTML/Element/kbd +--- +
{{HTMLRef}}
+ +

HTML のキーボード入力要素 (<kbd>) はキーボード、音声入力、その他の入力端末からのユーザーによる文字入力を表す行内の文字列の区間を表します。慣習的に、{{Glossary("user agent", "ユーザーエージェント")}}は既定で <kbd> 要素の中身を等幅フォントで表示しますが、 HTML 標準で規定されているものではありません。

+ +
{{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}}
+ + + +

<kbd> は {{HTMLElement("samp")}} (サンプル出力) 要素の中で様々な組み合わせの入れ子が行われ、様々な形の入力や視覚的な合図に基づいた入力を表現します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ
許可されている内容記述コンテンツ
タグの省略{{no_tag_omission}}
許可されている親要素記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール対応するロールなし
許可されている ARIA ロールすべて
DOM インターフェイス{{domxref("HTMLElement")}}
+ +

属性

+ +

この要素にはグローバル属性以外の属性はありません。

+ +

使用上のメモ

+ +

他の要素 <kbd> と組み合わせることで、もっと具体的なシナリオを表現できる場合があります。

+ + + +
+

専用のスタイルを定義して、 <kbd> 要素における既定のフォントの選択を上書きすることができますが、ユーザー設定によっては CSS より優先されることがあります。

+
+ +

例

+ +

基本的な例

+ +
<p>コマンド "mycommand" のドキュメントを参照するには <kbd>help mycommand</kbd>
+コマンドを使用してください。</p>
+
+ +

{{ EmbedLiveSample('Basic_example', 350, 80) }}

+ +

入力時のキー操作の表現

+ +

複数のキー操作から成る入力を表現したい場合、複数の <kbd> 要素を重ねて、外側の <kbd> 要素で入力全体を表し、内側の <kbd> で入力時のそれぞれのキー操作を表すことができます。

+ +

スタイルなし

+ +

最初に、 HTML だけでどのように見えるかを見てみましょう。

+ +
HTML
+ +
<p>キーボードショートカットの
+<kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> を使用して新規文書を作成することもできます。</p>
+ +

ここでは外側の <kbd> 要素でキー入力操作全体を囲み、それぞれのキーの組み合わせを記述するために、それぞれのキーを囲んでいます。

+ +
+

常にこのように囲む必要はありません。外側の <kbd> 要素を省略して簡略化しても構いません。言い換えれば、単に <kbd>Ctrl</kbd>+<kbd>N</kbd> と表現するのも完全に有効です。

+ +

しかし、スタイルシートによっては、このように重ねて囲んだ方が便利だと感じられるかもしれません。

+
+ +
結果
+ +

スタイルシートを適用しないと、出力結果は次のように見えます。

+ +

{{EmbedLiveSample("Unstyled", 650, 80)}}

+ +

専用スタイル付き

+ +

いくらか CSS を追加して、もっと分かりやすくすることができます。

+ +
CSS
+ +

キーボードのキーを表示する際に適用できるスタイル、 <kbd> 要素の key を定義します。

+ +
kbd.key {
+  border-radius: 3px;
+  padding: 1px 2px 0;
+  border: 1px solid black;
+}
+ +
HTML
+ +

それから HTML を更新して、このクラスを出力中のキーに使用するように表現します。

+ +
<p><kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd> を押して新規文書を作成することもできます。</p>
+ +
結果
+ +

結果は私たちが求めているものです。

+ +

{{EmbedLiveSample("With_custom_styles", 650, 80)}}

+ +

入力のエコーバック

+ +

{{HTMLElement("samp")}} 要素内で <kbd> 要素を使用すると、システムからエコーバックされた入力を表現することができます。

+ +
<p>構文エラーが発生すると、このツールは確認のために
+あなたが入力したコマンドを出力します。</p>
+<blockquote>
+  <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
+</blockquote>
+ +

{{EmbedLiveSample("Echoed_input", 650, 100)}}

+ +

画面上に表示された入力の選択肢の表現

+ +

<kbd> 要素の中で <samp> 要素を使用すると、メニューやメニュー項目の名前や、画面上に表示されているボタンの名前など、システムが表示した文字列に基づく入力を表すことができます。

+ +

例えば、「ファイル」メニューの中の「新規文書」を選択する方法を HTML で表現すると、このようになります。

+ +
<p>新規ファイルを作成するには、メニューの
+<kbd><kbd><samp>ファイル</samp></kbd>⇒<kbd><samp>新規文書</samp></kbd></kbd>
+を選択して下さい。</p>
+
+<p>新しいファイルの名前を入力したら、 <kbd><samp>OK</samp></kbd>
+ボタンを押して確認することを忘れないでください。</p>
+ +

これはいくらか興味深い組み合わせです。メニューの選択肢を記述するために、入力全体を <kbd> 要素で囲んでいます。それからその中で、メニューとメニュー項目の名前を <kbd> 及び <samp> の中に入れ、画面上の部品を選択する入力であることを示しています。

+ +

結果

+ +

{{EmbedLiveSample("Representing_onscreen_input_options", 650, 120)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-kbd-element', '<kbd>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-kbd-element', '<kbd>')}}{{Spec2('HTML5 W3C')}}音声入力や個々のキー入力など、どのようなユーザ入力も含むように拡張
{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<kbd>')}}{{Spec2('HTML4.01')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.kbd")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf