jackmiwamiwa devblog

フロントエンドをメインに行ったことをまとめていくサイトになります。

html5のタグについて少し調べてみた

目的

マークアップを行う時にどんなタグで書いていけばよいか少しだけ調べて気になったものだけ共有します。 使えるかどうかはわかりません。


menu要素とmenuitems要素を使ったコンテキストメニュー

タグはmenumenuitem。 右クリックしたときの要素の表示のマークアップを行うことができる。 (現在はfirefoxのみ対応。)

画面の様子

スクリーンショット 2019-03-07 9.28.11.png


書き方

<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>

contextmenumenuタグのid名を紐づける


menuitemの宣言できるものについて

  • checkbox: オプションの選択・選択解除が可能
  • command: クリックで動作が実行可能
  • radio: グループから1つのオプションの選択が可能

See the Pen HTML 5.1 menu example by miwa_shuntaro (@miwashutaro0611) on CodePen.


details要素とsummary要素

要素上でクリックしたときに付加的な要素をクリックしたり非表示したりする。 動きにこだわる場合やIE,Edgeにも対応の場合には使えなさそう。

対応状況

スクリーンショット 2019-03-07 9.31.06.png

書き方

<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.