リンクの設定を変えてみよう

色んなホームページを見ていると、リンクの部分が色々と凝ってたりしますよね。 当サイトみたいにリンクの場所にマウスを載せるとその部分だけ背景に色が付いたり、 文字の色が変わったり、文字がボタン押したみたいにちょっと右下に下がったりとかってのもありますよね。

今回は、そのようなリンクの設定の変更方法をご紹介します。

このリンクの設定の変更はスタイルシートを使っておこないます。 このリンクの設定は他の設定と少々違うので、これはこーいう形なんだと覚えておいてください。

a:link { text-decoration:underline; color:#0000ff; }
a:visited { text-decoration:underline; color:#6600ff; }
a:hover { text-decoration:none; color:#ff0000; background-color:#dddddd; }
a:active { text-decoration:none; color:#ff0000; }

↑ちなみにこれは当サイトの基本リンクの設定となっています。

a:link {}
これはリンクが貼られている文字をどのように表示させるか？です。

a:visited {}
これは既に訪問した事があるリンクが貼られている場合、どのように表示させるか？です。

a:hover {}
これは、リンク部分にマウスをのせた時、どのように表示させるか？です。

a:active {}
これはまさに今、リンクをクリックした時、どのように表示させるか？です。

この4つはこの順番（抜かすのは可）で表記しないとならないので注意してください。

そして、どのような設定ができるか？についてです。

color
文字の色の変更ですね。 「red」とか名前の指定でも良いですし、「#ff0000」のような指定でもOKです。

background-color
リンク部分の背景色の変更ですね。 文字色と同じように指定できます。

text-decoration
none　⇒　文字に装飾無し
underline　⇒　下線付き
overline　⇒　上線付き
linethrough　⇒　真中に線付き
blink　⇒　点滅・・・するはずなんですが何故か点滅しない仕様なので忘れちゃって良いです（汗

位置を変える
position:relative; top:2px; ←こんな感じで書きます。
これは、上から2pxという指定です。つまり、2px下に下がります。
同じように、「right」「left」「bottom」も設定できます。 右下に2pxづつ押した感じにしたいのならば、
postion:relative; top:2px; left:2px;　と書けばOkです。

この時、position:relative;を忘れてはいけません。 これは、「相対的に見て」という意味を付属しているのです。 仮に、position:absolute;とやってしまうと、絶対位置の設定になってしまい、 画面から見て設定した位置に配置されてしまうことになるので注意してください。

とまぁ、こんな所で有名どころは紹介したと思います。 後は、これらの組み合わせですね♪

■HP作成-応用編-

・外部ファイルを使ってみよう
・リンクの設定変更
・お気に入りに追加＋ホームに設定
・非推奨タグ・属性
・ドキュメントタイプについて
・ブラウザ互換について-width-
・ブラウザ互換について-継承-
・ブラウザ互換について-外部CSS-