HTML 全般
全体のレイアウト
レイアウトの基礎知識
- CSS の
positionプロパティによるレイアウト方法を理解する - CSS の
box-sizingプロパティでwidthの計算方法を制御する - CSS のふくろうセレクター (
* + *) で全要素の上下マージンを設定する - CSS で画像の下に隙間が空くのを防ぐ (
vertical-align) - HTML のリスト要素 (
ul,ol,li) のマージン指定方法を理解する - CSS のフローティングボックス (
float) を利用したレイアウトを理解する - HTML 要素を中央寄せ／右寄せで表示する
- HTML の画像要素 (
img) を親要素の左右両端に表示する
レスポンシブ
- Viewport とメディアクエリによるレスポンシブ Web デザインの基本
- モバイルファーストな CSS を作成するコツ（
max-widthではなくmin-widthを使うべし） - CSS で画像と埋め込み動画のサイズを画面内に収める (
max-width) - CSS のフレキシブルボックスによるレスポンシブレイアウト
- 旧記事
フォント／テキスト
要素
フォーム
- 入力フォームに自動的にフォーカスする（autofocus 属性）
- プレースホルダーで入力フォームに補足説明を表示する（placeholder 属性）
- 入力必須の入力フォームを指定する（required 属性）
- 独自の入力フォーマットを指定する（pattern 属性）
- 入力エリアの入力候補を表示する（autocomplete 属性、datalist 要素）
ヘッダ
メニュー
- メニューの縦並びと横並びを切り替える
- メニューの表示位置を固定する
- メニューの高さを画面の高さに合わせる
- メニュー要素内でスクロールできるようにする
- CSS だけで開閉できるアコーディオンメニューを作成する
- ある位置までスクロールしたら固定されるメニューを作成する
- 印刷時に特定の要素（メニューなど）を非表示にする
リンク
- 外部リンクに自動的にアイコンを付けて表示する (External link icons)
- 外部リンクをクリックしたときに必ず新しいタブで開く
- リンク先ファイルの拡張子によって自動的にアイコンを付けて表示する
画像／ボタン
CSS セレクタ
- 結合子を使用して構造に応じてスタイルシートを適用する
- 子孫セレクタ
- 子セレクタ（直下セレクタ）
- 隣接兄弟セレクタ（隣接セレクタ）
- 一般兄弟セレクタ（間接セレクタ）