title属性
マウスを上にのせると、追加情報を表示させることができます。
本ページでは、title属性について説明します。
title属性とは
titleを使うと、マウスを上にのせた時に追加情報を表示させることができます。
グローバル属性のため、すべてのHTML要素で使えます。
利用例
titleの利用例は、以下のとおりです。
【title利用例】
<p><abbr title="HyperText Markup Language">HTML</abbr>は、メモ帳で作成できます。</p>
abbr要素は、略語を示します。title属性を使って、追加情報として正式名称を記述しています。
実行例
実行例は、以下のとおりです。
HTMLは、メモ帳で作成できます。
テキストの下に点線があるHTMLの上にマウスを移動させると、HyperText Markup Languageと表示されます。
補足
以下のように、改行して記述すると、表示上も改行されます。
【titleで改行する例】
<p><abbr title="HyperText Markup Language">HTML</abbr>は、メモ帳で作成できます。</p>
また、title属性は子要素に継承されます。以下は、例です。
【titleの継承】
<div title="説明"> <p>HTMLは、メモ帳で作成できます。</p> <p>違う話題です。</p> </div>
上記は、2つの段落どちらにマウスをのせても「説明」が表示されます。
2つ目の段落で表示したくない場合、title=""で打ち消す必要があります。
ブラウザのサポート状況
各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。
項目 | IE | Ed | Fx | Ch | Sa | Op |
---|---|---|---|---|---|---|
title | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
項目 | Sa | An | Op | Ch | Fx | Sm |
---|---|---|---|---|---|---|
title | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
- 〇
- サポート
- △
- 制限あり
- ×
- 未サポート
- ?
- 不明
- IE
- Internet Explorer
- Ed
- Edge
- Fx
- Firefox
- Ch
- Chrome
- Sa
- Safari
- Op
- Opera
- An
- Android Browser
- Sm
- Samsung Internet
※スマートフォンのFirefoxとChromeは、Android版です。
「HTMLグローバル属性一覧」に戻る