HTMLとCSSで作るウェブサイト作成入門

CSS(９)リンクのスタイル

　ウェブページ内のリンクと言えば、リンクの文字が下線付きで青色などに着色され、クリックすると赤色などに変化し、一度クリックしたリンクは紫色に変化する、というようにさまざまな状態(スタイル)があります。このスタイルは、当然、CSSによって変更することができます。例えば、以下のサンプルを見て下さい。

[HTMLサンプル]　※基本タグは省略
<a href="aaa.html">リンクA</a><br>
<a href="bbb.html">リンクB</a><br>
<a href="ccc.html">リンクC</a>

[CSSサンプル]
a {
    color: red;
}
a:link {         /*未訪問のリンク*/
    color: red;
}
a:visited {     /*訪問後のリンク*/
    color: silver;
}
a:hover {     /*マウスをのせたとき*/
    color: yellow;
}
a:active {    /*クリック中*/
    color: gray;
}

[サンプルのブラウザ表示結果]

　CSSサンプルのコメントの通り、未訪問リンクの場合は文字色を赤に、訪問済みの場合はシルバーに、マウスオーバー状態で文字色を黄色に、マウスクリック時にグレーに設定しています。
　ウェブページでよくある、メニューバーは、これを応用したものです。参考までに、上記のサンプルCSSを修正し、以下のサンプルCSSの赤字部分を追加すると、文字だけのリンクが、四角い領域を持つリンクへと変化します。後は、この四角い領域を、適切に横並べや縦並べにすれば、ウェブページのメニューバーが実現できます。赤字部分で指定していることは、そのコメントの通りです。display: blockによって、本来インライン要素である<a>タグをブロックレベル要素に変換した上で、幅と高さ、背景色を設定し、中央寄せを行っています。また、マウスオーバー時の背景色も変更しています。詳しくは関連の資料を確認して下さい。また、実際にメニューバーを構築する場合には、後続の「ウェブページの実装」編の資料をご覧下さい。

[CSSサンプル]　※HTMLは上記と同じ。
a {
    display: block;    /*リンクをブロックレベル要素に*/
    width: 100px;    /*四角の幅を100ピクセルに*/
    height: auto;    /*四角の高さを自動に*/
    background-color: lightyellow;  /*背景を薄黄色に*/
    text-align: center;    /*中央寄せ*/
    color: red;
}
a:link {         /*未訪問のリンク*/
    color: red;
}
a:visited {     /*訪問後のリンク*/
    color: silver;
}
a:hover {     /*マウスをのせたとき*/
    color: yellow;
    background-color: red  /*背景を赤色に*/
}
a:active {    /*クリック中*/
    color: gray;
}

[サンプルのブラウザ表示結果]