七色リンク
今日はCSS（スタイルシート）の一工夫のお話です。
CSS流行ってますよね〜。
解説サイトもとても多い。
基本的なことはそちらにお任せして、ちょっと一工夫した使い方の例をご紹介します。
リンクの文字は通常の文字と色が違ったり、下線が引いてあったり、
ポインターの形が変わったりしますよね。
CSSを使わなくても、リンクの文字の色を変えるとこはBODYタグのオプションで可能。
CSSを使うと、下線を消したり、ポインターを重ねた時に書式が変わったり、もう一工夫出来ます。
下記のサンプルはAタグで囲まれた文字、つまりリンクのかかった文字です。
（サンプルなので他のページへ飛びませんが）
ポインターを重ねてみてください。
【設置方法】
■サンプル1の場合
上記のCSSを<head>〜<head>内に埋め込みます。
<body>内の書式を反映させたいリンクの部分に
<a href="〇〇" class="link1">赤いトップページ</a>
<a href="〇〇" class="link2">橙なプロフィール</a>
このように、classの指定をします。
■サンプル2の場合
上記のCSSを<head>〜<head>内に埋め込みます。
<body>内の書式を反映させたいリンクの部分に
<kbd><a href="〇〇" class="link1">： 赤いトップページ ：</a></kbd>
<kbd><a href="〇〇" class="link2">： 橙なプロフィール ：</a></kbd>
<kbd>タグでリンク全体を囲み、Aタグにクラスの指定をします。
【解説】
■サンプル1,2共通の解説
a.link1 、a.link2・・・Aタグ（リンクタグ）に対していくつのも書式を用意する場合、
classで分けておきます。 .link1 がクラス名ですが、これは任意の名前でOKです。
英数半角で分かり易い名前をつけてください。
a.link1:hover、a.link2:hover・・・こちらも
.link1 の部分がクラス名ですので、
任意の名前に変更可能です。
ただし、a.link1とa.link1:hoverはセットになっていますので、
共通したクラス名にしておきます。
■サンプル1の解説
a.link1 { 〜〜〜 }
ここで { }
内は、
Aタグで何もアクションを起こしていない状態の書式を書いておきます。
この例では、
font-size:10pt フォントのサイズは10ポイント
color:#E65E6B （フォントの）色は#E65E6B |
ということを指定しています。
a.link1:hover { 〜〜〜 }
ここで { }
内は、
Aタグで囲んだ文字（リンク）にポインターを重ねた時の書式を書いておきます。
この例では
color: #666666 （フォントの）色は#666666
font-size:10pt フォントのサイズは10ポイント |
ということを指定しています。
■サンプル2の解説
a.link1 { 〜〜〜 }
{ }
内でAタグでアクションを起こしていない状態の書式を書きます。
この例では
font-size:10pt; フォントのサイズは10ポイント
background-color:#EBEBEB; テキストの背景色は#FBFBFB
text-decoration:none; （りんくの）下線は無し
color:#000000; （フォントの）色は#000000 |
a.link:hover { 〜〜〜 }
{ }内でポインターを重ねた時の書式を書きます。
この例では
background-color:#FFDCDE; テキストの背景色は#FFDCDE
color:#000000; （フォントの）色は#000000 |
サンプル2の場合、BODY内のリンクをかける文字にも細工が必要です。
<kbd><a href="〇〇" class="link1">： 赤いトップページ ：</a></kbd>
サンプルのように､いくつも並べる場合､幅がそろっていた方がキレイですよね。
文字を等幅にするため<kbd></kbd>タグで囲んでおきます。
使う文字も半角か全角かどちらか片方で統一します。
今回、文字幅だけでは面白くないので、左右に余白を設けました。
ここで使用するスペースも文字が全角なら全角、半角なら半角を使用します。※1参照
また、文字の後にスペースを入れても反映されないので：を前後に入れてみました。
：の部分はなんでもOK。｜とか［ とか * とかお好きなものでどうぞ。
ここでも半角、全角を合わせてくださいね。
※1
<kbd><a href="〇〇" class="link1">: Red TopPage :</a></kbd>
すべて半角で書く場合、スペースは普通にいれても一つしか反映されません。
そこで、文字コードを使って半角スペースを入れます。
これがスペースの文字コード。
<kbd>
<a href="〇〇" class="link1">: Red TopPage :</a>
</kbd>
こんなかんじです。
文字を飾るCSSのオプションは他にも沢山あります。
慣れてきたらいろいろ試して、オリジナリティを出してみてね。
スタイルシート使いまくりでどこも同じおそろいの・・・なーんていうのから脱出！
NOEL
'03.06.29 |