Loading
loading..

HTML5の面白要素1【details要素】(HTML5認定試験対策)

 2014年10月14日 HTML5/CSS3 技術的なこと
HTML5プロフェッショナル認定資格ロゴ


HTML5になって、新しい要素がいくつか加わりました。
ホームページを制作する上で、SEOの観点からも知っておくべきものです。
特に、headerとかsectionなどの構造を伝える要素が注目されています。

しかし、中には今までは、javascriptで制御しなくてはいけなかった動きを兼ね備えた要素もあります。
それが「details」要素です。
videoやaudio,canvasなどの目立つ要素とは違う、地味な追加要素ではあります。

僕も使ったことありません。
何なら、HTML5プロフェッショナル認定資格取得のために、テキスト見てて詳細を知ったようなもの。
でも、本番の試験でも出てきていたような気がする。

HTML5認定試験対策講座

そんなdetails要素ですが、「備考や操作手段の詳細を得るためのもの」なのですが、
そこに記述する情報が以下のように「開閉可能」なのです。

この部分が開閉します。

ソースはこちらです。

<details>
 <p&gtこの部分が開閉します。</p>
</details>

勝手に「詳細」という文字が出てきます。
「詳細」が嫌だったらsummary要素をdetails要素の中に書いてください。

クリックしてください

この部分が開閉します。

ソースはこちらです。

<details>
 <summary&gtクリックしてください</summary>
 <p&gtこの部分が開閉します。</p>
</details>

ちなみにdetail要素にopen属性をつけると、初期状態で開いて表示されます。

クリックしてください

この部分が開閉します。

ソースはこちらです。

<details open>
 <summary&gtクリックしてください</summary>
 <p&gtこの部分が開閉します。</p>
</details>

javascriptなしで開閉動作を付けれるのですが、details要素はあくまで「ユーザーが見たかったら見る詳細」を表すための要素です。
summary要素はあくまで、要約を記述するための要素です。
開閉動作に惹かれて、無闇に使っていい要素ではないということにご注意ください。

details要素使用例

HTML5プロフェッショナル認定資格 レベル1
所要時間

90分(機密保持契約とアンケートの時間を含む)

 

試験実施方式

試験方式はコンピュータベーストテスト(CBT)です。
マウスによる選択方式がほとんどですが、キーボード入力問題も多少出題されます。

 

日時・会場

日時・会場を全国各地から自由に選択して受験できます。

HTML5認定試験対策講座


文系プログラミングスクール
HTML5認定試験対策講座

ホームページ制作、WEB集客、
IT・WEB担当者研修について
お気軽に無料相談へお越しください。

東京都内からも近い千葉県船橋市にて!!
お伺いすることも可能です(遠方除く)


無料相談申込み