「情報技術館 ― SVGとCanvas APIで絵を描いてみる」の第2弾です。
今回はWebページの土台であるHTML、見た目を決めるCSS、操作に反応するJavaScript。この3つを同じように触って体験できます。コードを書き換えて「実行」を押すと、結果がすぐ変わります。
HTMLの世界
展示1 ― 見出しと段落
HTMLの基本。h1が見出し、pが段落です。文字や内容を変えてみてください。
展示2 ― リストとリンク
ulが箇条書き、aがリンクです。リンク先やリスト項目を変えてみてください。
CSSの世界
展示3 ― 色と大きさを変える
CSSで文字の色（color）、大きさ（font-size）、背景色（background）を指定しています。色コードを変えると雰囲気がガラッと変わります。いくつか例を載せておくので、好きなものに差し替えてみてください。
色の例： #e07850(オレンジ) #4a90d9(青) #2d8659(緑) #9b59b6(紫) #e74c3c(赤) #1e293b(黒に近い紺)
展示4 ― 並べ方を変える（flexbox）
display: flexで要素を横に並べています。試しに変えてみると面白い部分を並べておきます。
例：
・flex-direction: column; を追加すると → 縦並びになる
・gap: 1rem を gap: 3rem にすると → 箱の間隔が広がる
・justify-content: center; を追加すると → 中央に寄る
・箱を5個に増やすと → 横に5個並ぶ
JavaScriptの世界
展示5 ― ボタンを押したら変わる
ボタンを押すと文字が変わります。textContentの中身や色を変えてみてください。
展示6 ― 入力に反応する
入力欄に文字を打つと、リアルタイムに下の表示が変わります。
まとめ
- HTMLはタグで文章に意味をつける。見出し、段落、リスト、リンクなど構造を決める
- CSSはスタイル指定で見た目を変える。色、大きさ、配置を自由に決める
- JavaScriptは操作に反応して表示を変える。ボタンや入力に応じて動く
第1弾の「情報技術館 ― SVGとCanvas APIで絵を描いてみる」もあわせてどうぞ。
仕組みの解説は「Webページを作っている3つの仕組み」にまとめています。