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

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

サイトのキャプチャ

On :target

デモ

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

サイトのキャプチャ

デモページ

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

サイトのキャプチャ

デモページ: 1に移動

実装

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;
}

top of page

©2017 coliss