English

使い方・FAQ

CSSホバーエフェクト ギャラリーの使い方とよくある質問

🖱️ 基本の使い方

  1. カードにマウスを乗せると、その場でホバーエフェクトが動きます
  2. 上部のカテゴリチップ（下線・ボーダー・背景・テキスト・3D・ナビ装飾・発光・影・変形・エフェクト）で絞り込めます
  3. 気に入ったら HTML+CSS ボタンでコードをコピー。カードをクリックするとサイドバーでコード全文を確認できます
  4. サイドバーの色の設定でアクセント色・サブ色を変更すると、プレビューとコピーコードの両方に反映されます（色は自動保存されます）

🧩 ナビメニューへの適用例

コピーしたコードの class を、既存のナビのリンクに付け替えるだけで適用できます。

  1. コピーした <style> の中身をCSSファイルへ移す
  2. ナビの <a> にコピーコードと同じ class（例: he-ul-left）を付ける
  3. フォントサイズや色は既存デザインに合わせて調整する

❓ よくある質問

Q. コピーしたコードはどう使えばいいですか？
A. コピーされるのは <style> タグ入りのCSSとHTMLのセットです。まず貼り付けて動きを確認し、その後 <style> の中身をご自身のCSSファイルへ移し、HTML側は既存のナビやリンクに class を付け替えるのがおすすめです。
Q. JavaScriptは必要ですか？
A. 不要です。100種類すべて :hover と transition / animation だけのCSSで動きます。外部ライブラリの読み込みもありません。
Q. 色を自分のサイトに合わせられますか？
A. サイドバーの「色の設定」でアクセント色とサブ色を変更すると、プレビューとコピーされるコードの両方に反映されます。文字色などその他の色はコピー後にCSSを直接編集してください。
Q. スマホ（タッチ端末）でも動きますか？
A. :hover はタッチ端末ではタップ時に発火するなど挙動が異なります。タッチ端末では装飾なし（通常表示）でも成立するデザインにしておくのが安全です。
Q. 商用サイトで使えますか？
A. はい。コピーしたコードは個人・商用を問わず自由に利用できます。クレジット表記も不要です。
Q. 一部のエフェクトが動かないブラウザがあります
A. 「グラデ枠が回る」「ブラインドが閉じる」は CSS @property を使うため、最新のChrome / Edge / Safari / Firefoxが必要です。「太さが変わる」は可変フォント（variable font）の読み込みが前提です。その他のエフェクトは主要ブラウザで広く動作します。

🔗 関連ツール

← ギャラリーに戻る