何を置く？
見出し、文章、入力欄、ボタン。ページに必要な部品を組み立てます。
AIブートキャンプ 体験版
インストール不要・60秒プレビュー
触るとわかる。
画面は、こうして動く。
名前を入れる、目的を選ぶ、色を変える、ボタンを押す。 下の小さなページが、あなたの操作に合わせてすぐ変わります。
LIVE MINI PAGE
3つの役割を、手で確かめよう
- 1
HTML = ページの骨組み
表示する言葉や、部品の役割を決めます。
入力欄を置くのは HTML。入力を受け取り、見出しを変える反応は JavaScript です。
- 2
CSS = 見た目
色、余白、文字の大きさを整えます。
色や余白の見た目を決めるのは CSS。押してテーマを切り替える反応は JavaScript です。
- 3
JavaScript = 反応
入力やクリックを受け取り、HTML の中身や CSS の見た目を切り替えます。
名前入力・テーマ選択・この「いいね！」の反応は、JavaScript の仕事です。
あたたかい朝
MY FIRST PAGE
あなたの
はじめの一歩。
今日は「自分を紹介するページをつくる」を目標に、 小さく手を動かしてみる。
この一歩を応援する
文字を決める
見た目を整える
反応をつける
どう見せる？
色、余白、角の丸さ、文字の大きさ。読みやすく、らしく整えます。
どう反応する？
入力・選択・クリックを受け取り、画面の内容を変化させます。
NEXT, NOT YET
体験版は、ここをつくるための土台から始めます。
Session 0〜3 では、プロジェクトの歩き方、ターミナル、Git、GitHub という共通の道具を学びます。 本編 Session 6 では、HTML で中身、CSS で見た目を小さく自分でつくります。Session 7 では、JavaScript でブラウザの反応も小さくつくります。