テキストリンクの下線を消すテクニック - CSS
下線を消すにはtext-decoration
プロパティを使う。
例)aタグの下線を消す
a { text-decoration: none; }
また、リンクのデフォルトでは下線は表示されているが、一般的にはマウスカーソルが当たったら下線を表示するようになっているらしい。
ツイキャスのサイトとQiitaのサイトでも、マウスカーソルが当たったら下線が引かれていた!!全然気づかなかったけど、意識すると面白い!!!
通常は下線を消し、カーソルが当たったら下線を表示する
a { text-decoration: none; } a:hover { text-decoration: underline; }
text-decorationプロパティ
テキストに対しての線のスタイルを設定する
値 | 説明 |
---|---|
none |
線を表示しない |
underline |
テキストの下に線を表示 |
overline |
テキストの上に線を表示 |
line-through |
取り消し線を表示 |
参考文献
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)
- 作者: 狩野祐東
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2016/10/27
- メディア: 単行本
- この商品を含むブログ (1件) を見る