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

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

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

リンクテキスト

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

黒系のデザイン

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

  /* フッターメニュー */
  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

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