Linkいわゆる「リンク」を付ける「aタグ」ですが、疑似要素を使って「リンク済」などで色違いにする方法はよく紹介されています。今回は、それにひと工夫した方法を正しい構文で紹介します。意味がありませんいろいろなシチュエーションを想定した装飾たかがリンクといえども、いくつかのシチュエーションを想定すると使いやすくなります。・Javascriptでリンクする場合(aリンクをfalseする場合)にカーソルが表示されるように対応CSS基本的には以下をaタグに指定しておくと、どんなシチュエーションでも対応できて便利です。/*背景色と被らない派手な色で*/}疑似要素の記述順は以下のようにしてください。active文字色は「link」と「visited」の疑似要素のみで大丈夫です。CSSの「visited」という擬似要素では、文字色の指定しかできませんので注意してください。それが「リンク」であることを示すのは、「色」ではなく「下線」で行うほうが視覚的にわかりやすくなります。下線は「border-bottom」で指定してください。ホバーしたことを示すのは、必須でもありませんので、控えめに「下線」を破線から直線に変更して表現しています。そもそも、hoverはスマホでは使いません。クリックして、押している間だけ、色が赤色になり、なんとなくアクション感が出るようになっています。ポインターは「href」が書かれていない場合や「href=””」のようにリンク先を非参照にした場合を想定します。これらの場合、大概はJavascriptでリンク動作を無効化(false)し、Javascriptで別の動作を書いていることがほとんどです。その場合、HTML的にカーソルポインターが表示されないため、Javascipt側でポインターを強制表示するような仕組みですることになります。上記では「そういったこともあるよね」ということで、CSSで「aタグ」にポインターを事前に強制表示しました。(Javascriptを使わない場合でも指定しておいて問題ありません):hoverでテキストの色は変えるのは非効率的手法リンクにカーソルが乗ると、文字色を変える装飾は古くから行われ、今でも使われています。リンク文字にホバーして色を変えたところで、さほど見た目は分かりません。最近ではスマホやタブレットでカーソルを使わない場合もあります。カーソルを使わない以上はホバーも使用されません。PC用でカーソルを乗せた効果を見せたいなら、上記でやっているようにボーダーを変化させたり、背景色を変化させる方がより効果的です。意味がありませんCSSの命令で「transition:」というのがあります。これはその効果を適用する変化の時間を指定するもので、時間が長いほど変化時間が長くなります。さきほど、リンクにホバーした時に文字色を変化させるのは非効率的だとしましたが、ごくまれにこれにプラスして「色変化の時間を指定」しているCSSがあります。リンクに「transition:」を適用する意味はありません。リンクの変化はすぐに適用させて気が付いてもらうのが一番です。時間を指定する必要はありません。Link最新記事はトップページで!「オスミツキ!」のトップページはこちらです。京都発・地方が盛り上がるグルメや観光に撮影ロケ地の話題を提供!購読するならRSSをご利用ください!RSS「お墨付き!」(osumituki.com)RSSはこちらをご利用ください。マスコミ各社様の記事使用規約についてはこちらをご覧ください。当ブログでは掲示板やSNSなど他メディアでURLや記事を紹介することはございませんので、掲示板などで記事を紹介されていても一切無関係です。誤解なきようお願いいたします。当ブログで転載しているTweetはTwitter社の規約(2013/10)に準じた形式(API利用)によって許可された範囲で行われています。Tweet内容の所有権はTwitter社の規約によりTweet元のアカウント所有者にあります。そのため、当ブログでその所有権を主張するものではありません。Tweet内容については責任は負いませんので予めご了承ください。記事が流用・引用されている件や記事を紹介する場合に注意していただきたいことオスミツキ!.Kyoto.Japan./g,'>');jQuery(this).html(text);});。