意外にやってない リンク<a>タグをCSSで正しく装飾する方法

Sponsored Link


いわゆる「リンク」を付ける「aタグ」ですが、疑似要素を使って「リンク済」などで色違いにする方法はよく紹介されています。

今回は、それにひと工夫した方法を正しい構文で紹介します。

いろいろなシチュエーションを想定した装飾


たかがリンクといえども、いくつかのシチュエーションを想定すると使いやすくなります。

サンプルリンク


・未訪リンク色
・既訪リンク色
・リンクであることを示す下部破線
・ホバーした時にリンクであることを強調する下部線を強調
・クリックした時に色を変更
・Javascriptでリンクする場合(aリンクをfalseする場合)にカーソルが表示されるように対応

CSS


基本的には以下をaタグに指定しておくと、どんなシチュエーションでも対応できて便利です。

/*
 * Link-style (imgのリンク線は「normalize.css」の「border: 0;」で消える[主にIE9以下とFirefoxで必要])
 */
a {
    cursor: pointer; /*hrefがない場合(JSでリンクする場合でもポインタを表示)*/
}
a:link {
    color: #39596C;
    border-bottom: 1px dotted #39596C;
    text-decoration: none;
}
a:visited {
    color: #95539e; /*visitedは色変更しか許されないが、微妙な色変更では分かりづらいし、派手な色は逆効果なので注意*/
}
a:hover {
    border-bottom: 1px solid #39596C;
}
a:active {
    color: red; /*背景色と被らない派手な色で*/
}

疑似要素の記述順は以下のようにしてください。
link > visited > hover > active

文字色は「link」と「visited」の疑似要素のみで大丈夫です。
なお、CSSの「visited」という擬似要素では、文字色の指定しかできませんので注意してください。

また、それが「リンク」であることを示すのは、「色」ではなく「下線」で行うほうが視覚的にわかりやすくなります。下線は「border-bottom」で指定してください。

ホバーしたことを示すのは、必須でもありませんので、控えめに「下線」を破線から直線に変更して表現しています。そもそも、hoverはスマホでは使いません。

クリックして、押している間だけ、色が赤色になり、なんとなくアクション感が出るようになっています。

ポインターは「href」が書かれていない場合や「href=””」のようにリンク先を非参照にした場合を想定します。これらの場合、大概はJavascriptでリンク動作を無効化(false)し、Javascriptで別の動作を書いていることがほとんどです。

その場合、HTML的にカーソルポインターが表示されないため、Javascipt側でポインターを強制表示するような仕組みですることになります。

しかし、上記では「そういったこともあるよね」ということで、CSSで「aタグ」にポインターを事前に強制表示しました。(Javascriptを使わない場合でも指定しておいて問題ありません)

:hoverでテキストの色は変えるのは非効率的手法


リンクにカーソルが乗ると、文字色を変える装飾は古くから行われ、今でも使われています。

しかしながら、リンク文字にホバーして色を変えたところで、さほど見た目は分かりません。そして、最近ではスマホやタブレットでカーソルを使わない場合もあります。カーソルを使わない以上はホバーも使用されません

PC用でカーソルを乗せた効果を見せたいなら、上記でやっているようにボーダーを変化させたり、背景色を変化させる方がより効果的です。

transition: は意味がありません


CSSの命令で「transition:」というのがあります。これはその効果を適用する変化の時間を指定するもので、時間が長いほど変化時間が長くなります。

さきほど、リンクにホバーした時に文字色を変化させるのは非効率的だとしましたが、ごくまれにこれにプラスして「色変化の時間を指定」しているCSSがあります。

しかし、リンクに「transition:」を適用する意味はありません。

リンクの変化はすぐに適用させて気が付いてもらうのが一番です。
わざわざ、時間を指定する必要はありません。

Sponsored Link

最新記事はトップページで!

京都発・地方が盛り上がるグルメや観光に撮影ロケ地の話題を提供!


購読するならRSSをご利用ください!

RSSはこちらをご利用ください。


マスコミ各社様の記事使用規約についてはこちらをご覧ください。

当ブログでは掲示板やSNSなど他メディアでURLや記事を紹介することはございませんので、掲示板などで記事を紹介されていても一切無関係です。誤解なきようお願いいたします。
当ブログで転載しているTweetはTwitter社の規約(2013/10)に準じた形式(API利用)によって許可された範囲で行われています。また、Tweet内容の所有権はTwitter社の規約によりTweet元のアカウント所有者にあります。そのため、当ブログでその所有権を主張するものではありません。Tweet内容については責任は負いませんので予めご了承ください。