htmlの<details>タグの使い方を詳しく解説-htmlチュートリアル-php.cn

htmlの

タグの使い方を詳しく解説

黄舟

リリース： 2017-06-21 10:34:42

オリジナル

9593 人が閲覧しました

TML5 の新しい

タグを使用すると、ユーザーは展開可能および折りたたみ可能な要素を作成でき、テキストまたはタイトルに非表示の情報を含めることができます。

使用方法

通常、詳細は、ページに表示されるコンテンツをさらに詳しく説明するために使用されます。表示される効果は、jQuery アコーディオンプラグインの効果と似ています。

大まかな書き方は次のとおりです:

<details>
    <summary>Google Nexus 6</summary>
    <p>商品详情：</p>
    <dl>
        <dt>屏幕</dt>
        <dd>5.96” 2560x1440 QHD AMOLED display (493 ppi)</dd>
        <dt>电池</dt>
        <dd>3220 mAh</dd>
        <dt>相机</dt>
        <dd>13MP rear-facing with optical image stabilization 2MP front-facing</dd>
        <dt>处理器</dt>
        <dd>Qualcomm® Snapdragon™ 805 processor</dd>
    </dl>
</details>

ログイン後にコピー

最初は

タグ、続いてタイトル

ここの内容は通常、ページに表示されます。その後、任意のタイプの

HTML 要素を詳細コンテンツとして追跡できます。これは、

をクリックした場合にのみ表示されます。

上記のコードの効果は次のようになります:

htmlの<details>タグの使い方を詳しく解説

最初は詳細が非表示になっており、クリックすると表示されます。

open

attribute

もちろん、open 属性を

タグに設定して、デフォルトで展開された

state にすることもできます。

<details open>
    <summary>Google Nexus 6</summary>
    <p>商品详情：</p>
    <dl>
        <dt>屏幕</dt>
        <dd>5.96” 2560x1440 QHD AMOLED display (493 ppi)</dd>
        <dt>电池</dt>
        <dd>3220 mAh</dd>
        <dt>相机</dt>
        <dd>13MP rear-facing with optical image stabilization 2MP front-facing</dd>
        <dt>处理器</dt>
        <dd>Qualcomm® Snapdragon™ 805 processor</dd>
    </dl>
</details>

ログイン後にコピー

現時点では詳細はデフォルトで展開されており、タイトルをクリックすると折りたたまれます。

例

例は上記の通りです。オンラインバージョンをプレビューするには、ここをクリックしてください。

ブラウザの互換性

新しい HTML5 タグのため、ブラウザのサポートは理想的ではありません。 caniuse のデータから判断すると、このタグは現在 Chrome、Safari 8 以降、Opera 26 以降でのみサポートされています。

良いニュースは、caniuse の「UC ブラウザからの結果を表示」オプションをオンにすると、国内の UC ブラウザもこのタグをサポートしていることがわかります。

htmlの<details>タグの使い方を詳しく解説