アンカー（a)スタイルの変更

>>ホームページの作り方TOP　>>アンカー(a)スタイルの変更

■アンカー(a)のスタイルの変更

アンカーというのはご存知の通り、a hrefではじまるリンクのタグです。

デフォルトだとリンクの色は青色、リンク済みの色は紫色で、リンク文字には下線が引いてあります。これはスタイルシートで変更可能です。

このリンクの下線を消したい場合は、text-decorationというタグを用いて消せます。

.a2 a {
　　　　text-decoration:none;
　　　　}

また、画像にリンクを設定した場合は、画像の周りに枠が表示されてしまいます。この枠を消したい場合は、imgに対してborder：0を入力すればOKです。

img {
　　　　border:0;
　　　　}

次にリンクの色の設定の仕方を説明します。

a:link {
　　　　color:#ff0000;
　　　　}
a:hover {
　　　　color:#00ff00;
　　　　}
a:visited {
　　　　color:#0000ff;
　　　　}

link=リンクの色、hover=カーソルを当てたときの色、visited=リンク済みの色、を指定するタグです。

noneなら下線はなし、overlineは上線、underlineは下線、line-throughは消線です。

スタイルの適用の仕方はpのなかのaに指定するなら「p.class a {」としてください。

※付けたし：上の例ではlink-hover-visitedの順番ですが、link-visited-hoverの順番でないとなぜか不具合が・・・。

これを使って先ほどのサンプルのスタイルを変えてみましょう。カーソルを当てると色が変わります。

#a2 a:hover {
　　　　background-color:#666666;
　　　　}
a:link {
　　　　color:#ff0000;
　　　　}
a:visited {
　　　　color:#0000ff;
　　　　}
a:hover {
　　　　color:#00ff00;
　　　　}
a {
　　　　text-decoration:none;
　　　　}

するとこのようになります。→サンプル

ホームページの作り方（HP作成法）を解説

STEP1

STEP2

STEP3

STEP4

STEP5

STEP6

STEP7

■アンカー(a)のスタイルの変更