テキストリンクメニュー
リンクを作成するには、簡単なテキストリンクが一般的ですが、画像リンクの方が見栄えが良い為か企業のページによく見られます。画像リンクは画像を使う為に作るのが面倒です。また画像はファイルの大きさが大きくなる事、ファイルの数が増える事、代替テキストが必要な事等、見栄え以外に良いことは何も無いと思います。
テキストリンクと画像リンク
テキストリンクと 画像リンク楽天 を比較してみると、テキストリンクの特徴は
- 作成が簡単
- ファイルは大きくならない
- ファイル数は増えない
- 代替テキストは必要ないと言うより、代替えという概念が存在しない。
- 背景色を設定すれば見栄えもそこそこにできる
と良い事だらけです。私はテキストリンクを主に使うのを信条にしています。しいてテキストリンクの欠点を言えば、テキストリンクは、文字の大きさを変えると表示が崩れて、デザインしにくいことくらいです。でもこれは、文字の大きさを絶対指定すれば、表示が崩れることはなくなります。
標準的なテキストリンクの色
テキストリンクの色は何でも設定できますが、標準的な色に設定した方が訪問者が戸惑わなくて良いと思います。一般的には次のような色です。
| 未訪問のリンク(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 border="1" class="cent_td"> <tr> <th>メニュー等に使うリンクの例</th> </tr> <tr> <td><a href="http://">1.普通のリンク例</a></td> </tr> <tr> <td class="menu"><a href="http://">2.私の実現したいリンク例</a></td> </tr> </table>
ブロック要素の中で使うのがミソです。どうです簡単に実現できるでしょう。
リンクの途中で改行をさせない方法
メニュー等でテキストリンクを横に一列に並べていくと、リンクの途中で改行されて見にくいことがあります。これを防ぐには、次のようにスタイルシート(CSS)でホワイトスペース(white-space)にノーラップ(nowrap)を指定します。
a {white-space: nowrap;}
一つのリンクの長さをあまり長くしないようにします。
