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;
}

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

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

Last updated January 7, 2007 01:42:53 AM
コメント(7) | コメントを書く

[HTML＆CSS] カテゴリの最新記事

■コメント

さっそく

ピピンさん

これは、かっこいい！！
と、いうことで、新雑学的日記で使わせてもらいました。

ありがとうございますm(_ _)m
(January 7, 2007 04:08:57 PM)

返事を書く

良い感じo(*^▽^*)o~♪

Ritty さん

良い感じですね～。まだ一般的じゃないから、余計良い気持ち☆

どういたしまして(o^-')b (January 7, 2007 05:16:39 PM)

返事を書く

Re:リンクテキストを破線で飾る(01/06)

m-nao3166 さん

おぉ、行ってみてわかりました！！
カッコいい☆

見つけたのもすごいけど、やってみるのはもっとすごい♪
えらい！Rittyさん（*^_^*） (January 11, 2007 10:25:46 PM)

返事を書く

へへ(^-^)v

Rittyです！さん

いっぱい褒めてくださってありがとう♪
また自信の貯金箱の中身が増えました！ (January 11, 2007 10:40:15 PM)

返事を書く

Re:リンクテキストを破線で飾る(01/06)

Hirasawa さん

はじめまして。
CSS HappyLifeとかいうブログ書いてるHirasawaという者です。

a:active，a:hover を
text-decoration: underline;
でやるより、同じborder-bottomでdashedをsolidに変えてやる方がチョコっとキレイに行くと思いますよ。

ではでは、いきなり失礼しましたっ。 (January 14, 2007 02:56:48 AM)

返事を書く

Hirasawaさんへ

Ritty さん

レスが遅くなりました（楽天メンテナンスに阻まれ、、、←言い訳(;^_^A

さっそくちいつもblogで導入しました。テキストと同色にしたので違和感がなくなりスッキリしました(^-^)vありがとうございます！！

ブログの方にお邪魔しました。眠たくて電池切れを起こしていてコメントは中断しましたが、CSSのコメントアウトの書き方が気に入りました(^-^)またお邪魔します。

(January 15, 2007 11:49:50 PM)

返事を書く

Re:Hirasawaさんへ(01/06)

Hirasawa さん

Rittyさん

どういたしまして～。

訪問ありがとうです。
コメントアウトの書き方が気に入ったって面白いトコロを気に入っていただき、ありがとうございます（？

ではでは、良きブログとCSSlifeを～♪ (January 17, 2007 10:14:00 PM)

返事を書く