画面は 3 つの材料でできている
どんな画面も、HTML（中身）・CSS（見た目）・JavaScript（動き）の組み合わせです。ブラウザの開発者ツールを開くと、それぞれを本物のページで見られます。
HTML: 意味の合ったタグを使う
見た目が同じでも、タグの選び方で使いやすさが変わります。キーボードでの操作や読み上げは、タグの意味を手がかりにしています。
CSS: 箱の大きさと並べ方
CSS では、どの部品も四角い「箱」として扱います。箱の大きさの数え方と、箱の並べ方（Flexbox と Grid）を押さえれば、たいていの画面は組めます。
Flexbox の遊び場
ボタンを押すと、箱が動きます。右（スマホでは下）に、いまの設定の CSS が出ます。まずは「よくある形」から押してみてください。
スマホ対応
スマホでは、画面の幅がパソコンよりずっと狭くなります。幅に合わせて表示するための 2 つの道具と、確かめ方です。
JavaScript: 部品を動かし、サーバーと話す
画面の仕事でよく書くのは、部品を見つけて書き換える・押されたら動かす・サーバーにデータを頼む、の 3 つです。
fetch の分かれ道（返事を選ぶと、動く行が光ります）
フォームと入力チェック
入力のチェックは、ブラウザとサーバーの 2 か所でします。役わりが違うので、どちらかだけでは足りません。下のフォームで、両方を試せます（サーバーの返事は作り物です）。
TypeScript: 型があると、何がうれしいか
Laravel の React・Svelte・Vue のスターターキット（新しく作るときのひな形）も、TypeScript で書かれています。
アクセシビリティ（だれでも使えるように）
目や手が不自由な人、明るい屋外でスマホを見る人、マウスを使わない人。W3C の WCAG（Web コンテンツのアクセシビリティの指針）から、まず押さえる 5 つです。
表示の速さ（Core Web Vitals）
Google が「よい体験」の目安にしている 3 つの数です。サーバーやキャッシュの工夫は Web の仕組み「速くする仕組み」へ。
フレームワークとの関係（Laravel の場合）
Laravel で画面を作る道は、大きく 2 つです。どちらを使っているかは、チームのリポジトリを見れば分かります。ほかの道具は 技術の地図の「画面」の層で、HTML をどこで作るかの違いは Web の仕組み「画面の作り方」で。
状態（変わるデータ）は、どの部品に置く？
AI 時代AI と画面を作るとき
AI は、それらしい画面をすぐに作ってくれます。だからこそ、目で見ただけでは分からない所を確かめる役わりが、人に残ります。
よくあるつまずき
画面の仕事で、新人がよく出会う「なぜ？」です。
画面を出す前のチェックリスト
プルリクエストを出す前に、確かめたものに印を付けてください（この端末にだけ保存されます）。