プログラミング・ITCSS

Blog Article

CSSでリンクを装飾する方法-色付けや下線を消す-をわかりやすく解説

こんにちは、Mochiです。

CSSによるリンクへ装飾ってどうやってやればいいんだろう?CSSでリンクの下線ってどうやって消すんだっけ?🤔

そんな方に向けて、CSSによるリンクの装飾方法をわかりやすく解説します。学んで、スキルアップしていきましょう!

🎨擬似クラスを使ったリンクの装飾

まずリンクはHTMLで<a>タグを使って作ります。<a>タグってどんなんだっけ?🤔という方は記事「HTMLでリンクを作成するaタグについて分かりやすく解説」を読むとより理解が深まるため、おすすめです。

<a>タグにそのまま装飾するよりも、擬似クラスを使って装飾するのがおすすめです。リンクにはすでに訪れたリンクのような、複数の状態があります。そのため、それぞれの状態に対して装飾をしてあげるのが良いです。擬似クラスってなんだっけ?🤔 という方にはより理解しやすくするために記事「CSSセレクターとは何か、基本的な種類や書き方をわかりやすく解説」を読むのをおすすめします。

さっそく擬似クラスを使った様々な状態への装飾を学んでいきましょう。

link:リンクが設定された<a>タグ

link擬似クラスを使うことで、リンク先(href属性)を指定されている<a>タグにのみ装飾することができます。
link擬似クラスのイメージ
例えば次のように使います。

a:link {
  font-size: 30px;
}

リンク擬似クラスで修飾した例

visited:すでに訪れたリンク

visited擬似クラスを使うことで、すでに訪れたことのあるリンクを装飾することができます。
visited擬似クラスのイメージ
例えば次のように使います。

a:visited {
  font-size: 30px;
  color: blueviolet;
}

visited擬似クラスで装飾した例

hover:マウスカーソルが乗っている時

hover擬似クラスを使うことで、マウスカーソルが上に乗っている状態のリンクを修飾することができます。
hover擬似クラスのイメージ
例えば次のように使います。

a:hover {
  font-size: 30px;
  font-weight: bold;
}

hover擬似クラスで装飾した例

active:クリックされた時

active擬似クラスを使うことで、クリックされた状態のリンクを装飾することができます。
active擬似クラスのイメージ
例えば次のように使います。

a:active {
	font-size: 30px;
  color: gray;
}

active擬似クラスで装飾した例
以上が擬似クラスを使ったリンクの装飾方法です。次は、リンクについている下線の装飾について学んでいきましょう!

✍️text-decoration:リンクの下線の装飾

text-decorationプロパティを使うことで、リンクの下線の装飾を変更することができます。なくす方法、つける方法をそれぞれ見ていきましょう!

下線をなくす

リンクの下線をなくすには

a:link {
  text-decoration: none;
}

のように”none”を指定することで実現できます。
text-decoration: noneで下線をなくした例

下線をつける

リンクの下線をつけるには

a:link {
  text-decoration: underline <style> <color> <thickness>;
}

のように”underline”を指定することで実現できます。

また他の項目について

  • <style>:線のスタイル
    • solid:普通の線
    • dashed: ダッシュ
    • dotted: 点々
    • wavy:波線
  • <color>:色
  • <thickness>:線の太さ

を指定することができます。これらは省略可能です。色の指定方法については記事「CSSで文字や要素に色を付ける・変更する方法をわかりやすく解説」を読むと理解が深まります。

例えば次のように使います。

a:link {
  text-decoration: underline;
}

a:link {
  text-decoration: underline dashed blueviolet 2px;
}

text-decoration: underlineで下線部をつけた例

上線をつける

リンクの上線をつけるには

a:link {
  text-decoration: overline <style> <color> <thickness>;
}

のように”overline”を指定することで実現できます。また他の項目については下線をつけるときと同じです。そして、上線と下線は同時につけることができます。

例えば次のように使います。

a:link {
  text-decoration: overline;
}

a:link {
  text-decoration: overline underline blueviolet 2px;
}

リンクの上線をつけた例

🎉まとめ

リンクの装飾方法について解説しました。リンクは複数の状態があり、擬似クラスを使う事でそれぞれの状態のリンクを装飾できます。また、text-decorationプロパティを使うことで、下線をなくすことや、下線・上線をつけることができます。

皆さんは今回学んだことで、リンクを装飾できるようになりました。素晴らしいです👏

リンクはウェブサイトやブログの中でも重要な箇所です。自分好みのリンクに装飾してみて、他のサイトとは一味違うデザインにしてみましょう。

🤗おすすめ

本で体系的にCSSについて学びたいという方にはこちらの本をおすすめします。HTML・CSSの基礎から実際のWebサイト作成まで書かれており、豊富な図が含まれているため、多くの方が理解しやすい本です。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

YouTubeのように動画でサクサク学びたいという方には、Udmeyの講座をおすすめします。私もよく使うのですが書籍に比べ実用的な内容を学びやすく、隙間時間に見れるのがいいです。HTMLやCSSなど、ぜひ気になるWeb開発の人気オンラインコースを受講してみてください。

Udemy 人気のオンラインコース ウェブ開発

参考になれば幸いです。 読み返したい方は、ぜひブックマークへの登録がオススメです。
読んでいただきありがとうございました!🙌

このページの内容