PEアコーディオンの作成
JavaScriptなしで動作するアコーディオンを作り、その後拡張します
「PEアコーディオンの作成」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
目標：JSなしで動作するアコーディオン
アコーディオンのPE版は、HTMLだけ、つまりネイティブの<details>/<summary>要素の組み合わせを使います。summaryをクリックするとパネルを切り替えられます。CSSもJSもフレームワークも必要ありません。HTMLに組み込まれています。
<details>
<summary>What is HTML?</summary>
<p>HTML is the markup language of the web.</p>
</details>組み込みのアクセシビリティ
<summary>は、フォーカス可能でキーボード操作にも対応したボタンです（Enter/Spaceで切り替わります）。スクリーンリーダーは展開状態または折りたたみ状態を読み上げます。カスタムReactアコーディオンで実現するにはARIAやイベント処理が数十行必要になる機能を、2つのHTML要素だけで実現できます。
CSSを重ねる
開閉用の三角形、パネルの余白、トランジションは通常のCSSでスタイルします。open属性が状態を反映するため、details[open] summary { color: blue; }は展開時にのみ適用されます。見た目を整えるためにJSは必要ありません。
details { border-bottom: 1px solid #ccc; padding: 8px 0; }
summary { font-weight: bold; cursor: pointer; }
details[open] summary { color: var(--accent); }開閉をアニメーションさせる
デフォルトの開閉は瞬時に行われます。コンテンツの表示状態をトランジションさせるか、JSでパネルの高さを測定してmax-heightをアニメーションさせることで、アニメーションを追加できます。単純なケースでは急な切り替えでも問題ありません。アニメーションはCSS+JSによる拡張機能として段階的に適用します。
JavaScriptで機能を拡張する
JSでは、便利な追加機能を実装できます。たとえば、1つが開いたときに他のアコーディオンを閉じる（単一オープンモード）、開いた状態をlocalStorageに保存する、トランジションをアニメーションさせる、どの項目が展開されたかを分析用に記録するといった機能です。これらの拡張はすべて、既存の機能に追加するだけです。
document.querySelectorAll("details").forEach((d) => {
d.addEventListener("toggle", () => {
if (d.open) {
document.querySelectorAll("details").forEach((o) => {
if (o !== d) o.removeAttribute("open");
});
}
});
});toggleイベント
<details>は、open状態が変化するたびにtoggleイベントを発生させます。クリックハンドラーを組み直さずに、ユーザーによる展開に反応できます。マウスクリックとキーボード操作の両方に対応しています。
状態をサーバー側で描画する
最初から開いたアコーディオンを描画するには、サーバー側でopen属性を設定します。<details open>のように記述すると、JSが実行される前から状態がHTMLに含まれるため、クローラーや低速な接続環境のユーザーも利用できます。
組み込み機能では不十分な場合
カスタムの展開・折りたたみアイコン、アニメーション付きの表示、多列パネルなどがデザイン上必要であれば、カスタム版を構築します。ただし、可能であれば基盤となる構造には<details>/<summary>を使用してください。ネイティブ要素をまったく使えない場合にのみ、ARIAを追加します。
JavaScriptなしで検証する
DevToolsでJavaScriptを無効にし、アコーディオンが引き続き動作することを確認します。summaryをクリックできること、パネルが切り替わること、フォーカス順序が論理的であること、キーボードで操作できることを確認してください。何かが壊れる場合、そのJSは拡張機能ではなく必須要件であり、PEに反します。
CSSのみで1つだけ開く
JSを使わずにラジオボタンのような「一度に1つだけ開く」動作を実現するには、<details>のname属性を使用します（Chrome/Safariでサポートされています）。すべての<details name="faq">が状態を共有するため、1つを開くと他が閉じます。ラジオボタンを模した純粋なHTMLのパターンです。
JSのみのアコーディオンから移行する
div+JSを<details>/<summary>に置き換え、スタイル用のCSSクラスは維持します。その結果、HTMLが短くなり、JSへの依存がなくなり、アクセシビリティが向上し、コンテンツをインデックス化できるようになります。ほとんどのJSアコーディオンは、ユーザーから見える変化を最小限に抑えてPEへ移行できます。
理解度チェック
JavaScriptを一切使わずに完全に動作するアコーディオンを提供するHTML要素の組み合わせは何ですか？
まとめ
PEアコーディオンでは、基盤としてネイティブの<details>/<summary>を使用するため、JSなしでも完全にアクセシブルでキーボード操作に対応します。見た目のスタイルにはCSSを重ね、アニメーションや単一オープン動作が必要な場合はJSを追加します。JSを無効にしても基盤の機能が動作することを確認してください。新しいname属性を使えば、CSSのみで単一オープンモードも実現できます。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「PEアコーディオンの作成」レッスンは無料ですか？
はい。「PEアコーディオンの作成」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「PEアコーディオンの作成」で何を学びますか？
JavaScriptなしで動作するアコーディオンを作り、その後拡張します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「PEアコーディオンの作成」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。