• ベストアンサー

リンクの文字と下線の間にスペースを持たせたい

ホームページを制作する際のリンク設定について教えてください。 文字とリンク下線の間を少し空けるには、「text-decoration:underline」以外にどのような記述が必要なのでしょうか？

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

  • ベストアンサー
回答No.3

アンダーラインの間隔を調整するプロパティはありませんが、 やりたいことは下記ような感じでしょうか。 -------------- <html> <head> <style> a { color: #0033cc; text-decoration: none; border-bottom: solid 1px #0033cc; padding-bottom: 0px; /* ←ここの値を変更して文字との間隔を調整 */ } </style> </head> <body> <a href="http://oshiete.goo.ne.jp/">あいうえお</a> </body> -------------- ※IEは後方互換モードでしか駄目みたいですが。

panda919
質問者

お礼

アンダーラインの間隔を調整するプロパティはないのですね。残念…。 でもいただいた例でやってみたら確かに下線の位置が変わりました。 ありがとうございます。

その他の回答 (2)

noname#79554
noname#79554
回答No.2

a{text-decoration:none;border-bottom:double #ff0000 4px;padding-bottom:0.2em;} としてみてください。 リンク設定された文字の、約５分の一幅下に赤い二重線が引かれると思うんですが。

panda919
質問者

お礼

ありがとうございます。 確かに赤い下線が引かれました！

noname#136435
noname#136435
回答No.1

下記URLは参考になりませんか http://www.tagindex.com/stylesheet/text_font/text_underline_position.html

panda919
質問者

お礼

有難うございます。 いただいたURLを確認いたしましたが、上下左右に下線（？）の位置を変更できるようですが、文字との間隔を調整することは出来ないようでした。

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • リンクの下線と文字の間隔を開けるには

    ブログでやりたいんですが、教えてください。調べてみると、padding-bottom: px らしいんですけど、うまくいきません。リンクの部分は次のような記述（ライブドア）になっているんですが、どう書き換えればいいのでしょうか。 a{color:#666;text-decoration:underline;} a:link{color:#666;text-decoration:underline;} a:visited{text-decoration:underline;} a:active{} a:hover{background-color:orange;text-decoration:none;} よろしくおねがいします

    • ベストアンサー
    • HTML
  • 一部のリンクの下線を消す

    リンクの色などの設定をスタイルシートで行っているのですが、一部のリンクしている文字の下線を消したいとの依頼がありました。このような時に使えるタグはありますか？ {text-decoration:none} を使うと今までのリンク全部の下線が消えてしまいますので困っています。

    • ベストアンサー
    • HTML
  • CSS ある場所だけリンク時に下線表示

    タイトルの通りなのですが、ページ全体ではなく 特定の場所のテキストリンクにオンマウスしたら 下線が表示されるようにしたいんです。 スタイルシートの書き方にとまどっており、 <div style="～"> で始めて </div> で閉じ、 a:link {color: #ffffff; text-decoration: none} a:hover {color: #ffffff; text-decoration: underline} を使うところまではわかるのですが…。 どなたか正しい記述を教えていただけないでしょうか？

  • CSSで指定したリンクのみに下線

    現在CSSを使ってHPを作成しています。全体的にはリンクには下線を引かないように下記のように指定しました。 a:link{color:#523e35;text-decoration:none;} しかし、リンク色とテキスト色を同じにしたいので同じにしましたがどこにリンクが貼ってあるのか分かりません。 とりあえず、ホームページ内メニューの部分のみはリンクが張ってあるか把握できるようメニューのリンク部分だけにでも下線を引きたいのです。 試しに .menu_line { text-decoration: underline; } 上記をつかって<div class="menu_line">でメニューを囲ってみるとリンクの部分ではなく、テキストの部分にのみ下線がひかれてしまいました。 いったいどう指定すればメニューの部分のリンクにのみ下線を引くことができるでしょうか…。 ご存知の方がいれば教えていただきたいです。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • リンクの下線や色の指定を特定のところだけ設定したい

    HTMLページ内で、いくつもあるリンクの中で、特定の箇所だけ 下線を付けない onMouseの時だけ下線を付ける 色をデフォルト以外の色を付ける ようにしたいのですが、どのようにしたらいいでしょうか。 たとえばこの下はむちゃくちゃですが、 .link { font-size:12pt; color:#BF0000; font-weight: bold; text-decoration:none; a:link, a:visited { text-decoration: none; } a:hover { text-decoration: underline; }} こんな感じでスタイルシートに書いて <a href="xxxx.html"><span class="link">click</span></a> みたいな感じでも少しずつ変えながらいろいろ試してみたのですが 色やonMouse以外の時の下線なしはできたのですが、onMouse時の下線付きがうまくいきません。 どうすればよいかご存じの方ご教授ください。

    • ベストアンサー
    • HTML
  • 同ページ内のリンク下線が消えない

    スタイルシートにて、ホバーとアクティブ以外はリンク線が出ないようにしています。 通常は問題ないのですが、同ページ内にリンク先があり、 一度クリックすると下線が表示されたままになってしまいます。 同ページ内リンクが複数あり、それらをクリックするとクリックした分のリンク線が表示されたままになってしまい、困っています。 IEですと問題ないようなのですがChromでこうなってしまいます。 下記のように記述してあります。 お知恵を拝借できますでしょうか。 a:link { text-decoration:none; color:#333333; } a:visited { text-decoretion:none; color:#333333; } a:hover { text-decoration:underline; color:#3333FF; } a:active { text-decoration:underline; color:#3333FF; } a{ text-decoration:none; }

    • ベストアンサー
    • CSS
  • リンク文字変化のタグについて

    リンクを文字にマウスをあてた時のリンク文字変化のタグについて教えてください。 色々な文字変化があると思いますが上下にプルっと動くタイプのタグを探しています。 ↓これは[head]～[/head]の間に注入するタグのようなのですが <STYLE type="text/css"> <!-- A:HOVER{ position : relative; top:3px;　left:3px;} A{text-decoration : none; } --> </STYLE> このように[head]～[/head]の間に挿入するタイプのものではなく 個別で指定するにはどのように記述すればいいでしょうか？ ↓例えばコレは[head]～[/head]に入れて下線を消すタグですが <style type="text/css"> A{text-decoration:none;} </style> ↓こっちは個別に消す下線を消すタグです <a href="ページのアドレス" style="text-decoration:none"> リンクする文字</a> このようなに先ほどのタグの場合に個別に記述するやり方を教えてください。ヨロシクお願い致します。

  • マウスを重ねたら下線が出る

    マウスを重ねたら下線が出るようにしたいので こちらタグを改造してもらえませんか？ <a href="" style=text-decoration:none;a:hover:text-decoration:underline>test</a>

  • テーブル内のリンク下線

    テーブル内のリンク下線（多数）を全て消したいのですが、 <table style="text-decoration:none;">　ではできず、 <a href="" style="text-decoration:none;">　と全てに指定しなければなりません。 これはいっぺんに適応はできないものなのでしょうか？

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

    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">のタグを打ち込む、というやり方であってますか？教えてください！

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する