- クラウド技術
HTMLの 要素について
- #AI
|
要素 |
説明 |
|
<details> |
リクエストに応じて詳細情報を提供する |
|
< picture> |
レスポンシブイメージ（画像内容の最適化） |
|
<article> |
自己完結したセクションを表す |
|
<aside> |
補足的なセクションを表す |
|
<datalist> |
入力候補のリストを作る |
|
<time> |
日付や時刻を表す |
|
<progress> |
作業の進捗状況を示す |
details要素
【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc. 詳細はこちらから＞
詳細折りたたみ要素
子要素として<summary>が存在する場合には、
<summary>～</summary>の内容が、この詳細情報の要約となります。
<summary>が存在しない場合には、
ブラウザが<details>の内容を要約するかもしれません。
|
1 2 3 4 |
<details> <summary>詳細を見る</summary> <p>詳細な情報。</p> </details> |
picture要素
画像候補のコンテナとして機能するだけです。レスポンシブイメージに関する細かい設定は、この要素内に配置するsource要素とimg要素で行うことになります。
img要素の配置が必須となります（source要素の後に置きます）。
|
1 2 3 4 |
<picture> <source media="(min-width: 640px)" srcset="image/ image_1.jpg"> <img src="image/ image_2.jpg" alt="サンプル"> </picture> |
article要素
文書、ページ、アプリケーション、サイトなどの中で自己完結しており、 (集合したものの中で) 個別に配信や再利用を行うことを意図した構成物を表します。
|
1 2 3 |
<article> 自己完結したセクションを表します </article> |
aside要素
補足や脚注、用語の説明など、本筋とは別に触れておきたい内容、または本筋から分離して問題のない内容を含んだセクションを表します。
|
1 2 3 |
<aside> 補足的なセクションを表します </aside> |
datalist要素
入力候補のリストを作成します。入力候補の選択肢は、この要素内に配置するoption要素で示すことになります。
|
1 2 3 4 5 |
<datalist id="example"> <option value="選択肢1"></option> <option value="選択肢2"></option> <option value="選択肢3"></option> </datalist> |
time要素
正確な日付や時刻を表します。
|
1 |
<time>2011-12-03</time> |
progress要素
作業の進捗状況を示します。プログレスバーとしてよく表示されます。
|
1 2 |
<progress value="0.5"></progress> <progress value="50" max="100">50%</progress> |
【エンジニア募集中】フルリモートも◎(リモート率85.7％)、平均残業8時間、年休124日以上、有給取得率90％ etc. 詳細はこちらから＞
