Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームコース別ガイド一覧>訪問済みの状態のリンクをデザインしよう!

訪問済みの状態のリンクをデザインしよう!(visited 疑似クラス)

普通コースじっくりコースアイコンの説明普通コースじっくりコースアイコンの説明

疑似クラス a:visited { 〜 }

CSS一覧プロパティ辞典 … visited 疑似クラス

visited 疑似クラスを使うと、訪問済みの状態のリンクをデザインすることができます。link 疑似クラスが指定できるのは href 属性を設定した a 要素のみです。書式の通りセレクタに「:visited」を付けて使用します。

主なデザインの指定

文字の色、背景色、背景画像の変更、リンク指定時の下線の表示などを変更できます。それぞれ color プロパティbackground-color プロパティbackground-image プロパティtext-decoration プロパティを使用すればこれらのデザインを変更できます。

使用例

では訪問済みの状態のリンクの文字の色を赤にしてみましょう!

記述例
<style type="text/css">

a:visited { color: red; }

</style>
</head>
<body>

<p><a href="sample.html>おいしいチャーハンの作り方</a></p>

</body>
</html>

使用例の表示

[適応前のブラウザでの表示例]
一人暮らしの前向きな料理
link
↓
[適応後のブラウザでの表示例]
一人暮らしの前向きな料理
link

このように訪問済みの状態のリンクの文字の色が赤になります!なお、このブラウザでの表示例は画像により表現しており、リンク設定はなされていません。

関連情報ページ

CSS一覧プロパティ辞典

その他

ロゴ
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system