【CSS 1-2】余白を整える｜margin・paddingで“窮屈じゃない見た目”を作る（初心者向け）
toshi
ToshiLab
【CSS 4-3】まとめ｜HTMLとCSSで“自己紹介ページ”と“お問い合わせページ”が作れたら最初は十分（初心者向け）
toshi
記事内に商品プロモーションを含む場合があります
HTMLとCSSを学び始める時は、
「どこまでできたら次に進んでいいのか」
が分かりにくいことがあります。
そこでこの回では、
ここまで作ってきた内容をまとめながら、
**自己紹介ページ**
**お問い合わせページ**
の2つを作れたら、
最初の区切りとしてはかなり十分だと整理していきます。
今回は、技術を増やす回ではなく、
**ここまでの到達点を言葉にする回**
です。
- 「最初は、HTMLとCSSで“見せる”と“入力してもらう”ページが作れたら十分です」
-
ここまでで、次のことができるようになっています。
- HTMLでページの中身を書ける
- CSSで色や余白を整えられる
- 箱として見ながら見た目を整理できる
- Flexで並び方を整えられる
- フォームを見やすく入力しやすい形にできる
つまり、
「何を書くか」と「どう見せるか」の最初の土台がそろった状態です。最初の段階では、
ここまでできればかなり前進しています。
Q
目次
ここまで確認できればOK
今回のゴール
- HTMLとCSSで2ページ作れたところまで整理できる
- ここまでで身についた基礎を言葉にできる
- 最初の到達点がどこか分かる
- 次に JavaScript へ進む理由が見える
- 慣れてきたらモダン編へ進む流れも把握できる
確認①
ここまでで作れたものを整理する
| 作れたページ | 役割 |
|---|---|
| 自己紹介ページ | 自分の情報を見せるページ |
| お問い合わせページ | 入力してもらうページ |
自己紹介ページでは、
見出し・画像・紹介文・項目・リンクを1ページにまとめました。
お問い合わせページでは、
説明文・入力欄・送信ボタンを整理して、
“入力しやすそうに見える形”を作りました。
この2つを作れたことで、
HTMLとCSSの最初の役割がかなりはっきりしてきます。
確認②
HTMLでできること、CSSでできること
| 技術 | 主な役割 |
|---|---|
| HTML | ページの中身を書く |
| CSS | ページの見た目を整える |
最初はこの整理で大丈夫です。
HTMLは、
見出し、文章、リンク、画像、フォームなど、
ページの中身そのものを書いていく役割でした。
CSSは、
色、余白、箱、配置、フォームの見た目など、
その中身を読みやすく見せる役割でした。
この2つを分けて考えられるようになるだけでも、
かなり進みやすくなります。
確認③
CSS章でやってきたことを振り返る
| 章 | 見てきたこと |
|---|---|
| CSS 1-1 | 色・文字サイズ・背景色 |
| CSS 1-2 | margin / padding の余白 |
| CSS 1-3 | width / border / padding / margin の箱の感覚 |
| CSS 2-1 | 1ページ全体の見た目調整 |
| CSS 3-1 | Flex による並び方の入口 |
| CSS 3-2 | CSSが効かない時の見直し方 |
| CSS 4-1 | 自己紹介ページ制作 |
| CSS 4-2 | お問い合わせページ制作 |
最初は、色や余白など
“分かりやすく変化する所”から入りました。
そのあと、
箱として見る感覚や、
Flex の並び方、
フォームの整え方へ進んでいきました。
つまり、CSS章全体では
**小さい変化 → 1ページ調整 → 実用ページ制作**
という流れで進んできた形です。
確認④ – 最初の到達点は
“おしゃれさ”ではなく“読みやすさ”です
ここで大事なのは、
「もっと今風に作らないとダメかも」
と焦りすぎないことです。
最初の段階では、
- – 読みやすい
- – 見出しが分かる
- – 項目が整理されている
- – 入力しやすそうに見える
このあたりができていれば十分です。
最初から実務っぽさを全部入れようとすると、
逆に何を学んでいるか分かりにくくなりやすいです。
確認⑤
ここまでで身についた感覚
- 「見出しは大きく、区切りは分かりやすく」の感覚
- 白を入れると読みやすさが上がる感覚
- 要素を箱として見る感覚
- 並び方は親が決める、という Flex の感覚
- フォームは“入力しやすそうに見える”ことが大事という感覚
ここまでで、
細かい理屈を全部暗記していなくても大丈夫です。
むしろ最初は、
「どこを触ると何が変わるか」
が少し分かるようになっていれば十分です。
この感覚があると、
次の JavaScript や PHP に入った時も、
“まず動かして変化を見る”進め方がしやすくなります。
ここで答えておく
よくある不安
- 「不安①：まだ全然きれいに作れません」
-
それで大丈夫です。
最初の段階で大事なのは、
デザインの完成度より、
HTMLとCSSの役割を分けて考えられることです。見やすく整理できていれば、
最初の到達点としては十分です。
Q
- 「不安②：実務ではもっと今風の書き方があるのでは？」
-
はい、実務ではもっと今風の書き方や考え方もあります。
ただ、この章ではあくまで基礎を中心にしています。
そこは基礎に慣れてきたあとで、モダン編として別章で紹介していきます。
Q
- 「不安③：次は何に進めばいいですか？」
-
主導線としては、次は JavaScript に進むのがおすすめです。
HTMLが中身、CSSが見た目なら、
JavaScriptは“動きや変化”を加える入口として自然につながります。
Q
ここからの進み方
ここまでで、
HTMLとCSSの最初の基礎はかなりそろいました。
次は主導線として、
**JavaScriptロードマップ**
へ進むのがおすすめです。
そのうえで、
HTML/CSSに慣れてきたら、
モダン編として別の章へ広げていけます。
| 次の進み方 | 役割 |
|---|---|
| JavaScriptロードマップ | 主導線。ページに動きや変化を加える入口 |
| モダンHTML/CSS入門ロードマップ | HTML/CSSに慣れてきた方向けの発展 |
| モダンJavaScript入門ロードマップ | JavaScriptの基礎に 少し慣れてから読む発展 |
| モダンPHP入門ロードマップ | PHPへ進む理由が見えてきた時の発展 |
もう一度確認
少しだけ振り返ってみる
- 自己紹介ページを作れた
- お問い合わせページを作れた
- HTMLとCSSの役割を分けて考えられるようになった
- 読みやすく整える感覚が少しつかめた
- 次に JavaScript へ進むイメージが持てた
この段階では、“ちゃんと2ページ作れた” という事実
そのものがかなり大きいです。
ここだけ押さえればOK
今回のまとめ
- HTMLは中身、CSSは見た目を整える役割
- 自己紹介ページとお問い合わせページを作れたら最初は十分
- 最初の到達点は“おしゃれさ”より“読みやすさ”
- 次は JavaScriptロードマップへ進むのが自然
- 実務で使う今風の書き方は、慣れてきたらモダン編で広げればよい
できた判定
今日のゴール確認
ここまでできたらOKです。
- HTMLとCSSで2ページ作れたところまで整理できた
- ここまでで身についた基礎を言葉にできた
- 最初の到達点がどこか分かった
- 次へ進む方向として JavaScript とモダン編の位置づけが見えた
次に読む
JavaScriptロードマップへ
ここまでで、
HTMLとCSSの最初の区切りとしてはかなり十分です。
次は、
ページに少し動きや変化を加えるために、
JavaScriptロードマップへ進んでいきます。
実務では、もっと今風の書き方もあります。
そこは基礎に慣れてきたあとで、モダン編として別章で紹介していきます。
慣れてきた方向けの発展
- – モダンHTML/CSS入門ロードマップ
- – モダンJavaScript入門ロードマップ
- – モダンPHP入門ロードマップ
PR：この1冊（必要な方だけ）
PR：HTMLを進めるための参考（必要な方だけ）
HTML/CSSの最初の土台づくり用に、まず1冊だけ置いておきます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。
リンク
PR：最初の1冊を読み終えた方へ
HTML/CSSの全体像をつかんだあとに、CSSの見た目調整や模擬コーディングをもう少し深めたい方向けの1冊です。
今回は自己紹介ページのように、「見出し・画像・余白・並び方」を組み合わせて整える感覚と相性の良いものを置いておきます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。
リンク
ABOUT ME
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
