ハンズオン① 自分の手で、はじめてのWebページ

ようこそ、ハンズオン講座へ！ここからは“読む”だけでなく、実際に手を動かして学びます。やり方はかんたん。左の黒い画面にコードを打つと、右にすぐ結果が映ります。

STEP1：見出しと文章を打ってみる

「HTML・CSS」のセクションで学んだとおり、HTMLはタグ（<…>）で中身を書きます。<h1>は大見出し、<p>は文章。まずはこのお手本を、下の左側にそのまま打ってみてください。

<h1>こんにちは！</h1>
<p>はじめてのWebページです。</p>

STEP2：リストとボタンを足す

次は部品を増やします。<ul>と<li>で箇条書き、<button>でボタン。さっきの続きに、この2つを足してみましょう。

<ul>
  <li>好きなこと</li>
  <li>得意なこと</li>
</ul>
<button>よろしくね</button>

STEP3：CSSで“着せ替え”する

ここからが楽しいところ。CSSタブに切り替えて、見た目を変えてみましょう。h1 { color: … } は「h1の文字色をこれにして」という意味です。

body {
  background: #faf7f2;
}
h1 {
  color: #334675;
}
button {
  background: #334675;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 999px;
}

仕上げ：自由に“自分のページ”にする

• ・見出しを自分の名前やニックネームに変えてみよう。
• ・リストの中身を「好きな食べ物」などに書き換えてみよう。
• ・CSSの色（#334675など）を好きな色に変えてみよう（「CSS 色コード」で検索すると一覧が見つかります）。

おさらい：今日使った“言葉”

<h1>

いちばん大きな見出し。ページの題名に使う。

<p>

ふつうの文章（段落）。

<ul> と <li>

箇条書きの“枠”と“1行1行”。セットで使う。

<button>

押せるボタン。

color / background

CSSで文字色／背景色を変える。

padding / border-radius

CSSで内側の余白／角の丸みを付ける。