【6日でできるHTML＆CSS入門】title属性とツールチップ

―“title”で伝えるひと言ヒント―
　リンクや画像の上にカーソルを置くと、小さな吹き出しがふわっと現れることがあります。これが ツールチップ です。HTML では、ほぼすべての要素に付けられる title 属性 に文字列を指定するだけで実装できます。ここでは title 属性の基本、alt との違い、アクセシビリティへの影響までを体系的に解説します。

１．title 属性の基本

素材のダウンロード

以下のリンクから使用する素材をダウンロードできます。

pics フォルダに画像を置き、HTML から相対パスで参照します。

js-pac_manダウンロード
rose.jpg

1.1. 仕組みと書式

<タグ title="ヒント">…</タグ>

1.2. 適用できる要素例

  • アンカー（リンク）
  • 画像 (<img>)
  • ボタン・入力欄

　ただし 長文は NG。スクリーンリーダーの読み上げ負担やモバイル UX を考慮し、30 文字程度に留めるのが目安です

２．画像での活用

2.1. サンプル①：lesson17_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像にツールチップ</title>
</head>
<body>
  <h1>写真ギャラリー</h1>
  <img src="pics/rose.jpg"
       width="200" height="140"
       alt="赤いバラの写真"
       title="情熱的なバラ">
</body>
</html>

表示結果

バラの写真にマウスを重ねると “情熱的なバラ” と表示。

2.2. alt との違いを確認

サンプル②：lesson17_2.html（わざと画像パスを間違える）

<img src="pics/notfound.jpg"
     width="120" height="80"
     alt="画像が見つかりません"
     title="代替テキストだけ表示中">

表示結果

　枠内に “画像が見つかりません” とテキストが表示。title は画像が無い場合でもホバーすれば確認できますが、ユーザは気付きにくいので 視覚的フォールバックは alt に任せる のが鉄則です。

2.3. 用途まとめ

属性主目的表示タイミングSEO 対策アクセシビリティ
title補足説明・ヒントホバー / 長押しほぼ影響なし読み上げ時に追加情報
alt代替テキスト画像読込失敗・スクリーンリーダー画像検索に有効必須級

３．リンク・ボタンでの活用

3.1. ショートカット説明

ファイル名： lesson17_3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像にツールチップ</title>
</head>
<body>
  <h1>写真ギャラリー</h1>
  <a href="download/manual.pdf"
     title="PDF を保存 (2MB)">
     取扱説明書をダウンロード
  </a>
</body>
</html>

表示結果

ファイルサイズ・形式などをツールチップで事前告知するとクリック後の落差を減らせます。

3.2. 入力補助として

ファイル名： lesson17_4.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像にツールチップ</title>
</head>
<body>
  <input type="text"
         name="zip"
         pattern="\d{3}-\d{4}"
         title="例: 123-4567"
         placeholder="郵便番号">
  </a>
</body>
</html>

表示結果

モバイル長押しでもヒントを確認でき、入力ミスを低減。

４．カスタムツールチップとの住み分け

4.1 デフォルトツールチップの長所

  • 実装 1 行、全ブラウザ対応
  • OS ネイティブ描画で軽量

4.2. 限界

  • デザインをカスタマイズ不可
  • スマホは長押し操作が必要で気付かれにくい

Tip: 重要度が高い説明は CSS + JS で自作ツールチップを実装し、title は補助的に使う。

使用タグ・属性一覧

要素 / 属性役割備考
<img>画像埋め込みalt, title が併用可
<a>ハイパーリンクtitle で行き先の詳細
titleツールチップ文字列30 文字以内推奨
alt代替テキスト画像必須級
width / height表示サイズピクセル or %

まとめ

  • ツールチップは title 属性。短い補足情報を載せ、UX を底上げ。
  • alt は画像が無くても伝わるテキスト。役割が異なるため両方設定する。
  • 長文や重要説明はカスタム実装を検討し、title はあくまで “ちょっとしたヒント” にとどめるのがベストプラクティスです。