こんにちは、Mochiです。
CSSによるリンクへ装飾ってどうやってやればいいんだろう？CSSでリンクの下線ってどうやって消すんだっけ？🤔
そんな方に向けて、CSSによるリンクの装飾方法をわかりやすく解説します。学んで、スキルアップしていきましょう！
🎨擬似クラスを使ったリンクの装飾
まずリンクはHTMLで<a>タグを使って作ります。<a>タグってどんなんだっけ？🤔という方は記事「HTMLでリンクを作成するaタグについて分かりやすく解説」を読むとより理解が深まるため、おすすめです。
<a>タグにそのまま装飾するよりも、擬似クラスを使って装飾するのがおすすめです。リンクにはすでに訪れたリンクのような、複数の状態があります。そのため、それぞれの状態に対して装飾をしてあげるのが良いです。擬似クラスってなんだっけ？🤔 という方にはより理解しやすくするために記事「CSSセレクターとは何か、基本的な種類や書き方をわかりやすく解説」を読むのをおすすめします。
さっそく擬似クラスを使った様々な状態への装飾を学んでいきましょう。
link：リンクが設定された<a>タグ
link擬似クラスを使うことで、リンク先（href属性）を指定されている<a>タグにのみ装飾することができます。
例えば次のように使います。
a:link {
font-size: 30px;
}
visited：すでに訪れたリンク
visited擬似クラスを使うことで、すでに訪れたことのあるリンクを装飾することができます。
例えば次のように使います。
a:visited {
font-size: 30px;
color: blueviolet;
}
hover：マウスカーソルが乗っている時
hover擬似クラスを使うことで、マウスカーソルが上に乗っている状態のリンクを修飾することができます。
例えば次のように使います。
a:hover {
font-size: 30px;
font-weight: bold;
}
active：クリックされた時
active擬似クラスを使うことで、クリックされた状態のリンクを装飾することができます。
例えば次のように使います。
a:active {
font-size: 30px;
color: gray;
}
以上が擬似クラスを使ったリンクの装飾方法です。次は、リンクについている下線の装飾について学んでいきましょう！
✍️text-decoration：リンクの下線の装飾
text-decorationプロパティを使うことで、リンクの下線の装飾を変更することができます。なくす方法、つける方法をそれぞれ見ていきましょう！
下線をなくす
リンクの下線をなくすには
a:link {
text-decoration: none;
}のように”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;
}
上線をつける
リンクの上線をつけるには
a:link {
text-decoration: overline <style> <color> <thickness>;
}のように”overline”を指定することで実現できます。また他の項目については下線をつけるときと同じです。そして、上線と下線は同時につけることができます。
例えば次のように使います。
a:link {
text-decoration: overline;
}
a:link {
text-decoration: overline underline blueviolet 2px;
}
🎉まとめ
リンクの装飾方法について解説しました。リンクは複数の状態があり、擬似クラスを使う事でそれぞれの状態のリンクを装飾できます。また、text-decorationプロパティを使うことで、下線をなくすことや、下線・上線をつけることができます。
皆さんは今回学んだことで、リンクを装飾できるようになりました。素晴らしいです👏
リンクはウェブサイトやブログの中でも重要な箇所です。自分好みのリンクに装飾してみて、他のサイトとは一味違うデザインにしてみましょう。
