Google Web Fundamentalsを読んだときのメモ

GoogleWebFundamentalsを読んで、いくつか後で使えるかもなと思って残している自分用のメモ。
https://developers.google.com/web/fundamentals

Forms and User Input

Choose the best input type

適正なインプットタイプを選択することで、適切なキーボードを呼び出すことができるということ。

• datalist
  input typeではないけど、ユーザーに提案することができる

    <label for="frmFavChocolate">Favorite Type of Chocolate</label>
    <input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
    <datalist id="chocType">
      <option value="white">
      <option value="milk">
      <option value="dark">
    </datalist>
    

フォームのフルサンプル

ラベルと名前を適正にいれること

• autofocus　属性をつかうことも出来るが、キーボードのフォーカスを奪うことになるので、要注意

リアルタイムバリデーションの実装

clientサイドで行うバリデーションなので
セキュリティのためには、サーバーサイドとの一貫したバリデーションの実装が必要。

• pattern 属性

<input type="text" pattern="^\d{5,6}(?:[-\s]\d{4})?$" ...>

その他多数紹介されている
最大値、最小値チェックなども可能。
https://developers.google.com/web/fundamentals/input/form/provide-real-time-validation?hl=en

• pseudo-classes(疑似クラス)
  リアルタイムにユーザーにフィードバックを返却できるように、インプットに対する新しい疑似クラスが用意されています。

 :valid
:invalid
:reauired
:optional
:in-range
:out-of-range

Multi-Device Layouts

view portの設定をする

view portの設定については、こちらのブログがとてもわかりやすかった。

これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ - てっく煮ブログ http://tech.nitoyon.com/ja/blog/2013/02/15/viewport/

<meta name="viewport" content="width=device-width,initial-scale=1.0">

body {
  -webkit-text-size-adjust: 100%;
}

Web Starter Kit

Googleでの紹介ページをたどれば、環境のセットアップは簡単にできた。

セットアップに必要なSublimeTextのエクステンション＋Chromeのエクステンションはいれておきましょう。

日本語では、以下のページの説明がよくまとまっていたです。
Googleのベストプラクティスに沿ったモダンな製作の出発点「Web Starter Kit」 | HTML5Experts.jp http://html5experts.jp/nakajmg/8931/