HTML辞典 samp要素、kbd要素、code要素、var要素の解説

ギフト・ポイントGet!
HTML辞典 HTML辞典
この記事は約9分で読めます。

プログラム関連のテキストを表す<samp>タグ(サンプル)、コンピュータへ入力する内容を示す<kbd>タグ(キーボード)、プログラム関連のテキストを表す<code>タグ(コード)、プログラム関連のテキストを表す<var>タグ(バリアブル)の基本的な使用方法の掲載

HTML5

スポンサーリンク

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

カテゴリー・コンテンツモデル

カテゴリー コンテンツモデル
samp要素(作品タイトルを表す ・パルパブルコンテンツ
・フローコンテンツ
・フレージングコンテンツ
フレージングコンテンツ
kbd要素(コンピュータへ入力を表す)
code要素(語句単位での引用を表す)
var要素(略称を表す)

グローバル属性(共通)

グローバル属性は、すべての要素に指定できる共通の属性のことです。

accesskey(アクセスキー)

要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。

autocapitallze

入力/編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します

内容
offまたはnone自動的な大文字化は指定しない
onまたはsentences最初の文字を大文字化する
words各語の最初の文字を大文字化する
charactersすべての文字を大文字化する

class(クラス)

要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。

contenteditable(コンテント・エディタブル)

要素の内容が閲覧者による編集可能かどうか指定します。

内容
trueまたは、空閲覧者による編集可能。
false閲覧者による編集不可。

data-

カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。

dir(ディレクショナリティ)

要素の内容の書字方向(文字を書き進める方向)を指定します。

内容
ltrテキストを左から右へ書き進める。「Left to Righ」の略
rtl要素は編集不可。「Right to Left」の略
autoユーザーエージェントによって自動的に書字方向を決める

draggable

Drag and Drop APIを使用して要素をドラッグすることができるか指定します。

内容
テキストを左から右へ書き進める。「Left to Righ」の略
autoユーザーエージェントによって自動的に書字方向を決める

hidden(ヒドゥン)

要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。(商品IDやユーザーID)

id(アイディー)

要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。

空白文字は使用できません。

lang(ランゲージ)

要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。

例:lang=”ja”

spellcheck(スペルチェック)

要素の内容に対するスペルチェックの可否を指定します。

trueスペルチェックをします。
falseスペルチェックをしません。

style(スタイル)

要素に直接スタイルシートを指定します。

※style属性でスタイルを指定する方法はあまり推奨されていません。

tabindex(タブインデックス)

「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。

title(タイトル)

要素に補足情報を加えます

translate(トランスレート)

翻訳対象にするかどうかを指定します。

内容
yes翻訳対象とする
no翻訳非対象とする

イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。

onclick

要素をクリックしたときにスクリプトを実行します。

oninput

入力コントロールにデータを入力したときにスクリプトを実行します。

onsubmit

入力コントロールからデータを送信するときにスクリプトを実行します。

samp要素

書式・概要

<samp>~</samp>

var要素は、変数や引数を示す場合に使用します。var要素はイタリックで表示されます。

kbd要素

書式・概要

<kbd>~</kbd>

kbd要素は、ユーザがキーボードなどで入力する内容を示す際に使用します。キーボードだけではなく、音声コマンドのような入力も表せます。<kbd>タグを入れ子にすることで特定のキーを操作することを表せます。

kbd要素とsamp要素の使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>kbd要素とsamp要素 サンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
      <p>
         DOSコマンドプロンプトから<kbd>dir</kbd>と入力してみましょう
      </p>
      <p>
         <samp>パスがありません</samp>
      </p>
  </body>
</html>

実行サンプル

chrome実行サンプル

kbd要素、samp要素の基本的な使用方法のchrome実行サンプル

Firefox実行サンプル

kbd要素、samp要素の基本的な使用方法のfirefox実行サンプル

edge 実行サンプル

kbd要素、samp要素の基本的な使用方法のedge実行サンプル

opera 実行サンプル

kbd要素、samp要素の基本的な使用方法のopera実行サンプル

code要素

インラインレベル要素

書式・概要

<code>~</code>

code要素は、プログラムなどのソースコードで示す場合に使用します。ソースコード中の空白による字下げもそのまま表示させたい場合には、同時にpre要素も使用します。一般的なブラウザでは、code要素は等幅フォントで表示されます。

使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>code要素 サンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
      <h1>JavaScriptソースコード</h1>
      <pre>
        <code>
               <p>志摩にある横山展望台</p>
               <p id="place">〒517-0501 三重県志摩市阿児町鵜方875-20</p>
               <button onClick="getElement();">要素を取得</button>
               <script>
                   function getElement(){
                       let element = document.getElementById('japanmap');
                       console.log('場所: ' + element.textContent);
                   }
               </script>
        </code>
      </pre>
  </body>
</html>

実行サンプル

chrome実行サンプル

code要素の基本的な使用方法のchrome実行サンプル

Firefox実行サンプル

code要素の基本的な使用方法のfirefox実行サンプル

edge 実行サンプル

code要素の基本的な使用方法のedge実行サンプル

opera 実行サンプル

code要素の基本的な使用方法のopera実行サンプル

var要素

書式・概要

<var>~</var>

var要素は、文章に変数や引数を示す場合に使用します。var要素はイタリックで表示されます。

使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>var要素 サンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
      <h1>JavaScriptソースコード</h1>
      <pre>
        <code>
               <p>志摩スペイン村</p>
               <p id="place">〒517-0212 三重県志摩市磯部町坂崎 字下山952-4</p>
               <button onClick="getElement();">要素を取得</button>
               <script>
                   function getElement(){
                       //varあり
                       let <var>element</var> = document.getElementById('japanmap');
                       //varなし
                       let element = document.getElementById('japanmap');
                       console.log('場所: ' + element.textContent);
                   }
               </script>
        </code>
      </pre>
  </body>
</html>

実行サンプル

chrome実行サンプル

var要素の基本的な使用方法のchrome実行サンプル

Firefox実行サンプル

var要素の基本的な使用方法のfirefox実行サンプル

edge 実行サンプル

var要素の基本的な使用方法のedge実行サンプル

opera 実行サンプル

var要素の基本的な使用方法のopera実行サンプル

コメント

タイトルとURLをコピーしました