初心者必見！CSSホバーコードの書き方.最初に知っておくべきHSLAとhover実装時の注意点

HTML・CSS

ボタンの色がふんわり変化するホバーエフェクトは、Webサイト制作でよく使われる基本的な表現です。

しかし、実際の制作では「色が変われば完成」ではありません。

「なぜHTMLではなくCSSに書くのか？」
「なぜ元の色がHEXなのに、ホバー時はHSLAを使うのか？」
「なぜホバー表現では特定の書き方がよく使われるのか？」

このような疑問を解決することが、安定したコードを書くためには重要です。

特に、これからオーバーレイやグラデーションなどのホバー表現を実装する場合、単純な色変更の方法だけではなく、CSSで管理する理由や色指定の考え方を理解しておく必要があります。

この記事では、初心者の方が最初につまずきやすい「CSSホバーコードの書き方」「最初に知っておくべきHSLAとhover実装時の注意点」を中心に解説します。

ホバーの基本的な書き方、HTMLではなくCSSで指定する理由、そしてホバー時の色調整でHSLAが使われる理由を理解することで、コードの意味を理解しながら「:hover」とカラーコードの実装ができるようになります。

初心者がまず知るべきホバーの書き方

ホバー効果（マウスカーソルを重ねたときの変化）は、新しくHTMLの要素を追加して作るものではありません。

すでにHTMLにあるボタンやリンクなどの要素に対して、CSSで「マウスが乗ったときだけ別のデザインを適用する」という命令を追加します。

そのときに使うのが、:hoverという疑似クラスです。
:hoverは「この要素にマウスが乗った状態だけ、このCSSを適用してください」という意味を持つCSSの仕組みです。

例えば、通常時のボタンをCSSで指定すると以下のようになります。

.btn {
background-color: #0077cc;
color: #ffffff;
padding: 12px 30px;
border: none;
border-radius: 5px;
}

このボタンにホバー時の変化を加える場合は、元のクラス名の後ろにスペースを空けず、:hoverを書き足します。

.btn {
background-color: #ff5bac;
color: #ffffff;
padding: 12px 30px;
border: none;
border-radius: 5px;
}

.btn:hover {
background-color: #0077cc;
}

これだけで、「マウスカーソルが乗ったときだけ背景色を変更する」という指定になります。

ポイントは、HTML側に新しいクラスや要素を追加する必要がないことです。

<button class=”btn”>ボタン</button>

ブラウザでの表示
ボタンにカーソルを合わせると色の変化がわかります。

このように既存のHTMLはそのままにして、CSS側だけでホバー時の見た目を変更できます。

背景色を変えるだけでなく、文字色の変更、枠線の変更、影の追加、透明度の変化など、さまざまなホバー表現の基本になります。

ブランドカラーを守る！HSLAの透明度を使ったプロのホバー実装

前の章では、HTMLを変更せずにCSSだけでボタンの色を変える :hover（疑似クラス）の基本を解説しました。

「ホバー時は色を変えればいい」と思いがちですが、商業サイト（企業の公式サイトやECサイトなど）では、自由に色を変えられないケースが多々あります。
なぜなら、企業には「ブランドカラー（コーポレートカラー）」があり、その原色を勝手に変えてしまうと、ブランドの印象が崩れてしまうからです。

そこでプロの現場でよく使われるのが、「ブランドカラーの原色はそのままに、透明度だけを調整してホバー効果を表現する」 という手法です。

この章では、この実務で必須となる「HSLA」を使った透明度ホバー（画像（バナーや写真）にマウスが乗ったとき、ふわっと色を変えるホバー効果）の書き方を解説します。

実は、画像に対してホバー効果を作る場合、通常時の色コードが「HEX（16進数）」であっても、ホバー時の色指定には「HSLA」という書き方を使うのが実務のスタンダードです。その理由と、WordPressでもそのまま動く具体的なサンプルコードも解説します。

1. 【実験】画像に変化を起こすホバーコードの書き方

まずは、ボタンの時と同じように、画像要素に対して直接 :hover を指定するシンプルなコードを見てみます。
WordPressの投稿ページなどでもそのまま使える決定版のサンプルです。

HTML

<div class=”banner-link”>
<img src=”画像の保存先URL/画像ファイル名.jpg” alt=”ブランドバッグ” class=”test-img”>
</div>

CSS
💡ボタンの時と同じように、CSSクラス名（.test-img）の後ろにスペースを空けず「:hover」を書き足すだけで命令ができます。

/* 通常時の画像 */
.test-img {
width: 100%;
max-width: 600px;
height: auto;
cursor: pointer; /* (1)リンクがなくてもカーソルを指の形にする */
display: block; /* (2)画像をブロック要素にして背景を認識させる */
}

/* ホバー時の画像（ボタンと同じように直接指定） */
.test-img:hover {
background-color: hsla(240, 100%, 50%, 1); /* (3)ホバー時の色を「HSLA」で指定 */
opacity: 0.6; /* 画像を60%の薄さにして後ろの色を透かす */
}

