【HTML 2-1】ミニ制作｜見出し・リンク・画像・フォームで“1ページ完成”を作る（初心者向け）
toshi
ToshiLab
Webプログラミングの入口（0-0）｜親カテゴリweb-programmingの地図と、子カテゴリ（HTML/CSS/JS/PHP）の決め方
toshi
記事内に商品プロモーションを含む場合があります
Webプログラミングって、最初はちょっとだけ不親切です。
検索すると情報が山ほど出てきて、どれから触ればいいか迷いやすい。
なのでこのカテゴリでは、先に「順番」と「棚（カテゴリ）」を固定します。
言い方を変えると——
このページは、学習の地図（ロードマップ）です。
- 「迷いにくくするために親カテゴリと子カテゴリに分けて作成していきます」
-
結論から言うと、こうします。
親カテゴリ（web-programming）＝全体地図（ハブ）
子カテゴリ（html/css/js/php）＝章の入口（小ハブ）
各記事＝末尾に「次に読む1本」を置いてつなぐ親で全部やろうとすると長くなって、読む側もしんどくなりがちです。
逆に子を作らないと、記事が増えたときに迷子が増えやすい。だから、役割を分けてしまいます。
Q
html / css / javascript / php
子カテゴリ
ここは迷ったポイントなんですが——
結論から言うと、子カテゴリは先に作成して記事を公開していきます。
理由はシンプルで、「学習の章立て」と一致すること。
棚が先にあると、記事を追加しても散らかりにくいと思ってます。
| 区分 | 作る？ | 判断の理由 |
|---|---|---|
| html / css / javascript / php | 作る（先に） | 学習の章立てで迷子が減る URLが安定 |
| laravel | まずはタグ運用 | 記事が少ないうちは “空棚”になりやすい |
| webシステム制作 （設計・運用） | まずはタグ | 連載として固まってから カテゴリ化 |
親と子を、ちゃんと分けて見せる
URL設計
親（地図）：/web-programming/
子（章の入口）：
・/web-programming/html/
・/web-programming/css/
・/web-programming/javascript/
・/web-programming/php/
ここが整っていると、「あ、今HTMLの棚にいるな」って分かります。
迷ったらこの順番に戻る
学習ロードマップ
- 0-0（今ここ）：親カテゴリの地図（全体像＋棚を確定）
- html 0-0：HTML章の入口（小ハブ）
- html 1-1：タグの基本（最初の小さな完成）
- css 0-0 → css 1-1：見た目・余白・レイアウトの入口
- javascript 0-0 → js 1-1：クリックで変化させる（DOM最小）
- php 0-0 → php 1-1：フォーム送信（POST）の入口
- （発展）Laravel：タグで連載→記事数が増えたらカテゴリ化
- （発展）Webシステム制作：タグで連載→シリーズ化でカテゴリ化
迷ったら、いったんHTMLに戻るのが一番ラクです。
土台があると後が楽になります。
ここで期待値を揃えておきます
各子カテゴリの役割
| 子カテゴリ | 役割（何を学ぶ棚？） | 最初に作るもの |
|---|---|---|
| html | 構造（骨組み） | 1ページのHTML （見出し/リンク/画像） |
| css | 見た目 （読みやすさ） | 文字・余白・簡単レイアウト |
| javascript | 動き （操作） | クリックで表示切替 （最小DOM） |
| php | サーバー側 （処理） | フォーム送信＋ バリデーション入口 |
最初は軽く、必要になったら上げる
開発環境の考え方
まずはローカル
Laravel以降の現実
（まずはローカル：HTML/CSS/JS）
・基本はPCでOK（ブラウザで確認できれば十分です）
・環境で詰まらないのが優先です
（Laravel以降の現実：ロリポップ以外が良い場合）
Laravelは、SSH/Composer/Node/キュー/スケジューラ等が絡みやすいです。
本格運用に入ったら
・ConoHa VPS（自由度）
・Xserver VPS（安定寄り）
などを検討するのが妥当です。
※WordPress（ブログ本体）はロリポップでもOK。
Laravelは「別の箱」に分けると運用しやすいです。
ToshiLab方式：基本的には毎回同じ型
このカテゴリの運用ルール
- 1記事＝1テーマ（詰め込みすぎない）
- 冒頭に結論（1〜2行）
- 手順は短く（チェックリスト）
- 補足は畳む（アコーディオン）
- 末尾は「次に読む1本」を固定
web-programming のブログカード表示
記事一覧
親カテゴリ：webプログラミング（web-programming）
子カテゴリ：HTML/CSS/JavaScript/PHP (html/css/javascript/php)
▶ HTMLの入口（0-0）｜まずは1ページを“形にする”までの最短ロードマップ
HTMLの入口（0-0）｜まずは1ページを“形にする”までの最短ロードマップ（web-programming / html）
▶ CSSの入口（0-0）｜文字・余白・レイアウトを整える最短ロードマップ
CSSの入口（0-0）｜文字・余白・レイアウトを整える最短ロードマップ（web-programming / css）
※増えるたびに掲載していきます。
子カテゴリ：HTMLの入口へ
次に読む
地図（親カテゴリ）はできました。
次は「HTML章の入口（小ハブ）」を作って、最初の一歩を形にしていきます。
PR：最初の1冊（必要な方だけ）
HTML/CSSを「何から」「どの順で」進めるかが迷いやすいので、最初の土台づくり用に1冊だけ置いておきます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。
リンク
ABOUT ME
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
