みなさん、こんにちは！
フリーランスエンジニアのKATSUMIです。
本日は、リンクの下線を消す、色を変更する方法を説明します。
Web制作独学へリンクの下線を消す、色を変更する方法を解説
HTMLでリンクを貼ると、デフォルトでは下記画像のように青色文字で下に下線が入ります。
これを色を変えたり、下線を無しにしたりという希望がクライアントから言われることがあります。
それを実践する方法を説明していきます。
CSSでリンクの下線を消す方法
リンクの下線を消すには、text-decoration: none;を適用します。
デフォルト
HTML
<a href=”#” >リンク</a>
表示
リンク↓
下線なし
HTML
<a href=”#” style=”text-decoration: none;”>リンク</a>
表示
リンクCSSでリンクの色を変える方法
テキストリンクの色を変えるには、colorプロパティを使用します。
デフォルト
HTML
<a href=”#” >リンク</a>
表示
リンク↓
色を黒に
HTML
<a href=”#” style=”color: #000000;”>リンク</a>
表示
リンクCSSでリンクの下線を消し色も変える方法
リンクの下線を消し色も変えるには、text-decoration: none; とcolorプロパティを使用します。
デフォルト
HTML
<a href=”#” >リンク</a>
表示
リンク↓
下線を消し色を黒に
HTML
<a href=”#” style=” text-decoration: none; color: #000000; “>リンク</a>
表示
リンク| ホームページ作成やフリーランスエンジニアを育成するメンター業を右記で請けおってます |  |
リンクの色で最適なものは？
リンクの色は自由に指定できますが、色選びには注意が必要です。
クリックできるリンクだとすぐにわかる色が望ましいです。
テキストリンクで最適な色について
文章の中にあるテキストリンクの色で最適なものは、青系の色になります。
Googleなどの検索エンジンはもちろん、多くのサイトで青系の色が使用されているため、直感的にリンクだと認識してもらえます。
特別な理由がない限りは、青で統一しておくと良いです。
場所に応じた指定方法について
文章の中のテキストリンクにおいては、青系が良いのですが、他の場所では必ずしもそうだというわけではありません。
例えば、フッターなどは背景色がある場合が多く、色によってはそこに青いテキストを乗せると違和感が生まれます。
サイドバーにおいても青系は避けた方が良いです。サイドバーに並ぶカテゴリーなどの項目は、クリックできるものとして認識するため、青くする必要はありません。
多くのリンクに青系を使用すると、古い昔のサイトという印象を与える可能性もあります。
青系の色を指定するのは、テキストリンクのみにしておいた方が良い場合もあります。
今回の記事が、フロントエンドエンジニア、Webデザイナーを独学で目指している方の参考になれば幸いです。
下記を押していただけると励みになります！
↓
 |
人気記事
最近のコメント