ブラウザでの表示
画像にカーソルを合わせると色の変化がわかります。

💡 通常時のCSSに「cursor: pointer;」「display: block;」「background-color」を書いた理由

今回のCSSコードでは、通常時の「.test-img」に対して、本来のボタンの実装であれば不要な「cursor: pointer;」「display: block;」、ホバー時の「.test-img:hover」に対して、「background-color」を記述しています。
これはWordPressの投稿ページなどで画像を確実にコントロールするために必要な設定です。

  • (1) cursor: pointer;
    HTMLのルール上、マウスが乗ったときに自動で指の形に変わるのはリンク（<a>タグ）で囲まれた要素だけです。
    今回はリンクを使わずに画像単体にホバーさせているため、この1行を書いて強制的にカーソルを指の形に変えています。
  • (2) display: block;とホバー時の (3) background-color（裏側に背景色の土台を敷く設定）
    コードを見て、「画像はただの写真を貼り付けているだけなのに、なぜわざわざ見えない裏側に背景色（background-color）を敷く必要があるの？」と疑問に思った方も多いはずです。

    結論から言うと、「画像を透かしたときに、透けて見える『色』を自分でコントロールするため」に、あえて画像の真裏に背景色を仕込んでいます。

    初心者が一発で納得できるよう、現実の世界に例えて2つのステップで解説します。

    ステップ①：画像に直接ホバーする仕掛けの正体
    CSSの opacity: 0.6;（不透明度60%）は、画像そのものを「透明なセロハン（すりガラス）」に変える命令です。

    画像をセロハンにしたとき、「画像のすぐ後ろに何があるか」によって、人間の目に透けて見える色が変わります。

    • もし画像のすぐ裏が「透明（指定なし）」だったら：
      画像の後ろには何もありません。そのため、画像を透かすと、さらにその奥にある「Webサイト全体の白い壁（背景）」が丸見えになります。これが、画像が白っぽく薄くなってしまう原因です。
    • もし画像のすぐ裏に「青色」が敷いてあったら：
      画像を透かしたとき、すぐ裏にある「青色」が透けて見えます。結果として、画像全体が青みがかった変化になります。

    つまり、画像そのものの色を直接変えているのではなく、「画像を透かして、裏に隠しておいた色をのぞかせる」というマジックのような仕掛けを作るために背景色が必要なのです。

    ステップ②：では、なぜ display: block; が必要なの？
    画像（タグ）は、初期状態だと「文字（インライン要素）」と同じ扱いになっています。

    文字と同じ扱いのままだと、ブラウザは「文字の後ろに背景色を敷くスペースなんてないよ（文字の形ぴったりにしか色がつかない）」と判断してしまい、画像の裏側にうまく色を敷いてくれません。

    そこで display: block; の出番です。
    「この画像は文字ではなく、1つの四角いアルバム（ブロック）だよ」と指定し直してあげることで、ブラウザが画像の形にぴったり合わせた「色の土台」を真裏に正しく敷いてくれるようになります。

しかし、実は今回のサンプルコードをそのまま動かすと、せっかく真裏に敷いたこの「青色」が綺麗に反映されません。ブラウザ上のバッグの画像にホバーしても白っぽくなるだけです。

なぜそんなことが起きてしまうのか、次の「実務における注意点」でその理由を詳しく紐解いていきましょう。

⚠️ ホバーで画像の背景色を変えるときの実務における注意点

今回のサンプルコードでは、画像にマウスが乗った瞬間にカーソルが指の形に変わり、画像に白がかかったようにふわっと薄く変化します。

「あれ？背景色をHSLAで指定したのに、なぜ白っぽくなるの？」と思うかもしれません。
background-color: hsla(240, 100%, 50%, 1); の数値は、本来であれば「真っ青（ブルー）」を指定しているため、ホバーした時は青みがかった変化にならないとおかしいはずです。

しかし、画像要素の性質上、直接ホバーをかけて透明度（opacity）を下げると、画像自身の背景色ではなく、さらにその奥にあるWEBサイト全体の「白い土台（背景）」が透けて見えてしまうため、このような見た目（白っぽく色褪せた状態）になります。

商業サイトの実務ではこの方法は採用しませんが、今回はまず「ホバーの基本構造」と「HSLAの使い方」のイメージを頭に叩き込むための実験コードとして、このシンプルな書き方を紹介しました（※なぜ青くならずに白っぽくなるのか、プロが使う本当の回避策は「CSS画像ホバーが白く薄くなる原因解決！HSLAカラーの着色ルールとボタンと同じじゃダメな理由」で詳しく解説しています）。

絶対に知っておくべき！ホバーとHSLAの実装共通ルール

最も基本となる「背景色を変えるホバー」を紹介しました。

ボタンの色がふんわり変わる楽しさを実感していただけたと思いますが、「なぜインラインではなくCSSに書くのか？」「なぜHEXとHSLAを混ぜて使うのか？」といった違和感を感じた方もいらっしゃると思います。

