Rittyのサイト作成日記

< 新しい記事

新着記事一覧(全211件)

過去の記事 >

January 6, 2007

リンクテキストを破線で飾る

(7)

テーマ：ホームページ作成の悩み(550)

カテゴリ： HTML＆CSS

本日２件目です（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;
}

どうでしょう？もっと簡単に方法がある方は、教えてくださいね。

お気に入りの記事を「いいね！」で応援しよう