アンカータグのタイトル属性をレベルアップ！HTMLとCSSで創造的なツールチップデザイン

2024-04-16

HTMLとCSSを使ってアンカータグ内のタイトル属性のスタイルを変更する方法

HTMLのアンカータグ (<a>) には、リンク先のURLだけでなく、title 属性を使って補足情報を指定することができます。この属性は、マウスカーソルをリンク上に置いたときに表示されるツールチップなどで利用されます。

しかし、デフォルトのツールチップデザインはシンプルで、視覚的に訴求力に欠ける場合があります。そこで、CSSを使ってタイトル属性のスタイルを自由にカスタマイズすることが可能になります。

方法

アンカータグ内のタイトル属性のスタイルを変更するには、以下の2つの方法があります。

特定のアンカータグにのみスタイルを適用したい場合は、そのアンカータグに直接 style 属性を記述することができます。

<a href="https://example.com" style="color: red; font-weight: bold;">リンクテキスト</a>

上記の例では、color プロパティで文字の色を赤色に、font-weight プロパティでフォントの太さを太字に変更しています。

CSSクラスを使ってスタイルを適用する

複数のアンカータグに同じスタイルを適用したい場合は、CSSクラスを利用するのが効率的です。

HTML

<a href="https://example.com" class="tooltip">リンクテキスト</a>
<a href="https://example2.com" class="tooltip">別のリンクテキスト</a>

CSS

.tooltip {
  color: blue;
  text-decoration: none;
  background-color: #F0F0F0;
  padding: 5px;
  border-radius: 5px;
}

.tooltip:hover {
  background-color: #CCC;
}

上記の例では、.tooltip というCSSクラスを定義し、その中にタイトル属性のスタイルを記述しています。hover 疑似クラスを使って、マウスカーソルがリンク上に置いたときのスタイルも設定しています。

補足

上記はあくまで基本的な例であり、さらに多くのスタイルプロパティを使って様々なデザインを表現することができます。
CSSフレームワークを利用すれば、より簡単に複雑なツールチップデザインを作成することができます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ツールチップサンプル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>このページには、様々なスタイルのツールチップを持つリンクがいくつかあります。</p>
  <a href="#" class="tooltip-default">デフォルトのツールチップ</a>
  <a href="#" class="tooltip-blue">青色のツールチップ</a>
  <a href="#" class="tooltip-rounded">角丸ツールチップ</a>
  <a href="#" class="tooltip-shadow">影付きツールチップ</a>
  <a href="#" class="tooltip-large">大きなツールチップ</a>
</body>
</html>

/* デフォルトのツールチップ */
.tooltip-default {
  color: black;
  background-color: #F0F0F0;
  padding: 5px;
  border: 1px solid #CCC;
}

/* 青色のツールチップ */
.tooltip-blue {
  color: white;
  background-color: blue;
  padding: 10px;
  border-radius: 5px;
}

/* 角丸ツールチップ */
.tooltip-rounded {
  color: #333;
  background-color: #FFF;
  padding: 8px;
  border-radius: 10px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* 影付きツールチップ */
.tooltip-shadow {
  color: white;
  background-color: #666;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

/* 大きなツールチップ */
.tooltip-large {
  font-size: 18px;
  line-height: 1.5;
  padding: 15px;
}

/* マウスカーソルがリンク上に置いたときのスタイル */
.tooltip:hover {
  background-color: #EEE;
}

説明

このサンプルコードでは、以下の5種類のツールチップを定義しています。

デフォルトのツールチップ: シンプルなツールチップです。
青色のツールチップ: 文字色と背景色が青色になっています。
角丸ツールチップ: 角が丸く、影が付いています。
影付きツールチップ: 影が強調されています。
大きなツールチップ: 文字サイズと行高が大きくなっています。

これらのツールチップは、それぞれ異なるCSSクラスを使ってスタイルが設定されています。HTMLのアンカータグにこれらのクラスを付与することで、それぞれのスタイルを適用することができます。

HTMLとCSS以外でアンカータグのタイトル属性のスタイルを変更する方法

JavaScriptを使って、ツールチップの表示やスタイルを動的に制御することができます。

<a href="#" onclick="showTooltip(this)">リンクテキスト</a>

<script>
function showTooltip(element) {
  var tooltip = document.createElement('div');
  tooltip.className = 'tooltip';
  tooltip.textContent = element.title;
  document.body.appendChild(tooltip);

  // ツールチップの位置調整
  tooltip.style.left = element.offsetLeft + element.offsetWidth / 2 - tooltip.offsetWidth / 2;
  tooltip.style.top = element.offsetTop + element.offsetHeight;

  // マウスカーソルがリンクから離れたときの処理
  element.addEventListener('mouseout', function() {
    document.body.removeChild(tooltip);
  });
}
</script>

ライブラリ

jQueryなどのライブラリを使うと、より簡単にツールチップを作成することができます。

<a href="#" title="ツールチップのテキスト">リンクテキスト</a>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $('a[title]').tooltip();
});
</script>

フレームワーク

Bootstrapなどのフレームワークには、ツールチップを含む様々なコンポーネントが用意されています。

<a href="#" data-toggle="tooltip" title="ツールチップのテキスト">リンクテキスト</a>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">