読者です 読者をやめる 読者になる 読者になる

プログラマーな日々

プログラマー兼SEです。好きなツール:WorkFlowy、好きな言語:C#、好きなAWSのサービス:EMR。

details要素 summary要素

HTML5

details要素は、表示したり非表示にしたりできる追加の詳細情報を表します。summary要素は、その詳細情報のサマリーを表します。

使用例

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Hello! HTML5</title>
<meta charset="UTF-8">
</head>
<body>
    <form>
        <p>
            <details>
                <summary>処理中です。しばらくお待ちください。<br />
                <progress value="30" max="100" /></summary>
                <p>100件中、31件目を処理しています。</p>
            </details>
        </p>
    </form>
</body>

レンダリング

初期表示

三角形のアイコンクリック