リンクテキストを破線で飾る
本日２件目です（1件目はMovableTypeのお話）。Yahoo!のニュースを見ているうちに飛ばされてしまうサイトに、リンクテキストを「_ _ _ _ _ _」(破線)で飾っているサイトがあった。マウスをあわせると、一本線になるの。カッコイイ～(￣∇￣)一本線よりも目を引くので一目でリンクテキストだと分かりやすい。にもかかわらず、一本線よりも黒の面積が少ないので、ページを汚さない、目障りではない。そこで早速導入。 ⇒ちいブロ－エコと節約と私－＊＊＊＊＊ここからが本題＊CSSです。 a タグに下線を引くといったら「text-decoration」なんだけど、あいにく破線は設定にない様子（私は知らない）。そこで、以下のように「border:dashed」で対応しました。a,a:link,a:visited{ text-decoration: none; border-bottom: dashed 1px;}-------------Hirasawaさんから教えていただきました---------------------CSS HappyLifeのHirasawaさんから、もっとシンプルな書き方を教えていただきました。こちらの書き方は、テキストと破線の色が統一できるので、よりスッキリ見せることができると思います。現在、ちいつもblog－エコと節約と私－ではこちらを使っています。a:active,a:hover { text-decoration: underline; border: none;}-------------Rittyが考えたやり方です-----------------------------------a:active,a:hover { text-decoration: underline; border: none;}------------------------------------------------どうでしょう？もっと簡単に方法がある方は、教えてくださいね。
出産・子育て
ファッション
美容・コスメ
健康・ダイエット
生活・インテリア
料理・食べ物
ドリンク・お酒
ペット
趣味・ゲーム
映画・ＴＶ
音楽
読書・コミック
旅行・海外情報
園芸
スポーツ
アウトドア・釣り
車・バイク
パソコン・家電
そのほか
すべてのジャンル
