Home > TagScript > html、css、Java > html5css3

css3を使用して、リンクテキストのデザインを変更する

新規作成日 2016-04-01
最終更新日

cssは、スタイルシートにスタイルをまとめることで、サイト全体のスタイルを統一、変更が簡単にできる仕組みです。

css3に進化したことで、アニメーションも使えるようになりました。 アニメーションを利用することで、訪問者の視線を誘導することができるので、より読みやすく、見やすいページにすることができます。 上品なデザインをうまく配置して、サイトの居心地をより快適なものにしましょう。

リンクテキスト

マウスカーソルが、リンクテキストに重なった時、リンクテキストを少し大きくして、色を変更する

リンクテキストは、4つの状態のスタイルをそれぞれ指定できます。

  • 未訪問

    :link擬似クラス

  • 訪問済み

    :visited擬似クラス

  • カーソルが重なった時

    :hover擬似クラス

  • アクティブになった時

    :active擬似クラス

これらのスタイルをうまく使い、メニューやボタンに応用していきます。 白系、黒系の背景向けのデザインを、予め、それぞれ作成しておくと便利です。

参考にするサイト:テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15(外部サイト)

黒系のデザイン

黒系の背景向けのスタイルです。フッターメニューで利用しています。

黒系のリンクテキスト

  /* フッターメニュー */
  footer p a {
	display: inline-block;
	transition: .3s;
	-webkit-transform: scale(1);
	transform: scale(1);
	color: cyan;
  }
  footer p a:hover {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	color: #FF0000;  }

<footer>
	<p>
		<a href="index.html">Home</a>
		<a href="PC/PC.html">PC</a>
		<a href="Csharp/Csharp.html">C#</a>
		<a href="Illust/Illust.html">Illustration</a>
	</p>
</footer>

「footer p a」で、footerタグ内のpタグ内にあるaタグの内容が対象になることを示します。

「display: inline-block;」で、aタグの内容をブロックとして扱うことを指定しています。 この指定をすることで、意図しない箇所で改行されたり、逆にされなかったりするので、実際に表示させて確認してください。

変化する動きを「transition:」を指定して、緩やかに変化させています。

「-webkit」は、ベンダープレフィックスと呼ばれるものです。ブラウザにより、操作が違う場合を想定して別個に指定する記述の仕方です。

「transform: scale(1);」で、縮尺を標準に戻しています。

「color: cyan;」で、文字色をジアンに指定しています。


「footer p a:hover」で、footerタグ内のpタグ内にあるaタグの内容に、カーソルが重なった時に対象になることを示します。

「transform: scale(1.1);」で、縮尺を1.1倍に変更しています。

「color: #FF0000;」で、文字色を#FF0000;に指定しています。

白系のデザイン

白系のデザインに付いても同じように設定できます。

基本となる背景と同色であれば、色を指定しなければ、それまでの色と同色になります。

ここでは、全てのリンクテキストに同じ設定を適用します。


a {
display: inline-block;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
a:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
color: #FF0000;  }

ベンダープレフィックス

CSS3で採用される予定の機能が各ブラウザで先行実装されていますが、 それらの機能を動作させるには、 現状ではプロパティや値の先頭に-moz-や-webkit-などのベンダープレフィックスを付ける必要があります。

参考:ベンダープレフィックス(外部サイト)

主要ブラウザのベンダープレフィックス

  • -moz-  …… Firefox
  • -webkit- …… Google Chrome、Safari
  • -o-    …… Opera
  • -ms-   …… Internet Explorer

使用する場合は、ベンダープレフィックス無しの指定も併記する必要があります。

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」