You are here : トップ -> IT -> インターネット -> 周囲の余白や文字も含めてリンクをデザイン...

リンクをデザインする

以下の3つのリンクにマウスを載せてみて下さい。一見、サイト名部分だけがリンクのように見えますが、実際には周辺の余白も含めて、上下の文字列全体がリンクになっています。

 
 
 

上記のリンクでは、画像やスクリプトは一切使っていません。それぞれ、HTMLのa要素を使ってリンクを作り、スタイルシートを使って装飾することで実現しています。
このようなデザインが何の役に立つのかと問われても困るのですが、リンクを目立たせることや、リンク範囲を広くしてクリックしやすくすることには役立つかもしれません。実用的だからというわけではなく、スタイルシートを使えばこのような装飾も可能だという点をご紹介するための解説です。スタイルシートを使って、いろいろデザインを工夫する際の参考にしてみて下さい。
今回は、このリンクの作り方（スタイルシートの書き方）を、順を追ってご紹介致します。

STEP.1 HTMLを書く

まずは、リンクを作るHTMLを書きましょう。何も特殊な書き方はせず、a要素を使って記述するだけです。ただし、後からスタイルシートで部分別に装飾できるよう、span要素も併せて使います。
a要素で作成したリンクの中に、span要素を3つ使っています。構造は下図のようなものです。
最初のspan要素（siteguideクラスを付加したspan要素）は、内容に「リンク先サイトの紹介文」を含んでいます。
次のspan要素（sitenameクラスを付加したspan要素）は、内容に「サイト名」を含んでいます。
最後のspan要素（siteurlクラスを付加したspan要素）は、内容に「リンク先URL」を含んでいます。
上記のソースを表示させると、以下のように見えます。
まだ何も装飾を施していないので、ただ長い文字列がリンクになっているだけです。
※この記事中では、側のスタイルシートが適用されるため、標準の見え方とは少し異なります。
これにスタイルシートで装飾を加え、以下のように見えるようにします。

 
それでは、次にスタイルシートを記述して装飾してみましょう。
 

STEP.2 ベースの装飾を作る

それでは、スタイルシートを記述していきましょう。まずは、リンクを作っているa要素に対して、基本となる装飾を施してみます。
リンクを作る「a要素」に対して、6つのプロパティを使って装飾しています。このソースを使って、前ページのHTMLを表示させると、以下のように見えます。
※色が付加されておらず、一時的に下線も消えているので分かりにくいですが、枠線内が（余白部分も文字部分も）すべてリンクになっています。

 
上記のスタイルシートソースの意味は次の通りです。
■
display: block;
対象をブロックレベル要素のように表示させる指定です。これを記述することで、リンクを（p要素やdiv要素のような）ブロックのように扱えます。その結果、左端から右端まで余白を含めた全体がリンクになります。
■
padding: 0.5em;
枠線の内側の余白を0.5文字分にする指定です。余白がないと詰まって見えるので加えています。値は好きなように修正して下さい。
■
border: 1px solid #ccccff;
枠線「太さ1ピクセル・実線・淡い青色」を周囲に引く指定です。（3つの値は半角スペースで区切って記述します。）
■
text-align: center;
文字列をセンタリング（中央寄せ）で表示する指定です。左寄せなら left 、右寄せなら right と記述します。
■
text-decoration: none;
リンクの下線を消すための指定です。（斜体や取消線などの装飾も同時に消えます）
※リンクの下線は、一時的に消します。この後の記述で一部分にだけ下線を復活させます。
■
line-height: 1.5;
行間を指定しています。line-heightプロパティは正確には「行の高さ」を指定するプロパティです。ここでは「1.5」を指定しているので、「文字の1.5倍の高さ」が行の高さになります。つまり、「0.5文字分の行間」ができるということです。
次に、span要素に対してスタイルを指定して、リンク内部の各部分に装飾を施します。
 

STEP.3 各部分の装飾を作る

次に、a要素の中に含まれる3つのspan要素に対して装飾を施します。
3つのspan要素は、上から順に「紹介文用」・「サイト名用」・「URL用」です。主に文字サイズやフォントに関する装飾を行っています。表示色は後から状況別に指定するため、ここでは記述していません。
このソースを使ってHTMLを表示させると、以下のように見えます。
※側のスタイルシートも同時に適用されているため、本来の見え方とは少し異なります。

 
上記のスタイルシートソースの意味は次の通りです。
■
font-size: 70%; ／ font-size: 75%;
文字サイズを指定しています。小さめに表示されるようにしています。
■
text-decoration: underline;
リンクに下線を加える指定です。前ページでは、text-decorationプロパティに「none」を指定して、リンクの下線を消す装飾を記述しました。ここでは、「サイト名」の箇所にのみ下線を表示するようにしています。値に「underline」を指定すれば、下線が加わります。
※下線を完全に消してしまうとリンクだと分かりづらくなるので、サイト名にだけは下線を表示するようにしています。
■
font-family: Verdana,Arial,sans-serif;
表示に使われるフォント名を指定しています。カンマを使うことで、優先順にフォント名を列挙できます。「Verdana」がある環境では「Verdana」フォントで表示され、それがなくても「Arial」がある環境では「Arial」フォントで表示されます。それもなければ、何らかのゴシック系フォント（sans-serif）で表示されます。
さて、ここまでの記述では、マウスをどう動かしても表示色は変化しません。最後に、状況別に色が変化するようスタイルシートを記述しましょう。
 

