Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/kbd below:

<kbd>: ã‚ãƒ¼ãƒœãƒ¼ãƒ‰å…¥åŠ›è¦ç´ - HTML | MDN

Baseline Widely available

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

<p>
  Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an
  MDN page.
</p>

kbd {
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  color: #333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

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

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

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

• 他の <kbd> 要素の中で更に <kbd> 要素を使用すると、もっと大きい入力の中における、実際のキー入力またはその他の入力単位を表します。以下の入力時のキー操作の表現を参照してください。
• <kbd> 要素を <samp> 要素の中で使用すると、システムからユーザーにエコーバックされた入力を表します。以下の入力のエコーバックの例を参照してください。
• 一方、 <kbd> 要素の中で <samp> 要素を使用すると、メニューやメニュー項目の名前、画面上に表示されているボタンの名前など、システムによって表示された文字列に基づく入力を表します。以下の画面上に表示された入力の選択肢の表現を参照してください。

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

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

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

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

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

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

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

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

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

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

キーボードキーのレンダリング時に適用できる、入れ子になっている <kbd> 要素の新しいセレクター、kbd>kbd を追加します。

kbd > kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}

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

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

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

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

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

<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> の中に入れ、画面上の部品を選択する入力であることを示しています。

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4