[CSS]ハッシュリンク先がどのエリアなのかを分かりやすくするスタイルシート

ハッシュリンク（#hoge）をクリックすると、その先頭はページ上部に表示されるので分かりますが、どこまでがそのエリアなのか分かりやすくするスタイルシートのテクニックを紹介します。

On :target

[ad#ad-2]

• デモ
• 実装

デモ

デモでは3つのハッシュリンクが含まれています。

デモページ

上部のナビゲーションの「1, 2, 3」をクリックすると、各ハッシュリンク先に移動し、そのエリアをCSS3アニメーションでハイライトします。

デモページ: 1に移動

[ad#ad-2]

実装

HTML

HTMLはシンプルで、ナビゲーションをnav要素、コンテンツをsection要素、各ハッシュリンク先はdiv要素で実装します。

<nav>
  <a href="#one">1</a>
  <a href="#two">2</a>
  <a href="#three">3</a>
</nav>

<section>
  <div id="one"><h2>One</h2>Pellentesque habitant morbi ...</div>
  <div id="two"><h2>Two</h2>Pellentesque habitant morbi ...</div>
  <div id="three"><h2>Three</h2>Pellentesque habitant morbi ...</div>
</section>

CSS

ハッシュリンク先のスタイルには「:target擬似クラス」を使用します。
ターゲットがあたったら、キーフレームを使ったCSS3アニメーションでそのエリアをハイライトします。

:target {
  -webkit-animation: highlight 1s ease;
  -moz-animation: highlight 1s ease;
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  -ms-transform: translateX(20px);
  -o-transform: translateX(20px);
}
@-webkit-keyframes highlight {
  0% { border-left-color: red; }
  100% { border-left-color: white; }
}
@-moz-keyframes highlight {
  0% { border-left-color: red; }
  100% { border-left-color: white; }
}
section > div {
  border-left: 40px solid white;
  padding: 10px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  padding-right: 50px;
  margin-left: -20px;
}