クリックで開く「アコーディオン表示」を作る方法（上級者向け）
2025年10月30日
1．アコーディオン表示をしたい場合
長い説明やQ&Aを見やすくまとめたいときに便利なのが、クリックで開閉できる「アコーディオン表示」です。
見出しをクリックすると内容が開き、別の場所を選ぶと閉じます。
PAGEKitでは特別なスクリプトを使わず、HTMLとオリジナルCSSだけで作れます。
ここでは、だれでも試せる手順で紹介します。
見出しをクリックすると内容が開き、別の場所を選ぶと閉じます。
PAGEKitでは特別なスクリプトを使わず、HTMLとオリジナルCSSだけで作れます。
ここでは、だれでも試せる手順で紹介します。
2．HTMLの入力
アコーディオンを設置したいページを編集します。
閉じた部分の中身は通常の編集画面では見えないので、本文は「HTML編集モード」で入力してください。
下のHTMLをコピーして貼り付け、セクション名や文章を必要に応じて書き換えます。
閉じた部分の中身は通常の編集画面では見えないので、本文は「HTML編集モード」で入力してください。
下のHTMLをコピーして貼り付け、セクション名や文章を必要に応じて書き換えます。
【貼り付けるHTML】
<div class="accordion">
<div class="item">
<div class="accordion-header" tabindex="0" role="button" aria-expanded="false">セクション 1</div>
<div class="content">
<div>セクション１の内容を記述します。</div>
</div>
</div>
<div class="item">
<div class="accordion-header" tabindex="0" role="button" aria-expanded="false">セクション 1</div>
<div class="content">
<div>セクション１の内容を記述します。</div>
</div>
</div>
<div class="item">
<div class="accordion-header" tabindex="0" role="button" aria-expanded="false">セクション 2</div>
<div class="content">
<div>セクション２の内容を記述します。</div>
</div>
</div>
<div class="accordion-header" tabindex="0" role="button" aria-expanded="false">セクション 2</div>
<div class="content">
<div>セクション２の内容を記述します。</div>
</div>
</div>
<div class="item">
<div class="accordion-header" tabindex="0" role="button" aria-expanded="false">セクション 3</div>
<div class="content">
<div>セクション３の内容を記述します。</div>
</div>
</div>
</div>
<div class="accordion-header" tabindex="0" role="button" aria-expanded="false">セクション 3</div>
<div class="content">
<div>セクション３の内容を記述します。</div>
</div>
</div>
</div>
2．オリジナルCSSの入力
次に、編集ツールの「オリジナルCSS」を開き、下のCSSを貼り付けて保存します。
これでクリックで開閉する動きが有効になります。
これでクリックで開閉する動きが有効になります。
【貼り付けるCSS】
.accordion {
width: min(720px, 90%);
margin: 24px auto;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
width: min(720px, 90%);
margin: 24px auto;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.accordion .item {
border: 1px solid #ddd;
border-radius: 12px;
margin: 10px 0;
overflow: hidden;
background: #fff;
}
border: 1px solid #ddd;
border-radius: 12px;
margin: 10px 0;
overflow: hidden;
background: #fff;
}
.accordion .accordion-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
cursor: pointer;
user-select: none;
outline: none;
}
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
cursor: pointer;
user-select: none;
outline: none;
}
.accordion .accordion-header:focus-visible {
box-shadow: 0 0 0 3px rgba(0,120,255,.3) inset;
}
box-shadow: 0 0 0 3px rgba(0,120,255,.3) inset;
}
.accordion .accordion-header::before {
content: "▶";
display: inline-block;
transition: transform .25s ease;
transform: rotate(0deg);
}
content: "▶";
display: inline-block;
transition: transform .25s ease;
transform: rotate(0deg);
}
.accordion .content {
max-height: 0;
overflow: hidden;
padding: 0 16px;
transition: max-height .3s ease, padding .25s ease;
color: #333;
line-height: 1.6;
background: #fafafa;
}
max-height: 0;
overflow: hidden;
padding: 0 16px;
transition: max-height .3s ease, padding .25s ease;
color: #333;
line-height: 1.6;
background: #fafafa;
}
.accordion .item:focus-within .content {
max-height: 300px;
padding: 12px 16px 16px;
}
max-height: 300px;
padding: 12px 16px 16px;
}
.accordion .item:focus-within .accordion-header::before {
transform: rotate(90deg);
}
transform: rotate(90deg);
}
3．CSSの簡単な解説
見出し（.accordion-header）をクリックすると、その下の内容（.content）が開くようになっています。
開いている間は高さ（max-height）と内側の余白（padding）を広げ、文章が見えるようになります。
小さな三角形（▶）はCSSで作られており、開いたときに90度回転して下向き（▼）になります。
別の場所を選ぶと自動で閉じるため、常にひとつだけ開いた状態になります。
開いている間は高さ（max-height）と内側の余白（padding）を広げ、文章が見えるようになります。
小さな三角形（▶）はCSSで作られており、開いたときに90度回転して下向き（▼）になります。
別の場所を選ぶと自動で閉じるため、常にひとつだけ開いた状態になります。
4．すこしカスタムしたい場合のCSSの変更箇所
・色を変えたいとき：.accordion .item の border や background の色コードを変更します。
・開くスピードを変えたいとき：transition の数字（例：.3s）を変えると速度が変わります。
・余白を調整したいとき：.accordion-header と .content の padding の数字を調整します。
・文章が長くて途中で切れるとき：.item:focus-within .content の max-height を大きくします（例：300px → 600px）。
・開くスピードを変えたいとき：transition の数字（例：.3s）を変えると速度が変わります。
・余白を調整したいとき：.accordion-header と .content の padding の数字を調整します。
・文章が長くて途中で切れるとき：.item:focus-within .content の max-height を大きくします（例：300px → 600px）。
5．まとめ
アコーディオン表示は、説明やQ&Aをすっきり整理できる便利な見せ方です。
PAGEKitでは、HTMLとオリジナルCSSだけで導入できます。
本文は「HTML編集モード」で入力し、保存後にページを開いて開閉の動きを確認してください。
色や速度などは、CSSの数字を少し変えるだけで自分のサイトに合わせて調整できます。
PAGEKitでは、HTMLとオリジナルCSSだけで導入できます。
本文は「HTML編集モード」で入力し、保存後にページを開いて開閉の動きを確認してください。
色や速度などは、CSSの数字を少し変えるだけで自分のサイトに合わせて調整できます。
ABOUT ME  |
ホームページかんたん作成のPAGEKit（ページキット） ホームページを作るのは、むずかしそう。 そう思っていた方も、PAGEKitなら「意外とカンタンだった」と感じていただけるはずです。 専門知識がなくても、必要なページがすぐに揃うテンプレートと、やさしい操作画面。 まずは一度、実際の使いやすさを体験してみませんか？ |