【CSS 1-3】ボックスモデルの入口｜width・border・paddingで“箱として見る感覚”をつかむ（初心者向け）
toshi
ToshiLab
【CSS 2-1】見た目を整えるミニ制作｜色・余白・箱を1ページにまとめる（初心者向け）
toshi
記事内に商品プロモーションを含む場合があります
CSS 1-1〜1-3では、
色、文字サイズ、余白、箱の感覚を少しずつ見てきました。
ただ、1個ずつだと分かっても、
「実際の1ページではどう使うの？」で止まりやすいです。
今回はそこをつなぐ回として、
HTMLで作った1ページに対して
**色・余白・箱**
をまとめて使いながら、見た目を少し整えていきます。
- 「今回は“新しい知識”より“つながる感覚”が大事です」
-
今回のポイントは、この3つです。
- 色を入れる
- 余白を整える
- 箱として見やすくする
つまり、今まで別々に見ていたものを、
1ページにまとめて使う回です。最初からおしゃれに作る必要はありません。
「読みやすくなった」「見分けやすくなった」が確認できればOKです。
Q
目次
ここまでできればOK
今回のゴール
- ここまでの CSS を1ページにまとめて使える
- 見出し・本文・画像・フォームの見た目を少し整えられる
- 色・余白・箱がつながる感覚を持てる
- 次のレイアウトの入口へ進む準備ができる
コピペOK
まずは完成形を見る
前回までに作った HTML 2-1 の1ページに対して、
style.css に下のコードを追加してください。
今回は main、見出し、画像、フォームまわりを少し整えます。
※HTMLにCSSのLinkタグは忘れないように追記してください。
body {
background-color: #f3f4f6;
margin: 0;
padding: 24px;
color: #333333;
line-height: 1.8;
}
main {
background-color: #ffffff;
width: 720px;
padding: 24px;
margin: 24px auto 0;
border: 1px solid #d1d5db;
}
h1 {
color: #2563eb;
font-size: 32px;
margin-bottom: 16px;
}
h2 {
color: #111827;
font-size: 24px;
margin-top: 32px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #e5e7eb;
}
p {
font-size: 16px;
margin-bottom: 16px;
}
a {
color: #2563eb;
}
img {
display: block;
margin-top: 16px;
margin-bottom: 24px;
border: 1px solid #e5e7eb;
}
form {
margin-top: 16px;
padding: 24px;
background-color: #f9fafb;
border: 1px solid #e5e7eb;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input,
textarea {
width: 100%;
padding: 12px;
margin-bottom: 16px;
border: 1px solid #d1d5db;
font-size: 16px;
box-sizing: border-box;
}
button {
background-color: #2563eb;
color: #ffffff;
border: none;
padding: 12px 20px;
font-size: 16px;
cursor: pointer;
}
今回は
「1個の指定を深掘りする」より、
「ページ全体が前より見やすくなる」
を確認する回です。
変化のポイント
どこを見ればいい？
| 整える場所 | 変わること |
|---|---|
| body | ページ全体の背景色と外側の余白が整う |
| main | 本文全体が白い箱として見えやすくなる |
| h1 / h2 | 見出しの強弱が出て、流れが追いやすくなる |
| img | 画像が本文から浮きすぎにくくなる |
| form / input / button | 入力する場所と送信する場所が分かりやすくなる |
もう一度
今回の見方を、やさしく整理
| 見るポイント | 何を確認する？ | 今回の役割 |
|---|---|---|
| 色 | どこが目立つか | 見出しやボタンを 分かりやすくする |
| 余白 | どこが窮屈か | 文章や入力欄を 読みやすくする |
| 箱 | どこまでが中身か | main や form を まとまりとして見せる |
CSS 1-1〜1-3で見てきたものを、
今回は「ページ全体」に使っています。
つまり、
1つずつ覚える段階から、
少しだけ“組み合わせて使う”段階に進んだ感じです。
main を整えると
ページ全体がまとまりやすいです
今回いちばん見てほしいのは main です。
背景色、横幅、内側の余白、線をまとめて入れると、
本文全体が「1つの箱」として見えやすくなります。
main {
background-color: #ffffff;
width: 720px;
padding: 24px;
margin: 24px auto 0;
border: 1px solid #d1d5db;
}見出しに少し差をつけると
読みやすさが上がります
h1 と h2 の色や大きさを少し変えるだけでも、
どこが大事で、どこで話が切り替わるのかが見やすくなります。
h1 {
color: #2563eb;
font-size: 32px;
margin-bottom: 16px;
}
h2 {
color: #111827;
font-size: 24px;
margin-top: 32px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #e5e7eb;
}と書くと、
見出しの役割が少し伝わりやすくなります。
- h1 はページのいちばん大きい見出し
- h2 は話の切り替わりを見せる見出し
- 線を足すと区切りが見えやすくなる
これだけでも前進です
フォームが“入力しやすそうに見える”
| 指定 | どんな見え方になる？ |
|---|---|
| form に背景色と線を付ける | 入力エリア全体がまとまって見える |
| input / textarea に padding を入れる | 文字を入れる場所が窮屈に見えにくい |
| button に背景色を付ける | 送信する場所が分かりやすい |
ひとくふう
HTMLだけでもフォームは作れますが、
CSSを少し足すだけで
「ここに入力するんだな」がかなり伝わりやすくなります。
今回はまず、
見やすさを作ることを優先します。
練習
少しだけ変えてみる
- main の width を 720px → 640px にしてみる
- h1 の色を変えてみる
- form の背景色を少し変えてみる
- button の色を変えてみる
- img の線の色を変えてみる
- “前より見やすいか”だけを見ながら確認する
この回は、正解のデザインを探すというより、
“変えるとどう見えるか”を観察できれば十分です。
ここだけ確認
よくあるつまずき
- 「input や textarea が横にはみ出す」
-
width: 100%; を入れると、
見え方によっては少しはみ出したように見えることがあります。そんな時は、
box-sizing: border-box;
が入っているかを確認してください。
今は意味を全部覚えなくて大丈夫です。
「入力欄の幅を扱いやすくするために入れている」くらいでOKです。
Q
- 「main の幅の違いが分かりにくい」
-
720px と 680px くらいだと、最初は差が見えにくいことがあります。
そんな時は 500px や 560px くらいまで小さくしてみると、違いが分かりやすいです。
Q
- 「画像だけ浮いて見える」
-
画像の上下に余白がないと、
本文の流れから少し浮いて見えることがあります。img の margin が入っているかを確認してみてください。
border を細く付けるのも、まとまりを出しやすいです。
Q
- 「ボタンの色が変わらない」
-
button に CSS を書いているのに変化がない時は、
HTML側が button タグになっているかを確認します。たとえば、
HTML<button type="submit">送信する</button>の形なら、今回の CSS が当てやすいです。
Q
ここだけ押さえればOK
今回のまとめ
- 色を入れると、目立たせたい所が分かりやすくなる
- 余白を入れると、読みやすさが上がる
- 箱として整えると、ページ全体がまとまりやすくなる
- 今回は“新しい知識”より“つながる感覚”が大事
次に読む
CSS 3-1へ
ここまでで、
CSSの最初の土台を1ページにまとめる感覚ができました。
次は、
ここまでは既存ページを整える練習。
次からは実用ページとして、自己紹介ページを作ります
PR：最初の1冊（必要な方だけ）
PR：HTML/CSSを進めるための参考（必要な方だけ）
最初の土台づくり用に、1冊だけ置いておきます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。
リンク
ABOUT ME
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
