マウスホバーで開くアコーディオンの作り方
マウスホバーで開くアコーディオンの作り方を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、アコーディオンの見出し部分へマウスカーソルを乗せると内容が表示され、カーソルを外すと自動で閉じるUIを作成します。クリック操作を行わなくても内容を確認できるため、マウス操作を中心に利用するPC向けのページで素早く情報を表示したい場合に利用できます。
FAQ、商品説明、サービス案内、管理画面の補足情報、メニュー一覧など、複数の項目をコンパクトに並べながら必要な内容だけを一時的に表示したい場面に適しています。見出しへカーソルを合わせている間だけ内容が表示されるため、確認が終わってマウスを外すと自動的に閉じます。また、開いている項目では見出し右側の「＋」が「－」へ切り替わるため、現在の表示状態も分かりやすくなっています。
HTMLではタイトル、説明文、各アコーディオンの見出しや本文を変更できます。CSSでは全体の横幅、余白、背景色、枠線、角丸、文字色などを調整でき、JavaScriptでは各項目のマウス進入とマウス退出を検知して開閉状態を切り替えます。外部ライブラリを使用せず、HTML・CSS・JavaScriptの3ファイルで構成できるため、仕組みを確認しながら導入しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
見出しにマウスを乗せると内容が開き、マウスを外すと閉じます。
各見出しへマウスカーソルを乗せると内容が表示され、カーソルを外すと自動で閉じます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードを指定 -->
<meta charset="UTF-8">
<!-- 画面幅に合わせて表示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>マウスホバーで開くアコーディオン</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- デモ全体を囲むエリア -->
<div class="hover-open-accordion_wrap">
<!-- タイトル -->
<div class="hover-open-accordion_title">
マウスホバーで開くアコーディオン
</div>
<!-- 説明文 -->
<p class="hover-open-accordion_text">
見出しにマウスを乗せると内容が開き、マウスを外すと閉じます。
</p>
<!-- アコーディオン項目 -->
<div class="hover-open-accordion_item">
<button class="hover-open-accordion_button" type="button">
ホバーとは？
</button>
<div class="hover-open-accordion_content">
マウスカーソルを要素の上に乗せている状態のことです。
</div>
</div>
<!-- アコーディオン項目 -->
<div class="hover-open-accordion_item">
<button class="hover-open-accordion_button" type="button">
どんな場面で使う？
</button>
<div class="hover-open-accordion_content">
メニュー、FAQ、商品説明などを素早く表示したい場合に使えます。
</div>
</div>
<!-- アコーディオン項目 -->
<div class="hover-open-accordion_item">
<button class="hover-open-accordion_button" type="button">
必要なファイルは？
</button>
<div class="hover-open-accordion_content">
HTML、CSS、JavaScriptの3つのファイルで作成できます。
</div>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではアコーディオン全体のタイトル、説明文、各項目の見出しと内容を作成します。CSSではアコーディオンの横幅や余白、背景色、枠線、角丸、開閉アイコンなどの見た目を設定し、JavaScriptではマウスカーソルを項目へ乗せたときに内容を開き、外したときに閉じる処理を行います。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはアコーディオン全体を構成するファイルです。「マウスホバーで開くアコーディオン」のタイトル、説明文、「ホバーとは？」「どんな場面で使う？」「必要なファイルは？」の各見出しと、それぞれを開いたときに表示する文章を変更できます。アコーディオン項目を追加・削除する場合も、このファイル内のhover-open-accordion_itemを編集します。
style.cssはアコーディオンのデザインを設定するファイルです。全体の最大横幅、余白、背景色、枠線、角丸、タイトルの文字サイズ、各項目の間隔、ボタンの表示、開閉アイコンの色、内容部分の行間などを変更できます。
script.jsはマウスホバーによる開閉動作を設定するファイルです。各アコーディオン項目へmouseenterとmouseleaveのイベントを設定し、マウスカーソルを乗せるとis-openクラスを追加し、カーソルを外すと削除します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。アコーディオンの各項目へマウスカーソルを乗せると内容が表示され、項目からカーソルを外すと内容が閉じます。
カスタマイズできる内容
index.htmlではアコーディオン全体のタイトル、説明文、各項目の見出し、開いたときに表示する文章を変更できます。hover-open-accordion_itemのまとまりを追加・削除することで、表示するアコーディオン項目の数も変更できます。
style.cssでは全体の横幅や余白、背景色、枠線、角丸、文字サイズ、項目同士の間隔、ボタンの背景色や文字色、開閉アイコンの色、内容部分の余白や行間を変更できます。JavaScriptではmouseenterで開き、mouseleaveで閉じる処理が設定されています。
数値調整
style.css
max-width:700px;
アコーディオン全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
アコーディオン全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
アコーディオン全体の内側余白です。値を大きくすると内容と外側の枠線との間隔が広がります。
border:1px solid #e5e7eb;
アコーディオン全体と各項目に使用している枠線です。1pxを大きくすると枠線が太くなります。
border-radius:18px;
アコーディオン全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
margin-bottom:12px;
タイトルの下側や各アコーディオン項目の下側に設定している間隔です。値を大きくすると対象となる要素との間隔が広がります。
margin-bottom:24px;
説明文の下側余白です。24pxを大きくすると説明文と最初のアコーディオン項目との間隔が広がります。
border-radius:12px;
各アコーディオン項目の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
padding:16px 18px;
アコーディオンボタンの内側余白です。16pxは上下、18pxは左右の余白を表し、値を大きくするとボタン内の余白が広がります。
padding:0 18px 18px;
開いた内容部分の内側余白です。左右と下側の18pxを変更すると、文章と項目の端との間隔が変わります。
line-height:1.8;
開いた内容部分の文章の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
レスポンシブ対応
このサンプルは、HTMLに設定したviewportと、style.cssのmax-width:700px;を利用して画面幅に合わせて表示します。アコーディオンボタンにはwidth:100%;を指定しているため、項目の横幅に合わせてボタンも表示されます。スマートフォン・タブレット・PCで利用できます。
コメント