はじめに

前編では、CSSの基本的な書き方や文字の色・サイズなどを学びました。

今回は、Webページのレイアウトを整えるために欠かせないCSSを学んでいきます。
レイアウトが整うだけで、見やすく読みやすいWebページになります。

この記事では、初心者が最初に覚えておきたい次の内容を紹介します。

要素の大きさを決める
要素同士の余白を調整する
枠線を付ける
CSSが反映されないときの確認方法

前編のおさらい

前編では、CSSの基本について学びました。

CSSを書く3つの方法
CSSの基本構文
コメントの書き方
文字や背景色を変更する方法
文字サイズや太さ、配置方法

ここまで理解できれば、文字のデザインはある程度変更できます。

次はレイアウトを整えるCSSを覚えていきましょう。

サイズを指定する

Webページでは、画像やボックスなどの大きさを指定することがよくあります。

そのときに使うのが、

width
height

です。

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の違いが分からない」と感じるかもしれませんが、実際にコードを書いて試すことで自然と身についていきます。

最後まで読んで頂きありがとうございました。