基礎

HTMLで折りたたみメニューを作る｜details要素の使い方


menu
Google

test


HTML 
<details>
   <summary>menu</summary>
   <a href="https://www.google.com/">Google</a>
   <p>test<p>
</details>

説明

Step 1折りたたみメニューとは

折りたたみメニュー（アコーディオン）は、クリックすると開閉するインタラクティブな要素です。ウェブページの内容を整理し、必要に応じて表示・非表示を切り替えることができるため、ユーザーエクスペリエンスの向上に役立ちます。

Step 2基本的な構造

HTMLでは、<details>と<summary>タグを使用して折りたたみメニューを簡単に作成できます。

<details><summary>折りたたんだ時に表示したい内容</summary>
   開いたときの内容
</details>

<summary>タグの中身は常に表示され、クリックすると<details>タグ内の残りの内容が表示されます。

Step 3折りたたみメニュー内のコンテンツ

折りたたみメニューの中には、テキスト、リンク、画像など、さまざまな種類のコンテンツを含めることができます。

<details>
    <summary>お役立ちリンク</summary>
    <p><a href="https://www.google.com">Google</a></p>
    <p>test</p>
</details>

上の例では、「お役立ちリンク」という見出しをクリックすると、Googleへのリンクと「test」というテキストが表示されます。リンクにすることも普通の文字にすることも可能です。

Step 4複数の折りたたみメニュー

複数の折りたたみメニューを並べることで、FAQ（よくある質問）セクションなどを作成できます。

<details>
    <summary>質問1: HTMLとは何ですか？</summary>
    <p>HTMLは「HyperText Markup Language」の略で、Webページを作成するための標準マークアップ言語です。</p>
</details>

<details>
    <summary>質問2: CSSとは何ですか？</summary>
    <p>CSSは「Cascading Style Sheets」の略で、HTMLで作成された要素のスタイルを定義するための言語です。</p>
</details>

<details>
    <summary>質問3: JavaScriptとは何ですか？</summary>
    <p>JavaScriptは、Webページに動的な機能を追加するためのプログラミング言語です。</p>
</details>

Step 5スタイリングの適用

CSSを使用して、折りたたみメニューの外観をカスタマイズすることができます。

<style>
    details {
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
        margin-bottom: 10px;
    }
    
    summary {
        cursor: pointer;
        font-weight: bold;
        padding: 5px;
        background-color: #f0f0f0;
    }
    
    details[open] summary {
        background-color: #e0e0e0;
    }
</style>

<details>
    <summary>スタイリングされた折りたたみメニュー</summary>
    <p>このメニューはCSSでスタイリングされています。</p>
</details>

Step 6入れ子の折りたたみメニュー

折りたたみメニュー内に別の折りたたみメニューを配置することも可能です。

<details>
    <summary>プログラミング言語</summary>
    <p>以下は主要なプログラミング言語のカテゴリです：</p>
    
    <details>
        <summary>フロントエンド言語</summary>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </details>
    
    <details>
        <summary>バックエンド言語</summary>
        <ul>
            <li>PHP</li>
            <li>Python</li>
            <li>Ruby</li>
            <li>Java</li>
            <li>Node.js</li>
        </ul>
    </details>
</details>
重要ポイント：
  • <details>要素は初期状態では閉じています。open属性を追加することで、初期状態を開いた状態にできます：<details open>
  • <summary>要素は必須ではありませんが、使用しない場合、ブラウザはデフォルトのテキスト（「詳細」など）を表示します。
  • すべてのモダンブラウザで対応していますが、Internet Explorer ではサポートされていません。
  • アクセシビリティのために、折りたたみメニューの内容が重要な情報である場合は、代替手段も提供することを検討してください。
  • JavaScriptを使用しなくても機能する純粋なHTML機能なので、シンプルで軽量です。