マウスホバーで開くアコーディオンは、見出しにマウスカーソルを乗せるだけで内容が表示される仕組みです。クリック操作は必要なく、カーソルを見出しから外すと内容が自動的に閉じます。
今回のサンプルでは、「ホバーとは？」「どんな場面で使う？」「必要なファイルは？」の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で利用できます。
コメント