開閉アイコンが90度回転するアコーディオンを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
アコーディオン
2026.08.08
開閉アイコンが90度回転するアコーディオンを作る方法
開閉アイコンが90度回転するアコーディオンを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、見出しをクリックすると右側の開閉アイコンが右向きから下向きへ90度回転しながら、対応する内容を表示・非表示に切り替えます。アイコンは文字記号を使用せずCSSの2本の線で作成するため、フォントによる位置のずれを抑えながら見出しの右側へ配置できます。
閉じている状態では開閉アイコンが右向きになり、項目を開くと90度回転して下向きになります。再度クリックすると元の右向きへ戻り、内容も閉じます。それぞれの項目は個別に開閉できるため、FAQ、商品説明、お問い合わせページ、会員サイトのヘルプ、管理画面の設定項目など、必要な情報だけを展開して見せたい場面で利用できます。
HTMLではタイトル、説明文、各見出し、開閉する本文を変更できます。CSSではアコーディオンの横幅や余白、背景色、角丸のほか、開閉アイコンの大きさ、線の太さ、色、90度回転するアニメーション時間を調整できます。JavaScriptではクリックした項目の開閉状態を切り替えます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できるアコーディオンとして活用できます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項
本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
開閉アイコンが90度回転するアコーディオン
見出しをクリックすると、右側の開閉アイコンが90度回転します。
クリックした項目の内容を表示・非表示に切り替えられるUIです。
FAQ、商品説明、お問い合わせページ、管理画面などで利用できます。
CSSで作った開閉アイコンが、項目の開閉に合わせて右向きから下向きへ90度回転します。
各見出しをクリックすると内容が開閉し、右側の開閉アイコンが90度回転する動きを確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>開閉アイコンが90度回転するアコーディオン</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- アコーディオン全体 -->
<div class="rotate-90-icon-accordion_wrap">
<!-- タイトル -->
<div class="rotate-90-icon-accordion_title">
開閉アイコンが90度回転するアコーディオン
</div>
<!-- 説明文 -->
<p class="rotate-90-icon-accordion_text">
見出しをクリックすると、右側の開閉アイコンが90度回転します。
</p>
<!-- 1つ目の項目 -->
<div class="rotate-90-icon-accordion_item">
<!-- 開閉ボタン -->
<button
class="rotate-90-icon-accordion_button"
type="button"
aria-expanded="false">
<span>アコーディオンとは？</span>
<!-- 開閉アイコン -->
<span
class="rotate-90-icon-accordion_icon"
aria-hidden="true">
</span>
</button>
<!-- 開閉する内容 -->
<div class="rotate-90-icon-accordion_content">
<div class="rotate-90-icon-accordion_content-inner">
<p class="rotate-90-icon-accordion_content-text">
クリックした項目の内容を表示・非表示に切り替えられるUIです。
</p>
</div>
</div>
</div>
<!-- 2つ目の項目 -->
<div class="rotate-90-icon-accordion_item">
<!-- 開閉ボタン -->
<button
class="rotate-90-icon-accordion_button"
type="button"
aria-expanded="false">
<span>どんな場面で使う？</span>
<!-- 開閉アイコン -->
<span
class="rotate-90-icon-accordion_icon"
aria-hidden="true">
</span>
</button>
<!-- 開閉する内容 -->
<div class="rotate-90-icon-accordion_content">
<div class="rotate-90-icon-accordion_content-inner">
<p class="rotate-90-icon-accordion_content-text">
FAQ、商品説明、お問い合わせページ、管理画面などで利用できます。
</p>
</div>
</div>
</div>
<!-- 3つ目の項目 -->
<div class="rotate-90-icon-accordion_item">
<!-- 開閉ボタン -->
<button
class="rotate-90-icon-accordion_button"
type="button"
aria-expanded="false">
<span>アイコンの特徴は？</span>
<!-- 開閉アイコン -->
<span
class="rotate-90-icon-accordion_icon"
aria-hidden="true">
</span>
</button>
<!-- 開閉する内容 -->
<div class="rotate-90-icon-accordion_content">
<div class="rotate-90-icon-accordion_content-inner">
<p class="rotate-90-icon-accordion_content-text">
CSSで作った開閉アイコンが、項目の開閉に合わせて右向きから下向きへ90度回転します。
</p>
</div>
</div>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
/* ページ全体 */
body{
margin:0; /* ブラウザ標準の外側余白を削除 */
padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
background:#ffffff; /* ページ全体の背景色 */
color:#111827; /* ページ全体の基本文字色 */
font-family:sans-serif; /* ページ全体で使用するフォント */
}
/* アコーディオン全体 */
.rotate-90-icon-accordion_wrap{
width:100%; /* 画面幅に合わせて横幅を縮小 */
max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
padding:32px; /* 内側の余白。値を大きくすると余白が広がる */
border:1px solid #e5e7eb; /* 全体を囲む枠線 */
border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
background:#f8fafc; /* アコーディオン全体の背景色 */
box-sizing:border-box; /* paddingとborderを横幅へ含める */
}
/* アコーディオン内の全要素 */
.rotate-90-icon-accordion_wrap *{
box-sizing:border-box; /* paddingとborderを要素サイズへ含める */
}
/* タイトル */
.rotate-90-icon-accordion_title{
margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
text-align:center; /* タイトルを中央揃えにする */
}
/* 説明文 */
.rotate-90-icon-accordion_text{
margin:0 0 24px; /* 下側24pxの余白。値を大きくすると項目との間隔が広がる */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間 */
text-align:center; /* 説明文を中央揃えにする */
}
/* アコーディオン項目 */
.rotate-90-icon-accordion_item{
margin:0 0 12px; /* 下側12pxの余白。値を大きくすると項目同士の間隔が広がる */
border:1px solid #e5e7eb; /* 項目を囲む枠線 */
border-radius:12px; /* 項目の角丸。値を大きくすると丸みが強くなる */
background:#ffffff; /* 項目の背景色 */
overflow:hidden; /* 開閉内容を項目の外へ表示しない */
}
/* 最後のアコーディオン項目 */
.rotate-90-icon-accordion_item:last-child{
margin-bottom:0; /* 最後の項目だけ下側余白を削除 */
}
/* 開閉ボタン */
.rotate-90-icon-accordion_button{
display:flex; /* 見出しと開閉アイコンを横並びにする */
align-items:center; /* 上下中央へ揃える */
justify-content:space-between; /* 見出しとアイコンを左右へ配置 */
width:100%; /* 項目の横幅いっぱいに表示 */
min-height:56px; /* 最小高さ。値を大きくするとボタンが高くなる */
padding:16px 18px; /* 上下16px・左右18pxの内側余白 */
border:none; /* ブラウザ標準のボタン枠線を削除 */
background:#ffffff; /* ボタンの背景色 */
color:#111827; /* 見出しの文字色 */
font:inherit; /* ページ全体と同じフォントを使用 */
font-size:16px; /* 見出しの文字サイズ */
font-weight:700; /* 見出しを太字にする */
line-height:1.5; /* 見出しの行間 */
text-align:left; /* 見出しを左揃えにする */
cursor:pointer; /* マウスを乗せたときにポインターを表示 */
}
/* キーボードフォーカス時 */
.rotate-90-icon-accordion_button:focus-visible{
outline:3px solid rgba(37,99,235,.22); /* フォーカス位置を示す3pxの枠線 */
outline-offset:-3px; /* 枠線を3px内側へ表示 */
}
/* 開閉アイコン */
.rotate-90-icon-accordion_icon{
position:relative; /* アイコンを配置する基準 */
flex-shrink:0; /* アイコンが縮まないようにする */
width:22px; /* アイコン領域の横幅 */
height:22px; /* アイコン領域の高さ */
margin-left:16px; /* 見出し文字との間隔 */
transform:rotate(-90deg); /* 初期状態では右向きにする */
transition:transform .35s ease; /* 0.35秒で90度回転する */
}
/* 2本の線で開閉アイコンを作成 */
.rotate-90-icon-accordion_icon::before{
content:""; /* 疑似要素を表示する */
position:absolute; /* アイコン領域内へ配置 */
top:4px; /* 上から4pxの位置へ配置 */
left:5px; /* 左から5pxの位置へ配置 */
width:10px; /* アイコンの横方向の大きさ */
height:10px; /* アイコンの縦方向の大きさ */
border-right:3px solid #2563eb; /* アイコン右側の線 */
border-bottom:3px solid #2563eb; /* アイコン下側の線 */
transform:rotate(45deg); /* 2本の線を下向きの形へ回転 */
}
/* 開いている状態の開閉アイコン */
.rotate-90-icon-accordion_item.is-open
.rotate-90-icon-accordion_icon{
transform:rotate(0deg); /* 90度回転して右向きから下向きへ変更 */
}
/* 開閉する内容 */
.rotate-90-icon-accordion_content{
display:grid; /* 高さを滑らかに切り替える */
grid-template-rows:0fr; /* 閉じた状態では高さを0にする */
transition:grid-template-rows .4s ease; /* 0.4秒で内容を開閉する */
}
/* 開いている内容 */
.rotate-90-icon-accordion_item.is-open
.rotate-90-icon-accordion_content{
grid-template-rows:1fr; /* 内容の高さまで広げる */
}
/* 開閉内容の内側 */
.rotate-90-icon-accordion_content-inner{
min-height:0; /* gridで高さ0まで縮小できるようにする */
overflow:hidden; /* 閉じている内容を非表示にする */
}
/* 開閉内容の文章 */
.rotate-90-icon-accordion_content-text{
margin:0; /* ブラウザ標準の外側余白を削除 */
padding:0 18px 18px; /* 左右18px・下18pxの内側余白 */
color:#4b5563; /* 本文の文字色 */
font-size:16px; /* 本文の文字サイズ */
line-height:1.8; /* 本文の行間 */
}
/* 画面幅640px以下 */
@media(max-width:640px){
/* アコーディオン全体 */
.rotate-90-icon-accordion_wrap{
padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
}
/* 開閉ボタン */
.rotate-90-icon-accordion_button{
padding:14px; /* スマートフォンでは内側余白を小さくする */
}
/* 開閉内容の文章 */
.rotate-90-icon-accordion_content-text{
padding:0 14px 18px; /* スマートフォンでは左右余白を小さくする */
}
}
/* すべての開閉ボタンを取得 */
const rotate90IconAccordionButtons=
document.querySelectorAll(
".rotate-90-icon-accordion_button"
);
/* 各開閉ボタンへクリック処理を設定 */
rotate90IconAccordionButtons.forEach(function(button){
/* 開閉ボタンをクリックした時 */
button.addEventListener("click",function(){
/* クリックしたボタンが属する項目を取得 */
const item=button.closest(
".rotate-90-icon-accordion_item"
);
/* is-openクラスを切り替えて現在の開閉状態を取得 */
const isOpen=item.classList.toggle(
"is-open"
);
/* 現在の開閉状態をaria-expandedへ反映 */
button.setAttribute(
"aria-expanded",
String(isOpen)
);
});
});
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q
ダウンロードしたけど、これをネット上で動かすにはどうするの？
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではアコーディオンのタイトル、説明文、各見出し、開閉する本文、右側の開閉アイコンを配置します。CSSではアコーディオン全体のデザインと、2本の線で作成した開閉アイコンの形や90度回転するアニメーションを設定します。JavaScriptでは見出しをクリックした項目へis-openクラスを付け外しし、本文の開閉とaria-expandedの状態を切り替えます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはアコーディオン全体を構成するファイルです。タイトル、説明文、「アコーディオンとは？」「どんな場面で使う？」「アイコンの特徴は？」の各見出しと、開いたときに表示する本文を変更できます。開閉アイコンは文字記号を使用せず、空のspan要素を配置してCSSから表示します。
style.cssはアコーディオン全体と開閉アイコンのデザインを設定するファイルです。全体の横幅、余白、背景色、枠線、角丸、見出しの高さ、本文の表示速度などを変更できます。開閉アイコンは疑似要素の2本の線で作成し、閉じている状態では右向き、開いた状態では90度回転して下向きになるよう設定しています。
script.jsはアコーディオンの開閉処理を行うファイルです。見出しをクリックすると、その項目のis-openクラスを切り替えます。同時にaria-expandedへ現在の開閉状態を反映します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。3つのファイルを保存したあと、sample/index.htmlをブラウザで開いてください。各見出しをクリックすると対応する本文が開閉し、右側の開閉アイコンが右向きから下向きへ90度回転します。再度同じ見出しをクリックすると本文が閉じ、アイコンも元の右向きへ戻ります。それぞれの項目は個別に開閉できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、各見出し、開閉後に表示する本文を変更できます。アコーディオン項目を増やしたい場合は、rotate-90-icon-accordion_itemのまとまりを同じ構成で追加できます。
style.cssではアコーディオン全体の最大横幅、余白、背景色、枠線、角丸、見出しの高さや文字サイズを変更できます。開閉アイコンについては、領域の大きさ、見出し文字との間隔、2本の線の長さや太さ、色、回転時間を調整できます。本文の開閉時間やスマートフォン用の余白も変更できます。
script.jsでは、クリックした項目ごとにis-openクラスを切り替える処理を行っています。現在のコードでは複数の項目を同時に開くことができます。
数値調整
style.css
max-width:700px;
アコーディオン全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
アコーディオン全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
アコーディオン全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
アコーディオン全体の角丸です。値を大きくすると丸みが強くなります。
margin:0 0 12px;
各アコーディオン項目の下側余白です。12pxを大きくすると項目同士の間隔が広がります。
min-height:56px;
見出しボタンの最小高さです。値を大きくすると各見出しが高くなります。
padding:16px 18px;
見出しボタンの内側余白です。上下16px、左右18pxを変更すると見出し内の余白を調整できます。
width:22px;・height:22px;
開閉アイコンを配置する領域の大きさです。値を大きくするとアイコンを配置できる範囲が広がります。
margin-left:16px;
見出し文字と開閉アイコンの間隔です。値を大きくするとアイコンが文字から離れます。
transform:rotate(-90deg);
閉じている状態の開閉アイコンを右向きにする設定です。CSSで作成した下向きの形を-90度回転させています。
transition:transform .35s ease;
開閉アイコンが回転するアニメーション時間です。0.35秒で変化します。値を大きくするとゆっくり、小さくすると速く回転します。
width:12px;
開閉アイコンを構成する2本の線の長さです。値を大きくするとアイコンが大きく見えます。
height:3px;
開閉アイコンを構成する線の太さです。値を大きくすると線が太くなります。
transform:rotate(45deg);とtransform:rotate(-45deg);
2本の線を斜めに配置してシェブロン形状を作る角度です。
transform:rotate(0deg);
項目を開いたときの開閉アイコンの角度です。閉じた状態の-90度から0度へ変化するため、右向きから下向きへ90度回転します。
transition:grid-template-rows .4s ease;
本文を開閉するアニメーション時間です。0.4秒で変化します。値を大きくするとゆっくり、小さくすると速く開閉します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてアコーディオン全体が縮小します。また、640px以下では全体のpaddingを24px 18px、見出しボタンのpaddingを14px、本文の左右余白を14pxへ変更しています。スマートフォン・タブレット・PCで利用できます。
コメント