【HTML&CSS】リンクの文字の下線を消す方法、色を変える方法を紹介！

どうも皆さんこんにちは！kwです！

今回は、リンク（<a>タグ）の下線を消す方法と、色を変える方法をご紹介していきます！

Webデザインを学んでいる際に、誰もが一度はリンクの下線を消したりリンクの文字の色を変えたいと思いますよね。

今回は皆さんのそんな想いを叶えるために、できるだけわかりやすく解説していきます！

ぜひぜひ覚えてみてはいかがでしょうか！！？

ということで、早速やっていきましょう！

リンクの下線を消すには、CSSのtext-decorationというプロパティを使います。

どのように使うかというと、text-decorationにnoneと指定してあげます↓

text-decoration:none;

こうすることで、リンクの下の線を消すことができます。

こんな感じです↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

はい。ちゃんとできていますね。

下線はありませんがちゃんとリンクとして機能しているので、「テキスト」を押したら自分のプロフィールに飛ぶようになっているはずです。

このように、text-decorationプロパティを使うと、リンクの下線を消すことができます。

では、次にリンクの文字列の色を変える方法を見ていきましょう。

リンクの文字色を指定するには、CSSのcolorプロパティを使います。

colorプロパティは、リンクの文字色を変えるだけでなく、普通の<p>タグなどで出力した文字列の文字色も変えることができます。

使い方は普通の<p>タグなどで出力した文字列の文字色を変える方法と同じです。

実際に例を見て見ましょう↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

今回はわかりやすいように色を緑色にしています。

また、colorプロパティについてさらに詳しく知りたい方は、僕の以前に投稿したコチラの記事をご参照ください↓

いかがでしたでしょうか？

今回は、リンクの文字の下線を消す方法、色を変える方法をご紹介しました。

この技術が使えると、デザインの幅も広がるので、ぜひ覚えてみてください！

今回も、最後まで見てくれた方、ありがとうございました。

ぜひ、お手隙の際に他の記事もご覧ください！

また、分からないところや誤字脱字、その他気になった点などがあれば、お気軽にコメントしていただけると幸いです。