etc...
HTMLを出力している or HTMLで動いている
HTMLは簡単...
ほんとに?
まだまだちゃんとHTMLを書けていない
(適切な要素選択ができていない)ケースがあります。
基礎的なことですがおさらいしましょう。
<button>ボタン</button>
button
には3つのtype
submit
: form
を送信するreset
: form
の入力内容を消去するbutton
: ボタン<button type="button">ボタン</button>
押したらクライアントサイド(JavaScript)で何かする
それ<button>
で
例えばアコーディオン、こんなふうに書いてませんか?
<dl>
<dt>押してね!</dt>
<dd>ワオ!</dd>
</dl>
dt:hover {
cursor: pointer;
}
JSでdt.addEventListener('click', function(){hogehoge;});
<button>にしておけば...</button>
<dl>
<dt><button>ボタンにすると</button></dt>
<dd>なにも特別な事をしなくても</dd>
</dl>
autofocus
属性でフォーカスのコントロールも様々なユースケースに対応 => UX高まる(損なわない)
HTMLすごくないですか
<div class="menu">
<span></span>
<span></span>
<span></span>
</div>
こんなことになってませんか?
ボタンを使って
<button type="button"><img src="menu.svg" alt="menu" /></button>
中に画像も入れられますよ
タブなどのページ内遷移を拡張する場合はa
要素のままでも
<a href="#tab1">タブ1</a>
label
>label>label >input type="radio" />>/label>
スキなくだものを選択してください
老眼にはツラい…
スキなくだものを選択してください
リンゴ いちご バナーナ マンゴー スイカ いちじくこのポチは、スイカ?マンゴー?
label
使おう
<label for="ringo">
<input type="radio" name="fav" value="リンゴ" id="ringo" /> リンゴ
</label>
label
は UIのキャプションのための要素
UIをテキストで補足、意味付け
意味的なひも付けだけでなく、UIとしても紐づく
label
をクリックで該当のinput
にフォーカス or 選択
input
フォーカス時にlabel
のテキストを読み上げ
JSなどで特別なことをせずに!!
CSSでさらに補強
label {
// クリック、タップエリアを明確に
display: inline-block;
padding: 10px;
border: 1px solid #777;
}
label:hober {
cursor: pointer; // クリック可能なことを明示
text-decoration: underline;
}
label input[type="radio"]:checked + span {
background-color: tomato; // 選択された要素を明示
}
UIに適切なHTML要素を選択することで
様々なユースケースに対応できます。
button
label
色んなケースでも便利に使える / 使いやすい
それってUX!
details
& summary
<details>
<summary><code>details</code> & <code>summary</code>もありますがブラウザの対応がツラい</summary>
<img src="img/can_i_use_details_summary.png" alt="details&summaryのCan I Use の画面。IE,Edgeで使えない。" />
</details>
details
& summary
もありますがmenu
& menuitem
<div contextmenu="new-context-menu">
<!-- content -->
</div>
<menu id="new-context-menu" type="context">
<menuitem>Hello World</menuitem>
</menu>
これは Firefox のみです。デモ@CodePen