HTML/CSSにおいて、『aタグで作成したリンクの文字色を変更し下線を消す方法』を紹介します。
- HTML/CSSでaタグで作成したリンクの文字色を変更し下線を削除したい
目次
NGな記載例
以下に私が失敗したNGパターンを記載します。
NGパターン①：親要素に『color』を指定する
文字の色と言えば『color』。
ということで親要素に『color』をしてみます。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
『p』タグは赤字ですが『a』タグは青字のままで下線も残っています。
- リンクの文字色変更と下線の削除ができていません
解決方法
では解決方法を紹介します。
OKパターン①：『color: inherit』『text-decoration: none』を指定する
親要素に『color』を指定した上でaタグに対し『color: inherit』『text-decoration: none』を指定します。
『color: inherit』…親要素の色を継承
『text-decoration: none』…下線の表示を無くす
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
OKパターン②：aタグにも『color』を指定し『text-decoration: none』を指定する
親要素にもaタグにも『color』を指定し『text-decoration: none』を指定します
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
- aタグで作成したリンクの文字色が変更され、下線を消すことができています
aタグで作成したリンクの文字色が変更され、下線を消すことができました。
本格的にHTML/CSSを学びたい方は
本格的にHTML/CSSを学びたい方は『TechAcademy(テックアカデミー)』がオススメです。
- 現役エンジニアによるマンツーマンサポート
- はじめての副業に必要なスキルが学べる
- 無料メンター相談が可能
「短期間で集中して学びたい」「本格的に仕事にしたい」と考えている方はまずは無料メンター相談から初めて見てはいかがでしょうか
↓気になる方は下記リンクを参照
まとめ
今回は、HTML/CSSにおいて、『aタグで作成したリンクの文字色を変更し下線を消す方法』を紹介させていただきました。
- 『color: inherit』『text-decoration: none』を指定する
- aタグにも『color』を指定し『text-decoration: none』を指定する
皆さまの参考になれば幸いです。
コメント