はじめに
前編では、CSSの基本的な書き方や文字の色・サイズなどを学びました。
今回は、Webページのレイアウトを整えるために欠かせないCSSを学んでいきます。
レイアウトが整うだけで、見やすく読みやすいWebページになります。
この記事では、初心者が最初に覚えておきたい次の内容を紹介します。
- 要素の大きさを決める
- 要素同士の余白を調整する
- 枠線を付ける
- CSSが反映されないときの確認方法
前編のおさらい
前編では、CSSの基本について学びました。
- CSSを書く3つの方法
- CSSの基本構文
- コメントの書き方
- 文字や背景色を変更する方法
- 文字サイズや太さ、配置方法
ここまで理解できれば、文字のデザインはある程度変更できます。
次はレイアウトを整えるCSSを覚えていきましょう。
サイズを指定する
Webページでは、画像やボックスなどの大きさを指定することがよくあります。
そのときに使うのが、
widthheight
です。
width
widthは横幅を指定します。
書き方
.box {
width: 300px;
}
実行結果
┌──────────────────────┐
│ │
│ 横幅300px │
│ │
└──────────────────────┘
ポイント
-
pxは画面上のピクセル数 - 数字を大きくすると横幅も広くなる
height
heightは高さを指定します。
書き方
.box {
height: 150px;
}
実行結果
┌──────────────┐
│ │
│ │
│ 高さ150px |
│ │
│ │
└──────────────┘
widthとheightを一緒に使う
.box {
width: 300px;
height: 150px;
}
これで横300px・高さ150pxのボックスが完成します。
注意
このコードだけでは、ボックスは表示されません。divは背景色や枠線がないため、サイズは指定されていますが、見た目では何も表示されないように見えます。
余白を指定する
Webページを見やすくするためには、余白がとても重要です。
CSSには2種類の余白があります。
-
margin（外側の余白） -
padding（内側の余白）
初心者が最も混乱しやすいポイントなので、違いを理解しておきましょう。
margin
marginは要素の外側の余白です。
書き方
.box {
margin: 20px;
}
イメージ
┌───────────────┐
│ ←20px余白→ │
│ ┌───────────┐ │
│ │ box │ │
│ └───────────┘ │
└───────────────┘
よく使う場面
- ボックス同士を離す
- 見出しと文章の間隔を空ける
- レイアウト全体を整える
padding
paddingは要素の内側の余白です。
書き方
.box {
padding: 20px;
}
イメージ
┌───────────────┐
│ │
│ ←20px→ │
│ 文字 │
│ │
└───────────────┘
文字と枠線の間に余裕ができるため、読みやすくなります。
marginとpaddingの違い
| プロパティ | 役割 |
|---|---|
margin |
要素の外側の余白 |
padding |
要素の内側の余白 |
初心者は
-
margin＝外側 -
padding＝内側
この2つだけ覚えておけば十分です。
枠線を付ける
要素を目立たせたいときはborderを使います。
書き方
.box {
border: 2px solid black;
}
実行結果
┌────────────────┐
│ │
│ ボックス │
│ │
└────────────────┘
borderの構成
border: 太さ 線の種類 色;
例
border: 2px solid red;
| 指定 | 意味 |
|---|---|
| 2px | 線の太さ |
| solid | 実線 |
| red | 線の色 |
CSSが反映されないときのチェックポイント
CSSが反映されない場合は、次のポイントを確認してみましょう。
① セミコロン（;）を書き忘れていないか
❌
color: red
font-size: 20px;
✅
color: red;
font-size: 20px;
② スペルミスがないか
❌
widht: 300px;
✅
width: 300px;
③ CSSファイルを読み込んでいるか
HTMLにはCSSファイルを読み込む記述が必要です。
<link rel="stylesheet" href="style.css">
④ セレクタが合っているか
HTML
<p class="text">
こんにちは
</p>
CSS
.text {
color: blue;
}
HTMLとCSSでクラス名が一致していないと、スタイルは反映されません。
⑤ ブラウザを更新したか
変更しても表示が変わらない場合は、ブラウザを更新してみましょう。
-
Windows：
F5またはCtrl + F5 -
Mac：
Cmd + Shift + R
まとめ
今回はレイアウトを整えるための基本的なCSSを学びました。
| プロパティ | 役割 |
|---|---|
width |
横幅を指定する |
height |
高さを指定する |
margin |
外側の余白 |
padding |
内側の余白 |
border |
枠線を付ける |
これらはWeb制作で使われる基本プロパティです。
最初は「marginとpaddingの違いが分からない」と感じるかもしれませんが、実際にコードを書いて試すことで自然と身についていきます。
最後まで読んで頂きありがとうございました。