HTML5 学習基礎ノート

layout: post title: “2017-07-03-study-html5-note” date: 2017-07-03 11:25:23 +0000

はじめに

• http://caniuse.com/ ブラウザー対応表
• https://www.w3.org/ WEB技術のあれこれ
• Ricty Diminished 0 と O が見やすく全角空白がわかりやすいフォント

input, button

• maxlength 文字数の最大値
• hidden 決まっている値をフォーム非表示で送信
• disabled 無効化

input

• type="email email っぽくない文字列にはエラーが出る
• type="number number っぽくない文字列にはエラーが出る
• type="date date っぽくない文字列にはエラーが出る
• required 必須項目 入力しないとエラーが出る
• novalidate エラーが出ず次のページに進む

補足:

novalidate は <form novalidate> のように使用し、<input required> との併用でエラー分は出ず、次のページ(処理)を行うマークアップ。

補足2:

すべてのユーザーが新しいWEB技術に対応したブラウザを使用していないことを常に考慮し、”マークアップに頼り切らない機能の実装”を心がける必要がある。

文字参照(特殊記号)

特殊記号は 数値文字参照 と 文字実態参照 の2つ方法がある。

HTML5 にはカテゴリーとコンテンツモデルが定義されている

例えば W3C のサイトで h1 などのタグを検索すると、

• Categories – Flow content, Heading content, Palpable content
• Conten model – Phrasing content
  と出る。

これは h1 タグは Flow content, Heading content, Palpable content に分類される箇所で使うこと、そして、 Phrasing content の要素通りにしか使用できないということ。あと時折、 transparent(トランスペアレント) というものがあるが、これは親要素のコンテンツモデルを使用して欲しい、ということで h1 タグにリンクを張りたい場合、先ほどのコンテンツモデルから <h1 a></h1> などは間違いで、<h1><a>文字列</a></h1> のようにする、という指定である。

Bootstrap

• <span class="badge"></span> 中に何もなければ消してくれる
• popover マウスクリックで表示
• tooltio マウスオーバーで表示
• カルーセルはアクセシビリティ的に良くない