UI記述言語としてのHTML
キチンとすれば便利になります

2016年5月13日@[HTML/JS/CSS] WebデザインとUX について考える

Soichi Masuda / @masuP9

自己紹介

• 桝田 草一
• フロントエンドエンジニア兼ディレクター
• @デジパ株式会社
• 東京の会社所属、大阪でリモートワーク

はじめに

WebはHTMLでできている

• はてなブログ, アメブロ
• Wordpress, Jimdo
• AngularJS, React
• Jade(Pug), haml
• Gmail, Kintone

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属性でフォーカスのコントロールも
• JS無しでEnterやspaceで実行
• 読み上げ時に実行可能であることが読み上げられる

様々なユースケースに対応 => 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>

• リンゴ
• いちご
• バナーナ

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要素を選択することで
様々なユースケースに対応できます。

色んなケースでも便利に使える / 使いやすい

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>

menu & menuitem

<div contextmenu="new-context-menu">
<!-- content -->
</div>
<menu id="new-context-menu" type="context">
<menuitem>Hello World</menuitem>
</menu>

これは Firefox のみです。デモ@CodePen