リンクのレイアウト指定 - 趣味サイトのためのCSS3講座

リンク関係のレイアウトを指定する方法についての説明です。

未読リンクの指定:まだクリックしていないリンクの色指定です。a:link { color: 色名 } で指定します。

既読リンクの指定:すでにクリックしたリンクの色指定です。a:visited { color: 色名 } で指定します。

オンマウスの指定:リンクの上にマウスや指を乗せたときの色指定です。a:hover { color: 色名 } で指定します。

《例》

a:link { color: hotpink }
a:visited { color: red }
a:hover { color: green }

《表示結果》

リンクの色を指定しています

▲ページの先頭へ

「text-decoration: none」で、リンク部分の下線を消すことができます。
下記の1つ目の例で、「.none」の部分に指定すると正しく反映されないので、かならず「.none a」もしくは「a」に対して指定してください。2つ目の例の「a class="none2"」のようにa要素に直接class名を当てることも可能です。

《例》

<p class="none"><a href="#">リンク部分の下線を消しています</a></p>

.none a {
color: hotpink;
text-decoration: none;
}


<a class="none2" href="#">リンク部分の下線を消去しています</a>

.none2 {
color: orchid;
text-decoration: none;
}

《表示結果》

リンク部分の下線を消しています

リンク部分の下線を消去しています
▲ページの先頭へ
「display: block」でリンク部分の周りを「ブロックレベル要素」にしてボタン型のリンクを作成することができます。

《例》

CSS

.button {
display: block;
text-decoration: none;
color: white;
background-color: yellowgreen;
padding: 20px;
text-align: center;
width: 150px;
}

HTML

<a class="button" href="#">ボタン</a>

《表示結果》

ボタン
上記の例ではボタンの幅を150pxに指定していますが、「display: block」の部分を「display: inline-block」に変えて「width」の指定を解除すると、テキストの長さに合わせたサイズに自動調整されます。
.button {
display: inline-block;
text-decoration: none;
color: white;
background-color: yellowgreen;
padding: 20px;
text-align: center;
}

《表示結果》

テキスト

テキストテキストテキストテキスト

▲ページの先頭へ

>>CSS3講座メニューへ戻る