2017年07月 / 06月≪ 12345678910111213141516171819202122232425262728293031≫08月
--.--.--(--)
Top Page > スポンサー広告 > 【xhtml/css】linkを記述する時の順序は「LVHA(ラブハ)」で覚えましょう

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

タグ(ブログ内検索もできます)

--:--  |  スポンサー広告  |  EDIT  |  Top↑
2009.02.21(Sat)
Top Page > CSS/XHTML > 【xhtml/css】linkを記述する時の順序は「LVHA(ラブハ)」で覚えましょう

【xhtml/css】linkを記述する時の順序は「LVHA(ラブハ)」で覚えましょう

現場のプロから学ぶXHTML+CSS
制作の現場から離れてしまっても、忘れずに覚えているというのが昔取った杵柄。このブログでも少しづつ小出しで紹介していますが、最も基本的で忘れちゃいけないのがlinkの記述順序です。

linkはテキストリンクの色の指定する際に使いますが、4つの擬似要素があり、link、visited、hover、activeの順序で記述しなければ意図したように動きません。それぞれの頭文字を取って「LVHA(ラブハ)」で覚えておきましょう。
a:link { color:#06c; text-decoration:none; }
a:visited { color:#609; text-decoration:none; }
a:hover { color:#F60; text-decoration:underline; }
a:active { text-decoration:none; }

リンクの色が意図した通りにならない、既にアクセスしたはずのリンクなのに色が変わらないという場合は、記述順序が誤っている可能性が高いです。
些細なことだけに意外と見落としがちです。まずはCSSで正しい順序で記述しているか確認しましょう。

何故この順序でならなければいけないのかは、CSSの基本を考えてみると分かりやすいです。CSSでは同じセレクタに対して異なった指定をした場合に、後から指定した方、つまり下に書いてある方が優先して適用されます。

そのため、link、visited、hover、activeの順序で書いた場合は、linkよりもvisitedが、visitedよりもhoverが、hoverよりもactiveが優先されることになります。
当然linkの前にvisitedを書けば、linkが優先して適用されて、visitedで指定しても無効になってしまうという訳です。

ここまで書いて、検索して調べてみたらナイスなブログ記事を見つけました。
jmblog.jp - :link、:visited、:hover、:active の記述順序とその覚え方
http://jmblog.jp/archives/179


海外では、この記述順序ルールを link-visited-hover-active の頭文字をとって「LVHA」と言うようです。ちょっと覚えづらいなぁと思っていたのですが、たまたま見かけた海外のブログにうまい覚え方が紹介されていました。

LOVE and HATE かぁ。ちょっと意味深だし覚えやすいですね。


「LOVE and HATE」とは本当に意味深ですね。andの前後で対比になっているのも印象的。それだけに覚えやすそうです。
関連記事

タグ(ブログ内検索もできます)html xhtml link リンク

13:54  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑

関連エントリー

Loading


Comment

コメントを投稿する

※コメントは承認するまで表示されません。


管理者だけに表示

▲PageTop

Trackback

この記事のトラックバックURL

この記事へのトラックバック

 | BLOGTOP | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。