HTML <span>
<span> タグは、それ自体には何の効果も意味もありません。属性を指定したいときに指定します。<div> タグと異なり、インライン要素となります。
書式
HTMLではタグ名、属性名及び属性値の大文字と小文字を区別しない。
<span>
<!-- Phrasing content -->
</span>
内容
span 要素の開始タグと終了タグの間にフレージング・コンテンツを含めることができる。
使用例
SPAN 要素の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。
特定の一部分だけに<span style="color:red;">スタイル</span>を指定するときに使用します。
特定の一部分だけにスタイルを指定するときに使用します。
属性一覧
次に示す属性をspan要素に指定できる。
- accesskey
- 要素に対するアクセスキーを指定する。空白で区切って、複数の文字を指定できる。
- class
- CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
<span class="badge rounded-pill">
example
</span>
- contenteditable
- ユーザによる編集が可能かどうかを指定する。
contenteditable
| 値 |
説明 |
| true |
編集できる |
| false |
編集できない |
- data-*
- カスタムデータ属性を指定する。
- dir
- 文字の書字方向を指定する。
<span dir="ltr">
example
</span>
- id
- HTML文書内で一意な識別子を指定する。
- lang
- 要素の言語を指定する。
<span lang="en">
example
</span>
- onblur
- 要素がフォーカスを失ったときに実行する JavaScript を指定する。
- onchange
- テキストが変更選択されたときに実行する JavaScript を指定する。
- onclick
- 要素をクリックしたときに実行する JavaScript を指定する。
- oncontextmenu
- 要素でコンテキストメニューを開いたときに実行する JavaScript を指定する。
- ondblclick
- 要素をダブルクリックしたときに実行する JavaScript を指定する。
- onfocus
- 要素がフォーカスを得たときに実行する JavaScript を指定する。
- onkeydown
- 要素でキーを押下したときに実行する JavaScript を指定する。
- onkeypress
- キーを押したときに実行するスクリプト JavaScript を指定する。
- onkeyup
- 要素でキーを離したときに実行する JavaScript を指定する。
- onmousedown
- 要素をマウスのボタンを押下したときに実行する JavaScript を指定する。
- onmousemove
- マウスポインタを要素内で動かしたときに実行する JavaScript を指定する。
- onmouseout
- マウスポインタを要素内から要素外に動かしたときに実行する JavaScript を指定する。
- onmouseover
- マウスカーソルが乗ったときに実行する JavaScript を指定する。
- onmouseup
- マウスのボタンを押下した後で離すときに実行する JavaScript を指定する。
- onselect
- テキストが（部分的にでも）選択されたときに実行する JavaScript を指定する。
- style
- CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。
<span style="color: red;">
example
</span>
- title
- 要素のアドバイザリー情報を指定する。
タグの省略
span要素の開始タグと終了タグは省略できない。
JavaScript
JavaScriptからはHTMLSpanElementインタフェースを通じてspan要素へアクセスできる。
HTMLSpanElementインタフェースには、次に示すプロパティがある。
- title
- span要素のtitle属性
- lang
- span要素のlang属性
- translate
- span要素のtranslate属性
- dir
- span要素のdir属性
- hidden
- span要素のhidden属性
- accessKey
- span要素のaccessKey属性
- accessKeyLabel
- 要素に割り当てられたアクセスキー
- draggable
- span要素のdraggable属性
- spellcheck
- span要素のspellcheck属性
- autocapitalize
- span要素のautocapitalize属性
- innerText
- ノードに描画されるテキスト
- id
- span要素のid属性
HTMLタグ
参考文献
Web Hypertext Application Technology Working Group (2022) "Text-level semantics" HTML Living Standard