HTMLの入口（0-0）｜まずは1ページを“形にする”までの最短ロードマップ（web-programming / html）
toshi
ToshiLab
【HTML 2-1】ミニ制作｜見出し・リンク・画像・フォームで“1ページ完成”を作る（初心者向け）
toshi
記事内に商品プロモーションを含む場合があります
ここまでで、HTMLの基礎を少しずつ触ってきました。
・見出し
・文章
・リンク
・画像
・ページの構造
・フォーム
今回は、それを1つにまとめます。
**「HTMLだけで、1ページを最後まで作れた」**
という感覚を持てればOKです。
- 「この回は“完成させる経験”がいちばん大事です」
-
最初の学習では、
「完璧に理解する」より
「1回ちゃんと作り切る」方が大事です。今回のページでやることはこれだけ。
・header / main / footer を使う
・見出しと文章を置く
・リンクを置く
・画像を置く
・フォームを置くこれができたら、次のCSSにかなり入りやすくなります。
Q
ここまでできればOK
今回のゴール
- HTMLだけで1ページを完成できる
- 見出し・文章・リンク・画像・フォームを1つのページにまとめられる
- 「どこに何を書くか」が前より分かる
- 次にCSSを学ぶ準備ができる
コピペOK
まずは完成形を見る
まずは、下のコードをそのまま index.html に貼って保存してください。
画像は前回と同じく、images フォルダの中に sample.jpg を置く想定です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>はじめての1ページ制作</title>
</head>
<body>
<header>
<h1>はじめての1ページ制作</h1>
<p>HTMLだけで、自己紹介ページのような形を作ってみます。</p>
</header>
<main>
<h2>このページについて</h2>
<p>このページは、HTMLの練習として作ったサンプルです。</p>
<h2>プロフィール</h2>
<p>Web制作を少しずつ学びながら、1ページを形にする練習をしています。</p>
<h2>参考リンク</h2>
<p>
学習メモ：
<a href="https://developer.mozilla.org/ja/" target="_blank" rel="noopener">
MDN（日本語）
</a>
</p>
<h2>画像</h2>
<p>サンプル画像を表示します。</p>
<img src="images/sample.jpg" alt="サンプル画像" width="480" />
<h2>お問い合わせ風フォーム</h2>
<form>
<p>
<label for="name">お名前</label><br />
<input type="text" id="name" name="name" />
</p>
<p>
<label for="message">ひとこと</label><br />
<textarea id="message" name="message" rows="5" cols="40"></textarea>
</p>
<p>
<button type="submit">送信する</button>
</p>
</form>
</main>
<footer>
<p>© ToshiLab</p>
</footer>
</body>
</html>どこに何を置いたか
このページの見方
| 場所 | 置いたもの | 役割 |
|---|---|---|
| header | ページタイトル、説明 | 最初に伝えること |
| main | 本文、リンク、画像、フォーム | このページの主役 |
| footer | 著作権表記 | 下の補足情報 |
おさらい
今回のページで使ったタグ
| タグ | 役割 | 今回の使い方 |
|---|---|---|
| h1 / h2 | 見出し | ページ全体と各章の見出し |
| p | 段落 | 文章のまとまり |
| a | リンク | 参考ページへ移動 |
| img | 画像 | サンプル画像の表示 |
| form | フォーム全体 | 入力欄のまとまり |
| input / textarea / button | 入力・送信 | お名前、ひとこと、送信ボタン |
まずは
“完成した”で十分です
ここで大事なのは、
「もっとすごいページを作ること」ではなく、
「ここまで学んだタグを1つのページにまとめられたこと」です。
最初は、地味で大丈夫です。
むしろ、地味なくらいの方がHTMLの役割が見えやすいです。
きれいに見せるのは、次のCSSでやれば大丈夫です。
今は“土台”でOKです。
練習
少しだけ変えてみる
- タイトルを自分用に変える
- プロフィール文を自分の内容に変える
- フォームの項目名を変える
- リンク先を別の学習サイトに変える
- 画像を自分のサンプル画像に差し替える
ここだけ確認
よくあるつまずき
- 「画像だけ出ない」
-
画像が出ないときは、次を確認します。
- images フォルダを作ったか
- その中に sample.jpg を置いたか
- ファイル名と拡張子が合っているか
- ブラウザを更新したか
最初は img タグをコメントアウトして進めても大丈夫です。
Q
- 「ボタンを押しても何も起きない」
-
今はまだ送信処理をしていないので、ボタンを押しても“見た目だけ”です。
フォームの中身を実際に処理するのは、あとで PHP や JavaScript の学習につながります。今は「フォームの形を作れた」で十分です。
Q
- 「なんだか地味に見える」
-
それで大丈夫です。
HTMLの役割は“見た目を派手にする”ではなく、“内容を整理する”ことです。次のCSSで、文字の大きさや余白、見た目を整えていきます。
Q
ここまでできれば十分
今回のまとめ
- HTMLだけで1ページを完成できた
- header / main / footer の中に内容を整理できた
- 見出し・文章・リンク・画像・フォームを1つにまとめられた
- 次はCSSで見た目を整える流れだと分かった
フリーランス向け報酬即日払いサービス
できた判定
今日のゴール確認
ここまでできたらOKです。
- 最初の1ページを完成できた
- HTMLの土台がひと通りそろった
- 「次はCSSで整える」という流れが見えた
- 完璧じゃなくても、形にすることが大事だと分かった
次に読む
HTML 3-1へ
ここまでで、HTMLの土台はひと通りそろいました。
次は、最初につまずきやすい「画像が出ない」「パスが合わない」「文字化けする」などを整理して、止まりやすい所を先に解消しておきます。
PR：最初の1冊（必要な方だけ）
PR：HTMLを進めるための参考（必要な方だけ）
HTML/CSSの最初の土台づくり用に、1冊だけ置いておきます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。
リンク
ABOUT ME
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
