Homepage Zero ガイド
logo

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

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

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

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

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

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

疑似クラス a:link { 〜 }

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

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

主なデザインの指定

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

使用例

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

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

a:link { 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