- ベストアンサー
ＨＴＭＬのリンクアンダーバーについて
お世話になります。 時々みかけるのですが ＨＴＭＬでリンクをはってある 箇所のアンダーバーがリンク記述 文字とあまり密着せずに表示され てるのをみかけるのですが、 どのようにするのでしょか？ （ソースにみてもわからないので） ご存知のかた、いらしたら 教えていただけるとありがたいです。 よろしくお願い致します。
- sendaitaro
- お礼率67% (43/64)
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
基本はANo.2様の回答された通りです。 ただし、注意すべき点が1つ。CSSによるスタイル設定をしていないブラウザのディフォルトの状態では「リンクをはってある箇所のアンダーバー」"text-decoration: underline;"で表示されています。これで「アンダーバー（下線）」が表示されている場合、リンクの状態（(a)クリックする前(b)クリックした後(c)クリックする瞬間(d)マウスオーバーした時）に依って変化するリンクの「文字色」と常にセットで自動的に同じ色に変わります。 IE6のディフォルトでしたら、文字色と同じ様に (a)青(b)紫(c)赤(d)変化なし という具合です。 しかし、CSSでスタイルを変更して"text-decoration: none;"で本来の「下線」を取り、"border-bottom:～;"で設定した場合それは「下枠線」となる為、「下線」とは違ったルールで表示されます。もし、先に出ているサンプルの様に"border-bottom: 1px solid blue;"と「ボーダーの色」までセットで指定してしまうと、文字色の変化とは異なり、(a)～(d)いずれの状態でも、「下枠線」は常に「blue（青）」で表示されてしまう事になります。それを防ぐ為には「ボーダーの色は指定しない」という手があります。つまり、先のサンプルだったら"border-bottom: 1px solid;"（ボーダーの太さと形状のみを指定）としてまえばOKです。こうすれば、「下枠線」の色の変化はリンクの状態の文字色に揃う様になります。 もし、コンテンツに出てくるリンク全てにこのスタイルを適用したいなら、 a { text-decoration: none; border-bottom: solid 1px; padding-bottom: 0.1em; } としてしまえば、HTML側でclass属性の指定を入れなくても、<a>～</a>でマークアップされた部分は全て同様の表示になります。 あと1つ気を付けなければならないのはpadding-bottomの値です。もし全くCSSが適用されていないブラウザのディフォルトの表示だと、行間が結構くっつき気味で表示されますが、この状態でpadding-bottomを設定すると、実はそんなに余裕がありません。つまり、padding-bottomの値をちょっと多目にするとすぐに「下枠線」とその下の行のテキストがくっついてしまうのです。ブラウザのディフォルト状態だと、せいぜい1pxぐらいが限界、IE6だとそれでも既にくっついて見えます。 なので、リンクにこのスタイルを使う場合は合わせてコンテンツ全体（body）の行間を少し広目にしてあげる方が良いでしょう。行間（厳密に言うと「行の高さ」ですが）はCSSでは"line-height"プロパティで指定します。フォントのスタイル等にも依りますが、日本語のコンテンツの場合、140%ぐらいにしておくのが読みやすいかと思われます。 body { line-height: 140%; } という感じで。 これぐらいの状態だと、"padding-bottom: 1px;"でもリンク部分のテキストと下枠線の間にも充分空きができ且つ下枠線次の行との間にも余裕ができるのでくっつきません（見た感じ、2pxぐらいまでは許容範囲ですが1pxでも充分でしょう）。
その他の回答 (2)
- masaota56
- ベストアンサー率41% (58/139)
############## <body> <a href="#" style="text-decoration:none;border-bottom:1px solid blue;padding-bottom:1em;">スタイルシートを直接記入</a> </body> ############## <head> <style> .testClass { text-decoration:none; border-bottom:1px solid blue; padding-bottom:1em; } </style> </head> <body> <a href="#" class="testClass">クラスで指定</a> </body> ############## ２通りの方法を、必要な部分のみ書きましたが分かるでしょうか。 詳細はスタイルシートを勉強してください。
- owshippo
- ベストアンサー率41% (44/107)
そのページはスタイルシートで指定されていないですかね？ http://e-words.jp/w/E382B9E382BFE382A4E383ABE382B7E383BCE38388.html http://www.tohoho-web.com/css/basic.htm
補足
使用されてます。 そのスタイルの記述方法が わからないのですが。 スタイルシートは使っています。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
ご丁寧にありがとうございました。 できました、 ネットで探してもなかなかみつからなかった もので。 お世話様でした。