サイト内検索
...スタイルシート(css)...
スタイルシート・リンク
リンクテキストの下線を消す
- リンクテキストの下線を消すには、
a要素に、text-decorationプロパティを指定します。 - [使い方]
- a {
text-decoration: none;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| text-decoration: | none； | 下線を消します。 |
- 上線・下線・抹消線・点滅の指定は、 「テキスト・文字の装飾」をご覧ください。
リンクテキストの下線を装飾する
- リンクテキストの下線を装飾するには、
a要素に、 border-bottomプロパティを指定します。 - リンクテキストの下線を装飾する場合には、下線を消しておきます。
- [使い方]
- a {
text-decoration: none;
border-bottom: 1px #0000a0 dotted;
} - 境界線線を指定するには、「ボックスの境界線の指定」をご覧ください。
| プロパティ名 | 値 | 説明 |
|---|---|---|
| border-bottom: | ; | リンクテキストの下線を装飾します。 |
サンプル
[ｈｅａｄの中]
<style type="text/css"><!--
.sample-1 a{
text-decoration: none;
border-bottom: 3px #0000a0 double;
}
.sample-2 a{
text-decoration: none;
border-bottom: 2px #0000a0 dotted;
}
sample-1 a:hover {
color: #c9171e;
}
sample-2 a:hover {
color: #c9171e;
}
-->
</style>
[ｂｏｄｙの中]
<p><span class="sample-1">
<a href="../../sample-1.html">サンプル-1</a>
</span>
</p>
<p>
<span class="sample-2">
<a href="../../sample-2.html">サンプル-2</a>
</span>
</p>
[ブラウザ上]
