LEARNING PATH / 7 STEPS
はじめてのHTMLとWeb制作
内容・見た目・動きの役割から、読みやすく操作できるページまで。小さな作例を触りながら学ぼう。
- ゴール
- 見出し・リンク・フォームの役割を説明し、小さなページを試せる。
- 読む前に
- ブラウザを使えること。コードを書いた経験は不要です。
- STEP 1
まずは3つの役割を知ろう
HTML・CSS・JavaScriptは何が違う？小さなページで役割を知ろう
内容・見た目・動きの役割を、ボタン付きの小さなページで体験。初めてコードに触れる人へ、三つの技術の関係を解説するよ。
- STEP 2
ページの骨組みを見出しで整理
太字にすれば見出しになる？HTMLの見出しと見た目を分けよう
同じ太さに見える文章でも、HTMLの構造は違うことがあるよ。段落とh2を切り替え、見出しとして伝わる情報を小さな作例で確かめよう。
- STEP 3
並列と手順をリストで表す
箇条書きと番号付きリストはどう違う？ul・ol・liを試そう
順番が大切な手順と、順番を問わない持ち物を分けよう。見た目の記号だけでなく、HTMLのリストとしてまとめる方法を作例で確認できるよ。
- STEP 4
画像やリンクの場所を確かめる
相対パスと絶対パスって何？画像やリンクの場所を確かめよう
画像が出ない原因を、ファイルの場所から考えよう。ダウンロードできる小さな作例で、同じ階層と一つ上への参照を体験するよ。
- STEP 5
移動と操作を区別する
移動するリンク、操作するボタン：aとbuttonを使い分けよう
見た目が似ていても、リンクとボタンでは役割が違うよ。ページ内の移動と表示の切り替えを操作し、目的から部品を選ぶ練習をしよう。
- STEP 6
入力欄に名前を付ける
入力欄の名前はどう付ける？labelで文字とフォームを結び付けよう
項目名を近くに置くだけでなく、labelと入力欄を関連付ける方法。クリック時のフォーカスと、placeholderの役割を作例で確認しよう。
- STEP 7
選択肢を使い分ける
チェックボックスとラジオボタンは何が違う？複数選択と一つの選択を試そう
複数選べる持ち物と、一つだけ選ぶ連絡方法を比較。label、name、選択結果を小さなフォームで確認できるよ。