ここからさらに「オーバーレイ」「シャドウ」「グラデーション」といった応用テクニックに進んでいきますが、その前に、これらすべてのホバー実装に共通する「重要なルール」と「実務での考え方」を整理しておきます。

先ほどのコードで「なぜインラインではなくCSSに書くのか？」「なぜHEXとHSLAを混ぜて使うのか？」という疑問を持った方も、ここを読めばすべてスッキリ解決します！

1. HTMLのインライン（style=””）ではホバーは書けない

HTMLタグの中に直接CSSを書き込む style=”…”（インラインスタイル）という方法がありますが、インラインスタイルの中に :hover などの疑似クラスを書くことはCSSの仕様上できません。

もしインラインだけで無理やり実装しようとすると、JavaScriptを使って「マウスが乗ったとき」「離れたとき」の処理をそれぞれ書き換える、非常に複雑で長いコードになってしまいます。
管理もしづらくなるため、ホバーエフェクトを実装するときは、必ず外部のCSSファイルか、HTML内の <style></style> タグの中にCSSを記述するのがWeb制作の基本ルールです。

2. スマホ（タッチデバイス）ではホバー効果がない

このホバー設定は、あくまで「マウスカーソル」があるパソコン環境のためのものです。
画面を直接指でタップするスマートフォンやタブレットでは、基本的にホバー効果は働きません（指が触れた瞬間にクリック扱いになり、即座にページが移動するためです）。

そのため、スマホ表示でもボタンだと認識してもらえるよう、最初から立体感やアイコンをつけたり、タップした瞬間だけ反応する別の設定（:active 疑似クラスなど）を実務では組み合わせて、ユーザーが迷わない工夫を行います。

「スマホではホバーは見えない」という前提を常に頭に置いておきましょう。

3. 元がHEXでもホバーをHSLAで書くのが「実務のホンネ」

「.test-img:hover」のCSSカラーコードを見て、「通常時は指定なし（またはHEXカラーコードの使用）なのに、どうしてホバーの時だけ HSLAのカラーコード hsla(…) で書くの？統一しなくていいの？」と疑問に思った方もいると思います。

しかし、実務の現場では、ベースの色とホバー時の色でコードの種類（形式）が違っていても全く問題ありません。
むしろ、ホバー効果を綺麗かつ効率的に実装するために、あえて使い分けるケースが非常に多いです。

理由は、「ホバー時に調整したい透明度（アルファ値）を、圧倒的に直感でコントロールしやすいから」です。

元の色（HEX）のまま、ホバー用に「少し明るくしたい」「少し透明にしたい」と思ったとき、16進数の英数字のままだと、どの数字をどう変えれば明るくなるのか直感的に計算できません。しかし、HSLAであれば、以下のように数字の役割がハッキリ分かれていますので、4番目の数値（A）に 0.6（60%の不透明度） や 0.4（40%の不透明度）などと、そのまま直感的に記述できます。

・H（色相）：ベースとなる色（赤、青、緑など）
・S（飽和度）：色の鮮やかさ
・L（輝度）：色の明るさ（ここを調整するだけで明るくできる！）
・A（不透明度）：透明度（少し透けさせて柔らかくできる！）

デザイナーから指定された元の色（HEX）をベースに、制作者がコード上で「ユーザーが次のアクションを起こしやすいように、ちょっとだけ明るく・柔らかくしよう」と直感的に微調整できるため、ホバー時にはHSLAが好まれます。

💡 HEXからHSLAなどへの変換コードを理解しておく必要性はあるの？

実務の現場では、デザインデータ（FigmaやAdobe XDなど）から色を抽出するとき、大抵は HEX で取得することになります。
そのため、「HEXからHSLAへ色コードを変換する感覚」を理解しておくことは非常に重要です。

とはいえ、HEXからHSLAへの変換を、自力で計算してコードを組み立てる必要はまったくありません。
現代のWeb制作では、ブラウザのデベロッパーツール（開発者モード）やVS Codeのカラーピッカーを使って、HEXをワンクリックでHSLAに変換するツール操作が当たり前になっているからです。

しかし、すべてをツール任せにするのではなく、「このHEXの青は、HSLAでいうと色相（H）がだいたい210くらいだな」という感覚を頭の中に持っておくことは、実務でスムーズにコードを書くための大切なスキルになります。

この「色相の感覚」さえあれば、ツールで変換したあとに「ホバー時はちょっとだけ明るさを変えよう」「少しだけ色を薄くしよう」といった微調整が、コードの数値を直接いじるだけで一瞬でできるようになるからです。

実務ではツールを賢く使いこなしつつ、色の感覚を少しずつ養っていきましょう。

＞＞RGB・RGBA・HEX・HEXA・HSL・HSLAカラーコード相互変換ツール【無料・登録不要】

タイトルとURLをコピーしました