• ベストアンサー

text-decorationで上下に線

text-decorationで上下に線をつけた場合ぴったりになってしまうのですが、隙間を開けることはできないのでしょうか http://www.htmq.com/style/text-decoration.shtml にもそのような方法がありませんでした。

noname#226032
noname#226032
  • CSS
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • celtis
  • ベストアンサー率70% (2266/3204)
回答No.1

文字にくっつかないように上下線を表現したい場合は、paddingとborderの組み合わせでうまくいくと思います。 CSSでリンクの文字と下線の間隔(スペース)を空ける方法 http://www.koikikukan.com/archives/2012/03/13-025555.php

noname#226032
質問者

お礼

やはりこのやり方しかないのですね。 問題はブロック要素の場合中のテキストとブロック要素の横幅がぴったりにならないので、毎度文字数通りのwidthをあててやらないといけないことですね。 インライン要素にしてしまう方法もありますが。

関連するQ&A

  • 何故か一部だけ、text-decoration: none; にならない・・

    a:link { color: #000000; text-decoration: none; } a:visited { color: #339999; } a:hover { color: #FF6600; text-decoration: underline; } これを外部スタイルシートで使っているのですが、 いろいろあるリンク先の一部(全体の5%ぐらい)だけ何故か「text-decoration: none;」 にならずアンダーラインが表示されます。 もともとはアンダーラインがあった状態だったのもを変更したのですが、 一部変更にならないという症状です。 ・どのページでも同じような事が起こっています。 ・リンク先に共通性はないと思います。 これは何によるものなのでしょうか?

  • cssでハイパーリンクの線を消したい

    <style type="text/css"> a.noline { text-decoration: none; } </style> <a href="http://www.yahoo.co.jp/">yahooを開く</a> これで、リンクの線が消えると思ったら、消えません。 どこがまちがってますか?

  • Operaのバージョン9でa:hover { text-decoration: underline; }が動作しない

    Operaのバージョン9で以下のCSSが正常に動作しません。 症状:リンクにマウスオーバーしても下線が表示されない。 使用OS:Windows XP SP2 <html> <head> <style type="text/css"> a { text-decoration: none; } a:hover { text-decoration: underline; } </style> </head> <body> <ul> <li><a href="#">sample</a></li> <li><a href="#">sample</a></li> <li><a href="#">sample</a></li> </ul> </body> </html> この問題を解決するにはどうすればよいのでしょうか? ご存知の方がおられましたらご回答をよろしくお願いします。

  • リンクの線を消してもう一度表示したい。ところが・・・。

    DTIでブログを作成している者です。 「リンクの下線を消して、ポイントしたときだけリンクの線が出るようにしたい」と思っています。 リンクの線を消すには、 <STYLE TYPE="text/css"> <!-- A { text-decoration:none } --> </STYLE> と入力すればよいとHTML辞書に書いてありました。 リンクをポイントしたときに下線が出るようにするには、 <STYLE TYPE="text/css"> <!-- A { text-decoration:none } A:hover {color:#FF0000;text-decoration:underline;} --> </STYLE> とタグを打ち込めばOKと書いてありました。 ここで、「リンクの下線を消してポイントだけ表示させる」ため、上記の二つ目のタグを打ち込んで文章を書き、リンクを作ったのですが、「リンクの下線を消して、ポイントした時だけ」という形では表示されません。(プレビュー画面ではちゃんとそうなっているのですが、その後ブログ上で見ても、下線もなければ、ポイントしても下線が出てきません。IEでもスレイプニルでも同じです。)正しくはどうやればいいのでしょうか? あと、リンクごとによって「ポイントする前の最初の文字の色」を変更したいのですが、どのような順序でやればよいでしょうか?例えば最初ピンク色に設定したとして、その文章をリンクすると青文字になってしまいます。その場合、青色になった箇所のソースで、その単語の直前に<FONT color="#ff00ff">のタグを打ち込む、というやり方であってますか?教えてください!

  • コンテンツを入れるboxを上下左右ともに真ん中にしたい

    コンテンツを入れるboxを上下左右ともに、スタイルシートで真ん中に設置する方法を知っていたら教えてください。 左右の場合だと「margin:0 auto」や「text-align:center」などありますが、上下の場合はどうすればいいのでしょう? 詳しくは図を見て頂けれるとイメージつきやすいかもしれません。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 教えて下さい

    HP製作中ですが cssで解らないところがあり いろんなサイトを探していたところ こんなサイトを見つけました http://www.htmq.com/style/position.shtml 左上に 赤文字で fixedの場合の表示 がスクロールしても ずーとついてきます 自分のサイトにもこのようにしたいのですが どうしたら出来るのでしょうか 解る方お願いします 参考になるサイト紹介してください  

    • 締切済み
    • CSS
  • メタタイトルとは?

    「メタタイトル」という記述が http://bazubu.com/wordpress-seo-10752.html にあるのですが、 http://www.htmq.com/html5/meta.shtml には「メタタイトル」はありません。 メタタイトルとは何ですか?

  • html img border

    http://www.htmq.com/html/img.shtml このサイトのhtmlソースで「border="0"」 「border="1"」とありますが、borderを書く意味はなんでしょうか

  • セルをリンクにしたときの揃え位置

    http://www.htmq.com/style/vertical-align.shtml こちらを参考にセルのリンクを作成しました。 セル中の文字の縦揃えを中央揃えにしようと<td style="vertical-align:middle">としたのですが、反映されず困っております。 リンクの定義部分でA{vertical-align:middle}とも試しましたが変化ありませんでした。 どのようにすれば可能になりますでしょうか?

  • ホームページの上下の隙間を消すには

    左右にだけ背景があるよくあるページを作ろうと一から自分で作り始めたのですが色々いじってもなぜかどうしても上下に隙間ができてしまいます。 上下がぴったりつく方法を教えて下さい。 ------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <html> <style type="text/css"> <!-- #main { width: 800px; margin-right: auto; margin-left: auto; background-color: #FFFFFF; } body { margin:0px; padding:0px; background-color: #999999; } --> </style> </head> <body> <div id="main"> <p><img src="images/head_01.gif" width="800" height="1000" /></p> </div> </body> </html>

専門家に質問してみよう