CSSホバーエフェクト ギャラリーとは、下線・ボーダー・背景塗り・テキスト・3D・発光など、ナビゲーションやテキストリンク向けのホバーアニメーション100種類を実際にマウスを乗せて試し、HTML+CSSをワンクリックでコピーできる無料ツールです。すべてCSSのみで動くため、外部ライブラリやJavaScriptは不要です。
「ナビのホバーが素っ気ないので下線アニメーションを付けたい」「リンクのマウスオーバーに気の利いた動きを足したい」——そんなとき、検索して出てきたコードを1つずつ貼って試すのは地味に時間がかかります。動きはページに貼るまで分からず、色も自分のサイトに合わせて書き換える必要があるからです。
この記事では、CodeQuest.workが公開している無料ツール「CSSホバーエフェクト ギャラリー」の特徴と使い方を、実際の操作の流れに沿って解説します。9カテゴリ・全100種類のエフェクトをその場でホバーして比較し、アクセント色を自分のサイトに合わせてからコードを取得できるツールです。
CSSホバーエフェクト ギャラリーとは
CSSホバーエフェクト ギャラリーは、ブラウザだけで完結するホバーアニメーションの試用＆コード取得ツールです。基本の流れは「ホバーで試す → 選ぶ → コピペ」の3ステップだけ。一覧のカードにマウスを乗せると実際の動きがその場で確認でき、気に入ったものはHTMLとCSSのセットをワンクリックでコピーできます。
収録しているのは、ナビゲーションメニューやテキストリンクに使うことを想定した「マウス操作起点」の動きです。fadeやzoomのように時間経過で連続再生するアニメーションを探している場合は、姉妹ツールを解説したCSSアニメーションをコピペで使える無料ツールのほうが目的に合います。「ページを開いたときに動くのがアニメーションギャラリー、マウスを乗せたときに動くのがホバーエフェクト ギャラリー」という棲み分けです。
このツールでできること
機能はシンプルに絞られています。登録やインストールは不要で、ページを開いた瞬間から使えます。
- 実際にホバーで試す：カードにマウスを乗せると、本番と同じ動きをその場で再生
- カテゴリで絞り込み：下線・ボーダー・背景・テキスト・3D・ナビ装飾・発光/影・変形・エフェクトの9分類をチップで切り替え
- HTML+CSSをワンクリックコピー：各カードのコピーボタンで、そのまま貼れるコード一式を取得
- コードプレビュー：カードをクリックするとサイドバーに全コードを表示。貼る前に中身を確認できる
- 色のカスタマイズ：アクセント色・サブ色をカラーピッカーで変更すると、プレビューとコピーされるコードの両方に即反映
コピーされるコードは <style> タグ入りのCSSと、対応するHTMLのセットです。CodePenやローカルのHTMLファイルにそのまま貼れば、その場で同じ動きが再現されます。なお、CodeQuest.workではこのほかにもCSS系の無料ツールを公開しており、全体像はCSSの装飾・アニメーションを作る無料ジェネレーターまとめで確認できます。
使い方は3ステップ
- カードにマウスを乗せて動きを確認する：一覧の各カードが実物のプレビューです。上部のチップで「下線」「3D」などカテゴリを絞り込めます
- 色を自分のサイトに合わせる：サイドバーのカラーピッカーでアクセント色・サブ色を変更します（デフォルトのままでもOK）
- コピーして貼り付ける：気に入ったカードのコピーボタンを押すと、HTML+CSSがクリップボードに入ります。あとは自分のページに貼るだけです
貼る前にコードの中身を確認したい場合は、カード本体をクリックするとサイドバーの「コードプレビュー」に全文が表示されます。どのプロパティで動きが作られているかを読んでから採用を決められるので、学習用途にも向いています。
収録エフェクトの9カテゴリ
全100種類は、使いどころが分かりやすいように9つのカテゴリに整理されています。
| カテゴリ | 種類数 | 代表例 |
|---|---|---|
| 下線 | 12種 | 下線が左から／通り抜け下線／二重下線（時間差）／グラデーション下線 |
| ボーダー | 12種 | 枠線を一周描く／四隅から枠になる／グラデ枠が回る／角丸ピル化 |
| 背景 | 12種 | 右からスイープ／斜めスライス／円形に広がる／マーカーでなぞる |
| テキスト | 14種 | 1文字ずつ持ち上がる／上下ロールオーバー／グリッチ／太さが変わる |
| 3D | 12種 | キューブ回転／縦フリップ（裏面）／ドアが開く／押し込みボタン |
| ナビ装飾 | 10種 | ドットが現れる／矢印がスライドイン／ピル背景がふわっと／左に縦バー |
| 発光・影 | 10種 | ネオン点灯／スポットライト／ふわっと浮く影／蛍光灯フリッカー点灯 |
| 変形 | 10種 | 弾んで拡大／ジェリー／ふわふわ浮遊／押されて凹む |
| エフェクト | 8種 | 波紋が広がる／キラッと光る／粒が弾ける／残像が広がる |
下線系：ナビの定番はまずここから
グローバルナビで最も使用頻度が高いのが下線系です。たとえば「下線が左から」は、linear-gradient を背景として敷き、background-size を 0 から 100% に変化させる定番テクニックで実装されています。
.he-ul-left {
display: inline-block; padding-bottom: 4px;
color: #1e293b; font-size: 1.15rem; font-weight: 700; text-decoration: none;
background: linear-gradient(#6366f1, #6366f1) no-repeat left bottom / 0 2px;
transition: background-size 0.3s ease;
}
.he-ul-left:hover { background-size: 100% 2px; }疑似要素を使わずに背景グラデーションだけで下線を描いているため、HTMLは a タグ1つで完結します。「左から入って外すと右へ抜ける」通り抜け下線や、グレーの下線とアクセント色の下線が入れ替わるパターンなど、同じ下線でも印象の違う12種類から選べます。
3D系：perspectiveで立体的に動かす
3D系は perspective と transform: rotateX() / rotateY() を組み合わせた立体表現です。ホバーするとリンクが立方体のように回転して裏面のラベルが現れる「キューブ回転」、カードが縦に反転する「縦フリップ」、扉が奥へ開く「ドアが開く」など、動きの大きいものが揃っています。ヒーローエリア直下のメニューやポートフォリオのナビなど、遊び心を出したい場面に向いています。
発光・影系：ダークテーマと相性が良い
text-shadow や box-shadow を重ねて光らせる「ネオン点灯」、マウス位置とは無関係に文字の上を光が走る「文字を光が走る」、点灯し損ねた蛍光灯のようにチカチカしてから点く「蛍光灯フリッカー点灯」などが含まれます。発光系は暗い背景の上でこそ映えるため、ダークテーマのサイトやフッターナビでの採用がおすすめです。
アクセント色・サブ色のカスタマイズ
このツールの実務的な強みが色のカスタマイズです。サイドバーの「色の設定」でアクセント色（デフォルト #6366f1）とサブ色（デフォルト #ec4899）を変更すると、一覧のプレビュー全部と、コピーされるコードの色指定がまとめて置き換わります。
「コピペしたあとにCSS内の色コードを探して書き換える」作業が不要になるため、ブランドカラーが決まっているサイトほど時短効果が大きくなります。自社サイトのキーカラーを設定してから一覧を眺めると、「そのサイトに実装したときの見え方」で比較検討できるのもポイントです。色は「↺ 色をデフォルトに戻す」でいつでも初期状態に戻せます。
コピーしたコードをナビに組み込む方法
ナビメニューへの適用例
コピーされるHTMLはリンク1つ分のサンプルなので、ナビに使うときは既存のメニューのリンクにクラスを付け替えます。たとえば「下線が左から」（クラス名 he-ul-left）をナビ全体に適用する場合は次のようになります。
<nav>
<ul class="global-nav">
<li><a class="he-ul-left" href="/">ホーム</a></li>
<li><a class="he-ul-left" href="/about/">会社概要</a></li>
<li><a class="he-ul-left" href="/service/">サービス</a></li>
<li><a class="he-ul-left" href="/contact/">お問い合わせ</a></li>
</ul>
</nav>CSSはコピーしたものを <style> タグごと貼るか、中身だけを既存のCSSファイルに移します。各エフェクトのクラス名には he-（hover effectの略）のプレフィックスが付いているため、既存のクラス名と衝突しにくい設計です。なお、ホバー演出はあくまで仕上げであり、ナビそのものの構成や項目設計に迷いがある場合はナビゲーションの作り方と最適化を先に読むのがおすすめです。
既存サイトへの馴染ませ方
コピーしたコードには、プレビュー用に文字色・フォントサイズ・太さの指定が含まれています。既存サイトに組み込むときは、color や font-size、font-weight をサイト側の指定に合わせて削るか上書きしてください。動きの速さを変えたい場合は transition の秒数（多くのエフェクトで 0.3s 前後）を調整します。0.2〜0.4秒の範囲に収めると、機敏さと滑らかさのバランスが取りやすくなります。
すべてCSSのみ＝JS不要で動く
100種類すべてが :hover 疑似クラスと transition／animation の組み合わせだけで実装されており、JavaScriptを1行も使いません。読み込むライブラリがないのでページ表示が重くならず、既存のスクリプトと干渉する心配もありません。WordPressのカスタムCSS欄のように「CSSしか書けない環境」でもそのまま使えます。
動きの主体も transform や opacity、background-size などGPUで効率よく処理されやすいプロパティが中心です。一部のエフェクトはCSSの新しめの機能（@property によるグラデーション角度のアニメーションなど）を使っており、その場合はコード内のコメントに対応ブラウザの注意書きが入っています。コードを読むと「この動きはこう作るのか」という発見があるはずで、CSS表現の引き出しを増やす教材としても機能します。
こんな場面で使える
- コーポレートサイトのグローバルナビ：下線系・ナビ装飾系で上品に動きを足す
- LP内のテキストリンク：背景塗りやマーカー系でクリックできることを強調する
- ポートフォリオ・個人サイト：3D系・グリッチ系で個性を出す
- ダークテーマのサイト：ネオン・発光系でテーマの世界観を強める
- コーディング学習・模写：コードプレビューで実装テクニックを読み解く
逆に、1つのホバー演出を仕組みから深掘りしたい場合は、当サイトの実装解説記事が向いています。たとえばホバーで立体影を付けるアニメーションや、ホバーで動画再生するアニメーションでは、JavaScriptも組み合わせた一歩踏み込んだホバー表現を1つずつ解説しています。「まず幅広く試すならギャラリー、1つを深く作り込むなら個別記事」と使い分けてください。
使うときにつまずきやすいポイント
タッチデバイスでは:hoverが発火しない
スマートフォンやタブレットにはマウスカーソルがないため、:hover の演出は基本的に再生されません（タップ時に一瞬適用される挙動はOSやブラウザによって異なります）。したがって、ホバーエフェクトは「PCで見た人への上乗せ演出」と位置づけ、動かなくても情報が伝わる設計にしておくのが原則です。リンクだと分かる見た目（色・下線・配置）は、ホバーがなくても成立させておきましょう。
動きを減らしたいユーザーへの配慮
OSで「視差効果を減らす」を設定しているユーザーには、大きな動きが負担になることがあります。取得したCSSに @media (prefers-reduced-motion: reduce) を追記して、動きを無効化または控えめにするとアクセシビリティに配慮できます（参考: MDN: prefers-reduced-motion）。特に3D系・グリッチ系・フリッカー系を採用するときは検討する価値があります。
一部のエフェクトはHTML属性やフォントに条件がある
テキスト系の一部（上下ロールオーバーや色ワイプなど）は、data-text 属性に同じ文字列を複製して重ねる実装のため、リンクの文言を変えたら属性側も同じ文字列に更新する必要があります。また「太さが変わる」は太さを連続変化できる可変フォント（バリアブルフォント）を読み込んでいるページでこそ滑らかに動きます。コピーしたコードのコメントに条件が書かれているので、貼る前に一読してください。
よくある質問
Q. 外部ライブラリやJavaScriptは必要ですか？
いいえ。収録されている100種類はすべてCSSのみで実装されており、外部ライブラリの読み込みやJavaScriptは不要です。コピーしたHTMLとCSSを貼り付けるだけで動作します。
Q. コピーしたコードはどこに貼ればいいですか？
コピーされるのは <style> タグ入りのCSSとHTMLのセットです。試すだけならHTMLファイルやCodePenにそのまま貼れば動きます。本番サイトではCSS部分を既存のスタイルシートに移し、HTML側は既存のリンクにクラス名を付け替えるのがきれいな組み込み方です。
Q. スマートフォンでもホバーエフェクトは動きますか？
タッチ操作にはマウスオーバーがないため、基本的に再生されません。ホバーエフェクトはPC閲覧者向けの上乗せ演出と考え、動かなくてもリンクだと分かるデザインにしておくことを推奨します。
Q. 色は自分のサイトに合わせて変えられますか？
はい。サイドバーのカラーピッカーでアクセント色とサブ色を変更すると、一覧のプレビューとコピーされるコードの両方に反映されます。コピー後に色コードを手作業で書き換える必要はありません。
Q. CSSアニメーションギャラリーとの違いは何ですか？
CSSアニメーションギャラリーはfadeやzoomなど時間経過で再生される @keyframes 主体の動きを、本ツールはマウスを乗せたときに反応する :hover 主体の動きを収録しています。「表示時に動かすならアニメーションギャラリー、操作に反応させるならホバーエフェクト ギャラリー」という使い分けです。
Q. 商用サイトでも無料で使えますか？
はい。個人・商用を問わず無料で利用でき、回数制限や登録もありません。取得したコードは自分のプロジェクトに自由に組み込めます。
まとめ
CSSホバーエフェクト ギャラリーは、ナビ・テキストリンク向けのホバーアニメーション100種類を実際に試しながら選び、色を合わせて、HTML+CSSをワンクリックでコピーできる無料ツールです。すべてCSSのみで動くため実装が軽く、コピペ後の色替え作業も不要です。
ホバー演出は面積こそ小さいものの、サイトの手触りを大きく左右するディテールです。「なんとなく素っ気ない」と感じているナビがあったら、まず一覧にマウスを走らせて、しっくりくる動きを探してみてください。