6日でできる 新HTML&CSS入門｜title属性とツールチップ
title属性は、そっと添えるひと言ヒント。画像やリンクに補足情報を加えて、迷わず使えるWebページに仕上げよう。
Webページを操作していると、リンクや画像の上にマウスを重ねたとき、小さな説明が表示されることがあります。この小さな説明表示をツールチップと呼びます。
HTMLでは、title属性を使うことで、要素に補足説明を加えることができます。たとえば、画像にマウスを重ねたときに短い説明を表示したり、リンク先の内容を事前に伝えたり、入力欄に入力例を補足したりできます。
title属性は、使い方そのものはとても簡単です。対象となるタグにtitle属性を追加し、表示したい説明文を指定するだけです。ただし、便利だからといって何でもtitle属性に書けばよいわけではありません。
ツールチップは、マウス操作では表示されやすい一方で、スマートフォンでは気づかれにくいことがあります。また、長い説明を入れると読みにくくなり、かえって使いにくいページになってしまうこともあります。
特に画像では、alt属性との違いを理解することが大切です。alt属性は画像が表示されないときや、音声読み上げ環境で画像の意味を伝えるための代替テキストです。一方、title属性は補足説明やちょっとしたヒントを伝えるためのものです。
この記事では、title属性の基本、画像での使い方、alt属性との違い、リンクや入力欄での活用、ツールチップを使うときの注意点まで、HTMLだけで確認できるサンプルを使いながら丁寧に解説していきます。
素材のダウンロード
以下のリンクから使用する素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。
| rose.png | guide.pdf |
|---|---|
 | tooltips-title-attribute.zipファイルに含まれています。 |
