No.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でも充分でしょう)。
No.2
- 回答日時:
##############
<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>
##############
2通りの方法を、必要な部分のみ書きましたが分かるでしょうか。
詳細はスタイルシートを勉強してください。
No.1
- 回答日時:
そのページはスタイルシートで指定されていないですかね?
http://e-words.jp/w/E382B9E382BFE382A4E383ABE382 …
http://www.tohoho-web.com/css/basic.htm
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 【GAS】WEBアプリでハイパーリンクを挿入したい 1 2023/03/12 19:20
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- その他(ブラウザ) 閲覧したいサイトが文字化けしてしまいます。 下記サイト内のリンク先の小説を読みたいのですが、文字化け 2 2023/03/12 23:21
- Excel(エクセル) エクセルに代わる 表入力ツールについて 3 2022/12/21 21:19
- Excel(エクセル) エクセルの数式で教えてください。 3 2022/10/25 10:52
- HTML・CSS <a>リンクが飛ばない・・ パソコン初心者です 、本を見ながらHTMLで<a>でコードをかいたのです 6 2022/07/30 20:21
- Access(アクセス) capeofdragonと申します。 Access2016を使っております。 あるフォームがあり、テ 2 2022/09/09 13:18
- Visual Basic(VBA) VBAにてメール作成した際、一部指定箇所のみ赤文字にしたいです。 下記の内容ですと作成されたメール本 1 2022/04/27 13:31
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
- HTML・CSS HTMLを正しく表示させるには 2 2023/06/18 09:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
HTMLフォームのSELECTの幅を一...
-
<h1>タグの後の行間を詰めたい。
-
ウィンドウを狭めても中の表示...
-
iPhone用のサイトの文字がずれ...
-
スマホで画面ぴったりに表示さ...
-
macとwindowsのレイアウト崩れ...
-
aタグに直接style=""で:hoverを...
-
Firefox 横スクロールバーを表...
-
なぜ左に寄っているの?
-
css。横並びBOXに長文textを流...
-
コードを書いて下さい( ; ; )...
-
インラインフレームの表示位置...
-
H1 タグの行間
-
IE6でCSSの一部の記述をを読み...
-
text-alignの解除の方法
-
端から端まで横線を引きたい
-
テキストボックスの文字を右揃...
-
INPUT TEXT内の文字位置を指定...
-
CSSの設定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
コードを書いて下さい( ; ; )...
-
aタグに直接style=""で:hoverを...
-
インラインフレームの表示位置...
-
HTMLフォームのSELECTの幅を一...
-
<h1>タグの後の行間を詰めたい。
-
INPUT TEXT内の文字位置を指定...
-
なぜ左に寄っているの?
-
アップロードするサーバーによ...
-
端から端まで横線を引きたい
-
macとwindowsのレイアウト崩れ...
-
Formタグのブロックの高さについて
-
chromeだけbody直下に空白が開く
-
FireFoxで見るとブラウザの幅に...
-
CSSでh1とその下の文字との行間...
-
IE8ではtext-align: center;で...
-
css。横並びBOXに長文textを流...
-
text-alignの解除の方法
-
div align="center"のalignは旧...
-
<legend>で表示されるタイトル...
おすすめ情報