• Home
  • Web制作
  • 【脱・初心者】HTMLリンクをおしゃれに見せる装飾テクニック

【脱・初心者】HTMLリンクをおしゃれに見せる装飾テクニック

schedule update
Tags: HTML

はじめに

Webサイトを作成する上で欠かせない要素の一つが「リンク」です。リンクは、他のページへユーザーを誘導する道しるべのような存在。しかし、デフォルトの青い文字だけのリンクでは、少し味気ないと感じていませんか？

この記事では、CSSを使ってHTMLのリンクをおしゃれに見せる装飾テクニックをご紹介します。

1. リンク装飾の基本： 4つの状態を理解する

HTMLのリンクは、実は4つの状態を持っており、それぞれに異なるスタイルを設定できます。

  • a:link: 未訪問のリンク。デフォルトでは青文字で下線付きの状態です。
  • a:visited: 訪問済みのリンク。デフォルトでは紫文字で下線付きの状態です。
  • a:hover: マウスオーバー時のリンク。マウスポインターがリンクの上に重なった状態です。
  • a:active: クリック時のリンク。マウスボタンを押している間の状態です。

これらの状態を理解することで、より細やかな装飾が可能になります。

2. CSSで装飾してみよう！

CSSを用いることで、リンクの以下の要素を自由自在に変更できます。

  • 文字色
  • 背景色
  • 下線
  • フォント
  • 枠線

それぞれの要素を調整することで、Webサイトの雰囲気に合わせた、オリジナルのリンクを作成できます。

2-1. 文字色を変更する

例えば、リンクの文字色を赤色に変更したい場合、下記のように記述します。

a:link {
  color: red; /* 未訪問時のリンクの色を赤に変更 */
}
あわせて読みたい
【CSS入門】Webデザインのキホン！色指定を使いこなす基礎知識と実践テクニック

2-2. 下線を消す

下線が目障りだと感じる場合は、text-decorationプロパティを用いて下線を消去できます。

a:link {
  text-decoration: none; /* 下線を消す */
}

2-3. マウスオーバー時に色を変える

マウスオーバー時にリンクの色を変えることで、ユーザーに「クリックできる」ことを分かりやすく伝えられます。

a:hover {
  color: blue; /* マウスオーバー時に青色に変更 */
}

3. ワンランク上のテクニック： 動きを付ける

CSSには、アニメーションやトランジションといった機能があります。これらの機能を使えば、リンクに動きを付けて、より魅力的な表現を実現できます。

3-1. マウスオーバー時にふわっと変化

transitionプロパティを使うと、マウスオーバー時に色が滑らかに変化するアニメーションを作れます。

a:link {
  color: black; 
  transition: 0.3s; /* 変化に0.3秒かける */
}

a:hover {
  color: red; 
}

3-2. ボタン風に見せる

paddingやborder-radiusといったプロパティを利用すれば、リンクをボタンのような形に見せることも可能です。

a:link {
  display: inline-block; /* ブロック要素のように振る舞う */
  padding: 10px 20px; /* 内側の余白 */
  border-radius: 5px; /* 角を丸くする */
  background-color: lightgray; /* 背景色を薄い灰色に */
}
あわせて読みたい
【CSS】リンク範囲を広げて、サイトの使いやすさを向上させよう！

4. まとめ

HTMLのリンクは、少しの工夫でWebサイト全体の印象を大きく左右する要素です。CSSを駆使して、ユーザーの目を惹きつけ、クリックしたくなるような、おしゃれなリンクを作成してみましょう！

関連記事