title属性は短い補足説明を加えるために使う
title属性は、要素に補足情報を加えるための属性です。多くのブラウザでは、マウスカーソルを要素の上に置いたときに、その内容が小さなツールチップとして表示されます。
基本的な考え方は、次のようになります。
<タグ title="ヒント">表示内容</タグ>
title属性は、リンク、画像、入力欄など、さまざまな要素に指定できます。
| 使う場所 | 使い方の例 | 向いている補足内容 |
|---|---|---|
| 画像 | imgにtitle属性を付ける | 写真やイラストの短い説明 |
| リンク | aにtitle属性を付ける | リンク先の形式や内容 |
| 入力欄 | inputにtitle属性を付ける | 入力例や形式のヒント |
| ボタン | buttonにtitle属性を付ける | 操作内容の補足 |
title属性に入れる内容は、短く分かりやすい文章にするのが基本です。長文を入れると読みづらくなり、表示されてもユーザーが内容を確認しにくくなります。
目安としては、ひと言から短い一文程度にとどめると扱いやすくなります。重要な説明はtitle属性だけに入れるのではなく、本文やラベルとして画面上に表示するほうが親切です。
図1：title属性で表示されるツールチップ
この図から分かること
この図から、title属性を指定すると、マウスを重ねたときに小さな補足説明が表示されることが分かります。
ツールチップは、画面上に常に表示される説明ではありません。ユーザーが対象にカーソルを合わせたときに表示されるため、補助的な情報を伝えるのに向いています。
一方で、ユーザーが必ず見るとは限らないため、重要な説明をtitle属性だけに任せるのは避けたほうがよいでしょう。title属性は、あくまで「ちょっとしたヒント」を添えるために使うと考えると分かりやすいです。
素材画像とフォルダ構成を確認する
画像にtitle属性を指定するサンプルでは、picsフォルダの中に画像ファイルを置き、HTMLから相対パスで参照します。
ここでは、picsフォルダにrose.jpgという画像を置く想定で進めます。
├─ lesson17_1.html
├─ lesson17_2.html
├─ lesson17_3.html
├─ lesson17_4.html
└─ pics/
└─ rose.pngHTMLファイルから見て、picsフォルダの中にrose.pngがある場合、画像の場所はpics/rose.pngのように指定します。
画像が表示されない場合は、フォルダ名、ファイル名、拡張子、相対パスが正しいかを確認しましょう。特に、picsとpicのようなフォルダ名の違いや、rose.pngとRose.pngのような大文字小文字の違いには注意が必要です。
画像にtitle属性を指定する
画像にtitle属性を付けると、画像にマウスカーソルを重ねたときに補足説明を表示できます。
ここでは、花の画像にtitle属性を指定し、画像の印象を短い言葉で補足します。
ファイル名： lesson17_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像にツールチップ</title>
</head>
<body>
<h1>花の写真ギャラリー</h1>
<img src="pics/rose.png"
width="220" height="150"
alt="赤いバラの写真"
title="鮮やかな赤いバラ">
</body>
</html>ブラウザの表示例
ブラウザで表示すると、「花の写真ギャラリー」という見出しの下に赤いバラの画像が表示されます。
画像にマウスを重ねると、title属性に指定した「鮮やかな赤いバラ」という補足説明がツールチップとして表示されます。
| 指定 | 内容 |
|---|---|
| src | pics/rose.png |
| width | 220 |
| height | 150 |
| alt | 赤いバラの写真 |
| title | 鮮やかな赤いバラ |
この例では、alt属性とtitle属性の両方を指定しています。
alt属性は、画像が表示されない場合や音声読み上げ環境で、画像の内容を伝えるために使います。title属性は、画像にマウスを重ねたときに補足説明を表示するために使います。
同じ画像に対して両方を指定できますが、役割は違います。alt属性には画像の代わりになる説明、title属性には補足的なヒントを書くと考えるとよいでしょう。
alt属性とtitle属性の違い
画像に関係する属性として、alt属性とtitle属性は混同しやすい部分です。しかし、この2つは目的が異なります。
| 属性 | 主な目的 | 表示される場面 | 重要度 |
|---|---|---|---|
| alt | 画像の代替テキストを指定する | 画像が表示されないとき、読み上げ環境など | 必須級 |
| title | 補足説明やヒントを指定する | マウスホバー時など | 補助的 |
| alt | 画像の意味を伝える | 画像が見えない状況で役立つ | とても重要 |
| title | 追加情報を伝える | 見えている画像にひと言添える | 使いすぎに注意 |
alt属性は、画像の代わりになる情報です。画像が読み込めなかった場合でも、alt属性があれば何の画像だったのかを伝えられます。
一方、title属性は画像が表示されている状態で、さらに短い補足を加えるために使います。title属性だけでは、画像が表示されないときの代替説明としては不十分です。
画像に意味がある場合は、まずalt属性をしっかり書くことが大切です。そのうえで、必要に応じてtitle属性を追加しましょう。
画像パスを間違えた場合の見え方を確認する
次のサンプルでは、あえて存在しない画像ファイルを指定します。これにより、画像が読み込めなかったときにalt属性がどのように役立つかを確認できます。
ファイル名： lesson17_2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>alt属性とtitle属性の違い</title>
</head>
<body>
<h1>画像が表示されない場合の確認</h1>
<img src="pics/notfound.jpg"
width="160" height="100"
alt="バラの画像が見つかりません"
title="画像ファイルの場所を確認してください">
</body>
</html>ブラウザの表示例
このHTMLでは、src属性にpics/notfound.pngを指定しています。しかし、picsフォルダの中にnotfound.pngがない場合、画像は表示されません。
その代わりに、ブラウザによってはalt属性に指定した「バラの画像が見つかりません」という文字が表示されます。
| 状況 | 役立つ属性 |
|---|---|
| 画像が正しく表示される | title属性で補足説明を表示できる |
| 画像が読み込めない | alt属性で画像の代わりの説明を伝えられる |
| マウスを重ねたとき | title属性の内容が表示されることがある |
| 音声読み上げ環境 | alt属性が画像内容の理解に役立つ |
title属性は、画像が表示されない場合でもマウスを重ねれば確認できることがあります。しかし、ユーザーがそこにマウスを重ねるとは限りません。
そのため、画像が見えない場合に内容を伝える役割はalt属性に任せるのが基本です。title属性は、画像の代替ではなく、補足説明として使いましょう。
図2：alt属性とtitle属性の役割の違い
この図から分かること
この図から、alt属性とtitle属性は似ているようで役割が違うことが分かります。
alt属性は、画像が見えない状況で画像の内容を伝えるための代替テキストです。画像が読み込めない場合や、音声読み上げ環境で重要な役割を持ちます。
title属性は、画像やリンクなどに短い補足説明を加えるための属性です。多くの場合、マウスを重ねたときにツールチップとして表示されます。
画像に意味がある場合は、alt属性を優先して考えます。title属性は、その画像にひと言ヒントを添えたい場合に使うとよいでしょう。
title属性は短く分かりやすく書く
title属性に入れる文字は、短く分かりやすくすることが大切です。
長い説明を入れると、ツールチップが読みにくくなります。また、スマートフォンではツールチップが表示されにくいこともあるため、重要な情報をtitle属性だけに入れるのはおすすめできません。
| 書き方 | 例 | 評価 |
|---|---|---|
| 短く具体的 | PDF資料を開きます | 分かりやすい |
| 内容が伝わる | 入力例：123-4567 | 実用的 |
| 長すぎる | このリンクをクリックすると別ページでPDF資料が表示され、内容を確認できます | 読みにくい |
| あいまい | 詳細 | 情報が少ない |
title属性は、あくまで短いヒントです。
リンク先の説明や入力ルールなど、ユーザーに確実に伝えたい内容は、本文、ラベル、見出し、説明文として画面に表示するようにしましょう。
リンクにtitle属性を指定する
リンクにtitle属性を指定すると、リンク先の内容を短く補足できます。
たとえば、PDFをダウンロードするリンクに対して、ファイル形式や容量をtitle属性で示しておくと、ユーザーはクリック前にリンク先の内容を想像しやすくなります。
ファイル名： lesson17_3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リンクにツールチップ</title>
</head>
<body>
<h1>資料ダウンロード</h1>
<p>
<a href="download/guide.pdf"
title="PDF資料を保存できます">
操作ガイドをダウンロード
</a>
</p>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、「操作ガイドをダウンロード」というリンクが表示されます。
このリンクにマウスを重ねると、title属性に指定した「PDF資料を保存できます」という補足説明が表示されます。
| 要素 | 内容 |
|---|---|
| a | 操作ガイドをダウンロード |
| href | download/guide.pdf |
| title | PDF資料を保存できます |
リンクにtitle属性を使うと、リンク先の補足説明を加えられます。ただし、リンク文字そのものが分かりにくい場合に、title属性で補えばよいという考え方は避けたほうがよいでしょう。
たとえば、「こちら」というリンク文字にtitle属性で詳しい説明を付けるよりも、「操作ガイドをダウンロード」のように、リンク文字だけで内容が分かる表現にするほうが親切です。
title属性は、リンク文字を分かりやすくしたうえで、さらに少しだけ補足するために使うのがおすすめです。
入力欄にtitle属性を指定する
入力欄にもtitle属性を指定できます。入力例や形式のヒントを示したい場合に使えます。
ここでは、郵便番号の入力欄を例にします。
ファイル名： lesson17_4.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力欄にツールチップ</title>
</head>
<body>
<h1>住所情報の入力</h1>
<p>
<label>
郵便番号：
<input type="text"
name="postal-code"
pattern="\d{3}-\d{4}"
title="入力例：123-4567"
placeholder="123-4567">
</label>
</p>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、郵便番号を入力するためのテキストボックスが表示されます。
入力欄にマウスを重ねると、title属性に指定した「入力例：123-4567」というヒントが表示されることがあります。
| 属性 | 内容 |
|---|---|
| type | text |
| name | postal-code |
| pattern | \d{3}-\d{4} |
| title | 入力例：123-4567 |
| placeholder | 123-4567 |
この例では、pattern属性で郵便番号の形式を指定し、title属性で入力例を補足しています。
placeholder属性にも入力例を入れています。placeholder属性は入力欄の中に薄く表示されるヒントで、title属性よりもユーザーの目に入りやすい場合があります。
入力欄で大切な説明は、title属性だけに頼らず、labelや本文でも分かるようにしておくと、より使いやすいフォームになります。
図3：リンク・画像・入力欄で使うtitle属性
この図から分かること
この図から、title属性は画像だけでなく、リンクや入力欄にも使えることが分かります。
画像では、写真やイラストに短い補足説明を加えられます。リンクでは、リンク先の形式や内容を少しだけ補足できます。入力欄では、入力例や形式のヒントを示すことができます。
ただし、どの場合でもtitle属性は補助的な情報です。ユーザーに必ず伝えたい説明は、リンク文字、本文、ラベル、キャプションなど、画面に見える形で書くことが大切です。
デフォルトのツールチップの長所
title属性で表示されるツールチップは、ブラウザが標準で用意している機能です。そのため、HTMLにtitle属性を追加するだけで使えます。
| 長所 | 内容 |
|---|---|
| 実装が簡単 | title属性を追加するだけで使える |
| 軽い | 特別な処理を追加しなくても表示できる |
| 多くのブラウザで使える | 標準的なHTMLの機能として利用できる |
| 補足説明に向いている | ひと言ヒントを表示しやすい |
ちょっとした説明を足したいだけであれば、title属性は手軽に使える方法です。
たとえば、画像の短い説明、PDFリンクの補足、入力形式の例など、ユーザーが操作前に少し知っておくと便利な情報を入れるのに向いています。
title属性だけに頼ると困る場面
title属性は便利ですが、限界もあります。
まず、スマートフォンやタブレットでは、マウスを重ねる操作がありません。長押しで表示される場合もありますが、ユーザーがその操作に気づくとは限りません。
また、ツールチップの見た目はブラウザやOSに依存します。文字サイズ、背景色、表示位置などをHTMLだけで自由に調整することはできません。
| 注意点 | 内容 |
|---|---|
| スマートフォンでは気づかれにくい | ホバー操作がないため |
| デザインを自由に変えにくい | ブラウザ標準の表示に依存する |
| 長文に向かない | 読みにくくなる |
| 重要情報の表示には不向き | 必ず読まれるとは限らない |
そのため、重要な説明、エラーの理由、必ず読んでほしい注意事項などは、title属性だけに入れないようにしましょう。
重要な情報は、本文、ラベル、補足テキスト、見出しなどとして、最初から画面上に表示するのが基本です。
カスタムツールチップとの違い
title属性によるツールチップは、HTMLだけで簡単に使える一方で、見た目を自由に変えることはできません。
一方、独自デザインのツールチップを作る場合は、CSSやJavaScriptを使って、色、位置、アニメーション、表示タイミングなどを調整します。
| 種類 | 特徴 | 向いている場面 |
|---|---|---|
| title属性のツールチップ | 手軽に使えるが見た目は変更しにくい | 短い補足説明 |
| 独自デザインのツールチップ | 見た目や動きを調整できる | 重要な説明や操作ガイド |
ただし、ここまでの記事ではCSSをまだ扱っていないため、独自デザインのツールチップは例示しません。CSSやJavaScriptに関する記事以降で、必要に応じて詳しく学ぶとよいでしょう。
この段階では、title属性は短い補足説明を加えるためのHTMLの機能として理解しておけば十分です。
使用するタグと属性を整理する
ここまで登場したタグと属性を整理しておきます。
| タグまたは属性 | 役割 | 備考 |
|---|---|---|
| img | 画像を表示する | alt属性やtitle属性を指定できる |
| a | ハイパーリンクを作る | title属性でリンク先を補足できる |
| input | 入力欄を作る | title属性で入力例を補足できる |
| label | 入力欄の項目名を表す | フォームを分かりやすくできる |
| title | ツールチップ用の補足説明を指定する | 短い説明に向いている |
| alt | 画像の代替テキストを指定する | 画像には必須級 |
| src | 画像ファイルの場所を指定する | imgで画像を読み込む |
| href | リンク先を指定する | aで移動先を設定する |
| width | 画像の表示幅を指定する | サイズ指定に使う |
| height | 画像の表示高さを指定する | 縦横比に注意する |
| pattern | 入力形式の条件を指定する | 入力欄で使う |
| placeholder | 入力欄内に入力例を表示する | 目に入りやすい補助表示 |
title属性は、画像、リンク、入力欄などに短い補足説明を加えるときに便利です。
ただし、画像の代替説明にはalt属性、リンク先の説明には分かりやすいリンク文字、入力欄の説明にはlabelやplaceholderを使うなど、役割に合った方法を組み合わせることが大切です。
title属性を使うときに意識したいこと
title属性を使うときは、短く、分かりやすく、補足的な内容にすることを意識しましょう。
| 意識したいこと | 理由 |
|---|---|
| 短い文章にする | ツールチップは長文に向かない |
| 重要情報だけにしない | ユーザーが必ず見るとは限らない |
| alt属性と混同しない | 画像の代替にはalt属性が必要 |
| リンク文字を分かりやすくする | title属性がなくても意味が伝わるようにする |
| 入力欄ではlabelやplaceholderも使う | ヒントを見つけやすくする |
| スマートフォンでの使われ方を考える | ホバー操作がないため気づかれにくい |
title属性は、Webページに小さな気配りを加えるための便利な属性です。画像にひと言添えたり、リンク先の内容を少し補足したり、入力例を示したりすることで、ユーザーの迷いを減らせます。
ただし、title属性はあくまで補助的なヒントです。ユーザーに必ず伝えたい内容は、画面上に見える文章として用意しましょう。
title属性の役割を正しく理解し、alt属性やリンク文字、label、placeholderと使い分けることで、より分かりやすく、親切なHTMLを書けるようになります。