部屋の骨組み
見出し、文章、入力欄、ボタンなど「何を置くか」を決めます。
← プレビューに戻るHTML CSS JavaScript
ABOUT THIS PREVIEW
今触ったものは、何だったの？
トップのミニページは、完成した見本です。Webページをつくる HTML・CSS・JavaScript の3つの役割を、コードを書かずに先取り体験できます。 入力・選択・ボタンの変化を通して、画面がただの画像ではなく「反応するもの」だと感じてもらうために置いています。今は、実装のコードを読んだり、このページと同じものをつくったりする課題ではありません。
WHERE IT FITS
体験版の内容そのものではありません
無料の体験版は Session 0〜3。まずはプロジェクトの歩き方、ターミナル、変更を記録する Git、共有のための GitHub という共通の道具を学びます。 このプレビューは、Session 6〜7 の課題や成果物そのものではありません。その土台の先にある「HTML・CSS・JavaScript でページをつくる」学びを、のぞいてもらうための完成見本です。
THE THREE ROLES
画面の変化を、3つに分けて見る
部屋の内装
色、余白、文字の大きさなど「どう見せるか」を整えます。
部屋のしかけ
入力やクリックを受け取り、HTML の中身や CSS の見た目をどう変えるか決めます。
FROM PREVIEW TO PRACTICE
「見た」から「自分でつくれた」へ。
プレビューを触っただけでは、まだコードを書けるようになるわけではありません。本編 Session 6 では、HTML でページの中身、CSS で見た目を小さく自分でつくります。 続く Session 7 では、JavaScript でクリックなどにブラウザが反応するしくみも小さく自分でつくります。体験版で土台をつくり、本編で一つずつ手を動かすことで、この変化を自分で生み出せるようになります。