スタイルシートマニア

ホームページカスタマイズ Tips

おもしろリンクアクション

リンクに要素の位置を指定するpositionプロパティを組み合せてロールオーバーした時にテキストを少し動かしてボタンを押したようなアクションを作ってみます。

リンクのboxを作ってその中のリンクに対してこの効果を有効にするようにします。

まずは、基本設定

.link-box a:link  {
      color: #600;
      position: relative;
}

.link-box a:visited {
      color: #600;
}

※position: relative;はロールオーバー時にテキストを動かす基準にするために指定しておきます。

次ににロールオーバー時のアクションを追加

.link-box a:hover {
      color: #00f;
      text-decoration: none;
      top: 1px;
      left: 0;
}

このままではIEが正常に動作してくれないので、heightプロパティとmarginプロパティを追加します。

.link-box a:link {
      color: #f00;
      height: auto;/*point*/
      position: relative;
}

.link-box a:hover {
      color: #00f;
      margin: auto; /*point*/
      text-decoration: none;
      top: 1px;
      left: 0;
}
<div class="link-box">
<p>ホームページ制作なら<a href="http://source-marine.net">ソースマリン</a></p>
</div>

link要素の操作

リンク要素は、擬似クラスで訪問済みと未訪問のテキストの色を変更したり、リンク領域のマウスオーバー時のアクションなど色々な表現が可能です。例えばリンクテキストの下線を消してまったり、マウスオーバー時に色を変えるなどの方法などは基本中の基本と言えるでしょう。

では、このサイトで使っているリンクの設定を紹介しましょう。

リンクが付いているテキストリンク

a:link {
      color: #333;
}

訪問済みのテキストリンク

a:visited {
      color: #333;
}

マウスオーバー時のアクション

a:hover {
      color: #999;
}

という設定で動かしています。