リンクテキストのインタラクションをなんとなく指定していったところ、一貫性に欠けコードもゴチャゴチャしていました。先月にかけて腰を据えて整理したところ、インタラクションもコードも納得の出来にすることができました。この記事では当ブログのテキストリンクのインタラクションのルールと実装の注意点をご紹介します。
パソコンのブラウザから閲覧している方は、マウスホバーやタブフォーカスを実際に行ってみてブログのインタラクションを確認しつつ読み進めてみてください。
リンクテキストの色と下線のインタラクション設計
リンクテキストに指定するスタイルは次の通りブラウザのデフォルト CSS に準じています。
- リンクには青系色、訪問済みリンクには紫系色を使う
- モノクロ環境等を考慮して下線を引く
以上を実施すると、サイトで使う色が増え下線も現れて、うるさい印象になってしまいます。
そこで、記事のボディー部分とそれ以外の部分に2種類のルールを用意することにしました。
ところで“リンク 下線”で検索すると下線の消し方を解説するページがいくつも並びます。確かにリンクテキストへの下線はデザインを損なっているかもしれません。しかしアクセシビリティの観点から引くべき、という考えに賛同します。
記事本文とそれ以外の部分で異なる2つのルールを設定
記事本文以外の部分は各ページでだいたい共通する内容であり、またその配置からリンクであることが判ります。そこで賑やかめのインタラクションは記事本文に対してだけ設定します。
そして記事本文以外の部分はリンクの下線を非表示とし :hover で表示します。また :visited のテキスト色を通常のテキスト色と同じにします。
| 記事本文 | それ以外の部分 | |
|---|---|---|
:link (未訪問リンク)の色 | 青系 | |
:visited (訪問済リンク)の色 | 紫系 | 黒系等通常のテキストカラーと同じ |
:link:hover の色 | 青系 | |
:visited:hover の色 | 紫系 | |
:link の下線 | 有 | 無 |
:visited の下線 | 有 | 無 |
:hover の下線 | 無 | 有 |
タブフォーカスのインタラクション、フォーカス中にマウスホバーが起こった際のインタラクションは両者で共通です。
モジュールレベルでの色の上書きを減らす・無くす
以上のルールはナビゲーションにも例外なく適用されます。
ナビゲーションは当初デザイン性を重視してリンクテキスト色を上書きしていましたが、これを辞めました。
未訪問のリンクという情報がユーザーに伝わるようになり、どんどん読み進めていくと青字が黒字に置き換わっていって画面が締まってくるのも気に入っています。
実装の際の注意
リンクテキストには、:hover, :focus, :active に加えて固有の疑似クラスである :link, :visited があります。これらが組み合わさって :visited:active, :link:focus:hover などのセレクタに対してスタイルを指定していきます。
指定に漏れがあるとユーザーの操作に対してインタラクションが発生しない（画面が変化しない）ことがあるので注意しなくてはいけません。
また、これだけでもなかなかにコードが長大になってしまうので、リンク色には上書き指定の不要なデザインを心がけることもポイントに思います。
当ブログの当該部分の CSS のソースコードは Github でご確認いただけます。