テキストリンクメニュー

テキストリンクと画像リンク

　リンクを作成するには、簡単なテキストリンクが一般的ですが、画像リンクの方が見栄えが良い為か企業のページによく見られます。
　画像リンクは画像を使う為に作るのが面倒です。また画像はファイルの大きさが大きくなる事、ファイルの数が増える事、代替テキストが必要な事等、見栄え以外に良いことは何も無いと思います。

　テキストリンクなら

作成が簡単
ファイルは大きくならない
ファイル数は増えない
代替テキストは必要ないと言うより、代替えという概念が存在しない。
背景色を設定すれば見栄えもそこそこにできる

　と良い事だらけです。私はテキストリンクを主に使うのを信条にしています。

スポンサードリンク

標準的なテキストリンクの色

　テキストリンクの色は何でも設定できますが、標準的な色に設定した方が訪問者が戸惑わなくて良いと思います。一般的には次のような色です。

未訪問のリンク(Aタグ)	青色
訪問済みリンク(A:visited)	紫色
リンクにカーソルが乗った時(A:hover)	赤色

　またリンクはアンダーラインがあるのが一般的です。できるだけ下線(アンダーライン)も設定しましょう。エキサイトのホームページがこの通りの設定になっています。
　私はアンダーラインを設定しています。ホーバー時にはバックグラウンドカラーも設定して使い易くしています。

テキストリンクメニューで前後の空白部もリンクさせる

　テキストリンクメニューでテキスト以外のところをクリックしても普通はリンクできません。しかし、表の中の空白部分でもリンクできる方法をHTMLだけで実現する方法を考えていたのですが、うまくできましたので紹介します。

　ジャバスクリプトでも紹介された例を見ることがあります。JavaScript ではどうしてもファィルの大きさが大きくなりますし、JavaScript に対応していないブラウザではうまくいきません。
　次の例で説明します。

テキストメニューに使うリンクの例
1.普通のリンク例
2.私の実現したいリンク例

　この「1」が普通のリンクで、表の中の空白部分はリンクされていません。「2」が私の実現したいリンクです。前後の空白部分もリンクされています。HTMLだけで簡単に実現できます。

スポンサードリンク

　私の場合は外部スタイルシート(style.css)を使用しています。理由はトップページにも書いている通り「外部スタイルシートを使用して各ページのデザインを統一すると同時に、HTMLファイルの大きさを出来るだけ小さくする努力をした」ということです。

　スタイルシートの中で、リンクに関係した部分は

A {font-weight: bold}
A:link {color: #0000ff; background-color: #ffeedd; position:relative}
A:visited {color: #6600cc; background-color: #eeeedd; position:relative}
A:hover {color: #ff0000; background-color: #ddffff; text-decoration: none;
position:relative;top:1px;left:1px}
A:active {background-color: #eeff99; text-decoration: none}
.menu a {font-size: 13pt; display:block; text-align: center}

　のようになっています。この一番下の行で　class　に文脈セレクターでメニューに使う文字の大きさとブロック要素等を設定しています。

　また上記のリンク部分のHTMLは次のようになっています。

<TABLE cellspacing="0" cellpadding="0" border="1">
<TBODY>
<TR>
<TH>メニュー等に使うリンクの例</TH>
</TR>
<TR>
<TD align="center"><A href="http://" target="_self">1.普通のリンク例</A></TD>
</TR>
<TR>
<TD class="menu"><A href="http://" target="_self">2.私の実現したいリンク例</A></TD>
</TR>
</TBODY>
</TABLE>

　ブロック要素の中で使うのがミソです。どうです簡単に実現できるでしょう。
2007.03.22