HTML 全般

• HTML ファイルの雛形（テンプレート）
• IE 8 でも HTML5 の header や footer 要素を使えるようにする
• Web サイトに favicon を設定する

全体のレイアウト

レイアウトの基礎知識

• position プロパティによるレイアウト方法を理解する
• box-sizing プロパティで width の計算方法を制御する
• 全要素に統一された上下マージンを設定する（ふくろうセレクタ）
• 画像の下に隙間が空くのを防ぐ
• フローティングボックスを利用したレイアウトを理解する
• ul や ol によるリスト要素のマージン設定を理解する
• 要素を中央寄せ／右寄せで表示する
• 画像や div 要素を両端に表示する

レスポンシブ

• Viewport、メディアクエリ設定によるレスポンシブ Web デザインの基本
• モバイルファーストで考えるコツ（max-width ではなく min-width を使うべし）
• 画面サイズによって全体のレイアウトを変更する
• 画像と埋め込み動画のサイズを画面内に収める
• フレキシブルボックスによるレスポンシブレイアウト
• （コラム）フレキシブルボックスの旧式の定義方法

フォント／テキスト

• フォントサイズは 100% と指定する
• rem や em を使用したサイズ指定を理解する
• pre 要素でもテキストがはみ出さないように折り返す

要素

フォーム

• 入力フォームに自動的にフォーカスする（autofocus 属性）
• プレースホルダーで入力フォームに補足説明を表示する（placeholder 属性）
• 入力必須の入力フォームを指定する（required 属性）
• 独自の入力フォーマットを指定する（pattern 属性）
• 入力エリアの入力候補を表示する（autocomplete 属性、datalist 要素）

ヘッダ

• ヘッダ要素に連番を振る

メニュー

• メニューの縦並びと横並びを切り替える
• メニューの表示位置を固定する
• メニューの高さを画面の高さに合わせる
• メニュー要素内でスクロールできるようにする
• CSS だけで開閉できるアコーディオンメニューを作成する
• ある位置までスクロールしたら固定されるメニューを作成する
• 印刷時に特定の要素（メニューなど）を非表示にする

リンク

• 外部リンクに自動的にアイコンを付けて表示する (External link icons)
• 外部リンクをクリックしたときに必ず新しいタブで開く
• リンク先ファイルの拡張子によって自動的にアイコンを付けて表示する

画像／ボタン

• SVG アイコンの色をまわりの文字の色に合わせる
• SNS ボタンをきれいに並べる

CSS セレクタ

• 結合子を使用して構造に応じてスタイルシートを適用する
  • 子孫セレクタ
  • 子セレクタ（直下セレクタ）
  • 隣接兄弟セレクタ（隣接セレクタ）
  • 一般兄弟セレクタ（間接セレクタ）

マルチメディア

• audio タグを使って音声ファイルを再生する

その他

• 吹き出し風の見出しを作る
• Web サイト作成に関するメモ: SEO 対策
• jQuery に関しては JavaScript のページを参照

外部サイトリンク

• HTML5の仕様 (W3C Recommendation)
• HTML5の文法チェック (W3C Markup Varidation Service)
• ブラウザのHTML5適合度チェック (HTML5test)