html5のタグについて少し調べてみた
目的
マークアップを行う時にどんなタグで書いていけばよいか少しだけ調べて気になったものだけ共有します。 使えるかどうかはわかりません。
menu要素とmenuitems要素を使ったコンテキストメニュー
タグはmenu
とmenuitem
。
右クリックしたときの要素の表示のマークアップを行うことができる。
(現在はfirefoxのみ対応。)
画面の様子
書き方
<p contextmenu="popup-menu"> Right click here to see the context menu. </p> <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked="true">Checkbox</menuitem> <menuitem type="command" label="Command" onclick="alert('Hey!')">Checkbox</menuitem> <menuitem type="radio" name="group1" checked="true">Radio button 1</menuitem> <menuitem type="radio" name="group1">Radio button 2</menuitem> <menuitem type="checkbox" disabled>Disabled menu item</menuitem> </menu>
contextmenu
とmenuタグ
のid名を紐づける
menuitem
の宣言できるものについて
checkbox
: オプションの選択・選択解除が可能command
: クリックで動作が実行可能radio
: グループから1つのオプションの選択が可能
例
See the Pen HTML 5.1 menu example by miwa_shuntaro (@miwashutaro0611) on CodePen.
details要素とsummary要素
要素上でクリックしたときに付加的な要素をクリックしたり非表示したりする。 動きにこだわる場合やIE,Edgeにも対応の場合には使えなさそう。
対応状況
書き方
<details> <summary> クリックでメニューを開閉 </summary> <p>メニュー1</p> <p>メニュー2</p> </details>
例
See the Pen PLNvxO by miwa_shuntaro (@miwashutaro0611) on CodePen.
画像のレスポンシブイメージ
画像のsrcset属性
ピクセル密度、ズームレベル、通信速度から判定してユーザーのデバイスに適した画像を表示させる。 一応pc,spで単純に画像を分けたい場合にも使えるけどそれよりも解像度に応じてやspで無駄に画像を読み込ませたくないときに使う感じ。
書き方
- ピクセル比での判定
<img src="images/img-first.jpg" srcset=" images/img-first.jpg 1x, images/img-second.jpg 2x, images/img-third.jpg 3x" >
ユーザーのピクセル比が1のときはimg-first
画像
2のときはimg-second
画像が表示され
3以上になるとimg-third
画像が表示される。
未対応の場合には、src
属性のものが表示される。
- 画面幅での判定
<img src="images/img-first.jpg" srcset=" images/img-first.jpg 400vw, images/img-second.jpg 1000vw, images/img-third.jpg 1900vw" >
ウィンドウの幅がが400pxのときはimg-first
画像
1000pxのときはimg-second
画像が表示され
1900pxになるとimg-third
画像が表示される。
picture要素
デバイスのサイズなどの複数の条件下で最適化された画像リソースを提供する仕組み。 こっちだと画面幅でいい感じに反応してくれるので、pc,spの画像切り替えならこっちの方がおすすめ。
記載の仕方
<picture> <source media="(min-width: 1000px)" srcset="https://source.unsplash.com/1000x300/?desktop"> <source media="(min-width: 500px)" srcset="https://source.unsplash.com/500x500/?tablet"> <img src="https://source.unsplash.com/300x300/?smartphone" alt="IAキャラクター"> </picture>
0 - 500px : スマートフォンの画像 501px - 1000px : タブレットの画像 1001px - : PCの画像
が表示される。
例
See the Pen JzEMYX by miwa_shuntaro (@miwashutaro0611) on CodePen.