前提
HTML/CSS/JSの役割
- HTML = 構造(意味)
- CSS = 見た目(レイアウト・デザイン)
- JS = 振る舞い(動き)
セマンティックHTML
- 例えば、画面上に「メニュー」を作りたいとする
- 非セマンティックな書き方:
-
<div>タグにCSSで見た目だけメニューっぽくする - 人間にはメニューに見えるが、ブラウザや読み上げソフトにはただの「四角い箱」にしか見えない
-
- セマンティックな書き方:
-
<nav>タグを使う - ブラウザや検索エンジン(Googleなど)が 「あ、ここはナビゲーションメニューなんだな」 と意味を正しく理解できる
-
基本レイアウト・描写
要素の移動系はtransformが便利
FlexboxとGrid
中央寄せ
便利プロパティ
レスポンシブデザイン
フォーム
data-*属性
JSでめっちゃ使う
CSRF対策
実装マニュアル
↑どういうリクエストが送られるかはここを参照↓