【HTML 1-1】タグの基本｜見出し・段落・リンク・画像で“最初の1ページ”を作る（初心者向け）
toshi
ToshiLab
HTMLの入口（0-0）｜まずは1ページを“形にする”までの最短ロードマップ（web-programming / html）
toshi
記事内に商品プロモーションを含む場合があります
HTMLは、Web制作の“骨組み”です。
ここが分かると、CSSもJavaScriptも一気に理解しやすくなります。
この章は、まず最初に「1ページを形にする」ことをゴールにします。
難しいことは後回しで大丈夫です。
- 「HTMLは“最初の1ページ”を作れば十分進めます」
-
この章の最初の目標はこれです。
・見出しがある
・文章がある
・リンクがある
・画像が出せるこれができれば、次のCSSへ進めます。
HTMLは、最初に完璧を目指す必要はありません。
Q
目次
親→子のつながり
この章の位置づけ
親カテゴリ（地図）：web-programming（web-roadmap）
子カテゴリ（章の入口）：html（この記事）
迷ったら親の地図へ戻れます。
→ 親（web-roadmap）：https://toshilab.jp/web-programming/web-roadmap/
読む順番
HTML章のロードマップ
- HTML 0-0（今ここ）：章の地図（最短ルートを固定）
- HTML 1-1：タグの基本（見出し/段落/リンク/画像）
- HTML 1-2：ページの構造（header/main/footer）
- HTML 1-3：フォームの入口（input/textarea）
- HTML 2-1：ミニ制作（1ページ完成予定）
- HTML 3-1：よくあるつまずき（パス/画像/文字化け等）
VS Code 最低限だけ
まず最初の準備
この章で必要なのは、まずこの3つだけです。
・Visual Studio Code を入れる
・拡張「Live Server」を入れる
・保存したらブラウザで確認できる状態にする
※Visual Studio Code は Mac Windows Linux
それぞれ合ったものをダウンロードしてください。
※参照/立ち上げた状態
※上記、画像赤い線部分をクリックすると下記の画像になります。
※赤い線の部分に Live Server をコピペしてインストールしてください。
まだの方だけ
STEP1：VS Code を用意する
- VS Code をインストール（無料）
- 日本語化は任意（後でもOK）
※両方ともブラウザで検索でわかりますので、
癖付けの為にも調べる癖をつけてください。
迷わないため
STEP2：作業フォルダを作る
- フォルダを1つ作る（例：web-programming）
- その中に章フォルダを作る（例：html）
- VS Codeで「フォルダを開く」から、htmlフォルダを開く
入れすぎない
STEP3：最低限の拡張
| 拡張 | 役割 | 必要度 |
|---|---|---|
| Live Server | 保存→ブラウザ反映 | 必須寄り |
| Prettier | 自動整形 | 任意（あるとラク） |
| Auto Rename Tag | タグの同期編集 | 任意（あるとラク） |
この章に入る前のチェック
STEP4：動作確認
- index.html を作って保存できる
- Live Serverでブラウザに表示できる
- 保存→更新がストレスなく回る
- 「つまずき：Live Serverが動かないとき」
-
- VS Codeで「フォルダ」を開いているか（ファイル単体ではない）
- 拡張が有効になっているか
- 右下に「Go Live」が出ているか
Q
コードは“記事内コピペ”が基本
この章の学び方
この章の方針：
・コードは記事内に掲載（コピペで試せる）
・差分も書く（どこを変えたか分かる）
・完成版zipは「必要な人だけ」の補助
1ページの最小セット
最初に作る完成イメージ
- タイトル（ページの名前）
- 見出し（H1/H2）
- 段落（p）
- リンク（a）
- 画像（img）
この5つが揃うと、“ページを作れた感”が出て
次へ進みやすくなります。
HTML のブログカード表示
記事一覧
カテゴリ：HTML（html）
▶ HTMLの入口（0-0）｜まずは1ページを“形にする”までの最短ロードマップ
HTMLの入口（0-0）｜まずは1ページを“形にする”までの最短ロードマップ（web-programming / html）
▶ 【HTML 1-1】タグの基本｜見出し・段落・リンク・画像
【HTML 1-1】タグの基本｜見出し・段落・リンク・画像で“最初の1ページ”を作る（初心者向け）
▶ 【HTML 1-2】ページの構造｜header・main・footer
【HTML 1-2】ページの構造｜header・main・footerで“読みやすい土台”を作る（初心者向け）
▶ 【HTML 1-3】フォームの入口｜input・textarea・button
【HTML 1-3】フォームの入口｜input・textarea・buttonで“入力できるページ”を作る（初心者向け）
▶ 【HTML 2-1】見出し・リンク・画像・フォームで“1ページ完成”を作る
【HTML 2-1】ミニ制作｜見出し・リンク・画像・フォームで“1ページ完成”を作る（初心者向け）
▶ 【HTML 3-1】パス・画像が出ない・文字化けをやさしく解決
【HTML 3-1】よくあるつまずき｜パス・画像が出ない・文字化けをやさしく解決する（初心者向け）
次に読む
HTML 1-1. へ進む
準備ができたら、次は「タグの基本」で最初の1ページを作ります。
（この記事からそのままコピペで進められます）
任意(追記)
完成版zipの扱いについて
PR：最初の1冊（必要な方だけ）
HTML/CSSを「何から」「どの順で」進めるかが迷いやすいので、最初の土台づくり用に1冊だけ置いておきます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。
リンク
ABOUT ME
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