STEP.4 状況に応じて色を変化させる装飾を作る

最後に、状況別に色が変化するようスタイルシートを記述します。
リンクの状態によって別々に装飾するには、link・visited・hover各疑似クラスを使います。 link疑似クラスはリンク先が未訪問だった場合、 visited疑似クラスはリンク先が訪問済みだった場合、 hover疑似クラスはリンクの上にマウスが載ったときの装飾を指定できます。
※選択中の場合を装飾できる active疑似クラスもありますがここでは使っていません。
このソースを使ってHTMLを表示させると、以下のように見えます。

 
枠内にマウスを載せてみると、色が変化することが確認できるはずです。
上記のスタイルシートソースの意味は次の通りです。
■
background-color: #ccffff;
背景色を水色（#ccffff）にする指定です。リンクの上にマウスを載せると、リンクの背景がこの色になるようにしています。
■
color: blue;
文字色を青色（blue）にする指定です。上記のソースでは、値として「blue」（青）のほか、「black」（黒）・「green」（緑）・「#800080」（紫）などを用いています。
■
border-color: #0000ff;
枠線の色を青色（#0000ff）にする指定です。枠線を描く際には、他に「太さ」と「線種」の指定が必要ですが、それはa要素に対する装飾として過去に記述しているのでここでは省略できます。ここでは、線の色を変化させたいだけなので、border-colorプロパティのみを記述しています。線種や太さも同時に変化させたいなら、border-styleプロパティ（線種）やborder-widthプロパティ（太さ）も記述します。
※色の指定は、「blue」と記述しても「#0000ff」と記述しても同じ（青色）です。
その他、以下のような表示色になるよう疑似クラスを用いて記述しています。
［ガイド文（紹介文）の部分］
－リンクが未訪問の場合： 黒色（black）
－リンクが訪問済みの場合： 黒色（black）
－リンクの上にマウスが載った場合： 青色（blue）
［サイト名の部分］
－リンクが未訪問の場合： 青色（blue）
－リンクが訪問済みの場合： 紫色（#800080）
－リンクの上にマウスが載った場合： 青色（blue）
［URLの部分］
－リンクが未訪問の場合： 緑色（green）
－リンクが訪問済みの場合： 緑色（green）
－リンクの上にマウスが載った場合： 青紫色（#cc00ff）
以上で装飾はほとんど終わりです。
今のままでは、リンクが横幅いっぱいに広がって表示されます。もし、横幅を制限したいならwidthプロパティを使って横幅を指定します。
 

STEP.5 横幅を制限する場合

リンクの横幅を、親要素の幅いっぱいに広げずに制限したい場合は、widthプロパティを書き加えます。下記のように、a要素に対するスタイルを記述している箇所に追記します。
widthプロパティは横幅を指定するプロパティです。値に「300px」を指定すれば、横幅が300ピクセルになります。この値には、余白や枠線の太さは含まれない点に注意して下さい。（ここでは、横幅の指定が300pxでも余白や枠線の太さがあるため、合計の横幅は300ピクセルよりも大きくなります。）
※Internet Explorerの互換モードでの表示だと、余白や枠線の太さを含めた横幅が300ピクセルになります。
表示すると、以下のように見えます。

 
以上で装飾は終わりです。
最後に、これまでのソースをまとめて掲載しておきます。コピー＆ペーストして使ってみる際にご活用下さい。
 

STEP.6 ソースのまとめ

今回のサンプルを実現するすべてのソースをまとめて掲載しておきます。コピー＆ペーストして使ってみる際にご活用下さい。
既存のページに書き加えても他のデザインを崩さないよう、「boxlinks」クラスを加えたp要素（
～
）内にリンクを記述しています。スタイルシートも、このp要素内に含まれるリンク（a要素）のみを対象に装飾するよう記述しています。
 
■HTML：
■スタイルシート：
表示すると、以下のように見えます。


◆ガイド文◆

●サイト名●

★リンク先URL★
サイト名やURLなどの文字を加えてみると、以下のような感じになります。
 

リストを使って作る場合

上記では、リンクをp要素で囲んでいます。複数のリンクをたくさん並べる場合は、p要素よりはul要素とli要素を使って「リスト」の形式にした方がいいかも知れません。（冒頭のサンプルもリストを使って記述しています。）その場合のソースは、以下のページで別途ご紹介しています。
 

前のスレッド ：ホームページZEROで作るホームペ�...  || 次のスレッド ：必要なプロトコルの確認をしよう...