CSSの基本｜初心者が最初に覚えたいプロパティまとめ

Webページを作るときは、まずHTMLで文章や画像などの構造を作ります。

そのあとにCSSを加えることで、文字の色や大きさ、背景色、余白、枠線、レイアウトなどを整えられます。

HTMLだけでも内容は表示できますが、CSSを使うことでWebページを見やすく、分かりやすく、デザインされた状態に仕上げていくことができます。

---

CSSがあると、見た目はどう変わる？

同じようなHTMLでも、CSSを加えることで見た目を大きく変えられます。

CSSなし

CSSを学ぼう

HTMLだけでは、基本的な文章や構造を作れます。

ボタン

CSSあり

CSSを学ぼう

CSSを使うと、文字・色・余白・背景・枠線などを自由に整えられます。

ボタン

---

CSSとは？

CSSは「Cascading Style Sheets」の略で、Webページの見た目を整えるために使われるスタイルシート言語です。

一方、HTMLは「どんな内容があるのか」を表し、CSSは「その内容をどのように見せるのか」を指定します。

そのため、HTMLとCSSを組み合わせることで、情報の構造とデザインを分けて管理できます。

HTML・CSS・JavaScriptの役割

Web制作では、HTML・CSS・JavaScriptをそれぞれ役割分担させて使うことが基本です。

• HTML：文章や画像などの構造を作る
• CSS：色・サイズ・余白・レイアウトなどを整える
• JavaScript：クリックなどの動きや機能を追加する

HTMLの基本については、こちらの記事で詳しく紹介しています。

---

CSSの基本的な書き方

CSSは基本的に「どの要素に」「何を」「どうするか」を指定して書きます。

p {
    color: #5E5A57;
    font-size: 16px;
    line-height: 1.8;
}

このコードでは、p要素の文字色・文字サイズ・行間を指定しています。

セレクタ

「どのHTML要素にCSSを適用するか」を指定する部分です。

p

プロパティ

変更したい見た目の項目です。

color
font-size
margin
padding

値

プロパティに対して、どのような設定にするかを指定します。

color: #5E5A57;
font-size: 16px;

---

初心者が最初に覚えたいCSSプロパティ

CSSにはたくさんのプロパティがありますが、最初からすべて覚える必要はありません。 まずは、Webページでよく使う基本的なものから少しずつ身につけていきましょう。

具体的には、文字の見た目を変えるプロパティや、余白・背景・レイアウトを調整するプロパティから始めると理解しやすくなります。

color｜文字色を変える

colorは、文字の色を指定するプロパティです。

p {
    color: #7D8FA3;
}

例えば、通常の文字色から落ち着いたブルー系の色へ変更できます。

CSSなし

この文字は基本の文字色です。

CSSあり

colorで文字色を変更しています。

font-size｜文字サイズを変える

font-sizeは、文字の大きさを指定します。

p {
    font-size: 16px;
}

CSSなし

文字サイズを指定していません。

CSSあり

font-sizeで大きくしています。

font-weight｜文字の太さを変える

font-weightは、文字を細くしたり太くしたりするときに使います。

h2 {
    font-weight: 700;
}

line-height｜行間を調整する

line-heightは、文章の行と行の間隔を調整するプロパティです。

p {
    line-height: 1.8;
}

文章が読みやすくなるため、ブログ記事では特に重要なプロパティです。

background-color｜背景色を変える

background-colorは、要素の背景色を指定します。

例えば、ボックスやカードの背景に色を付けるときに使います。

.box {
    background-color: #F7F3EE;
}

border｜枠線を付ける

次に覚えておきたいのがborderです。

このプロパティを使うと、要素の周囲に枠線を付けられます。

.box {
    border: 1px solid #E8E1D8;
}

枠線を付けることで、カードや入力欄などの境界を分かりやすくできます。

border-radius｜角を丸くする

さらに、border-radiusを組み合わせると要素の角を丸くできます。

.box {
    border-radius: 12px;
}

カードやボタンなど、柔らかい印象のデザインを作るときによく使われるプロパティです。

CSSなし

Web制作を学ぼう

CSSを使っていないシンプルな状態です。

CSSあり

Web制作を学ぼう

背景色と枠線を追加すると、カードのように見せられます。

margin｜外側の余白を調整する

marginは、要素の外側に余白を作るために使います。

例えば、見出しと本文、カードとカードの間隔などを調整するときに使います。

.box {
    margin: 20px;
}

padding｜内側の余白を調整する

一方、paddingは要素の内側に余白を作るために使います。

.box {
    padding: 24px;
}

そのため、marginとpaddingは、余白を作る場所によって使い分けることがポイントです。

今回のデモでは、marginが要素の外側、paddingが要素の内側にあることを色分けして確認できます。

簡単に覚えるなら、marginは外側、paddingは内側と考えると分かりやすいでしょう。

margin / border / padding

Web制作を学ぼう

要素の内側にpaddingがあります。

margin（外側の余白）

border（枠線）

padding（内側の余白）

content（内容）

marginとpaddingは初心者が混乱しやすいので、違いを覚えておきましょう。

width・max-width｜幅を調整する

widthを使うと、要素そのものの幅を指定できます。

また、max-widthを設定すれば、指定したサイズ以上に広がらないよう制限できます。

.container {
    width: 100%;
    max-width: 1100px;
}

例えば、Webサイトでは画面いっぱいに内容が広がりすぎないよう、max-widthを設定することがあります。

display｜要素の表示方法を決める

displayは、要素をどのように表示するかを指定するプロパティです。

代表的な値には、次のようなものがあります。

• block
• inline
• inline-block
• flex
• grid

特にWeb制作では、display: flex;を非常によく使います。

display: flex｜要素を並べる

display: flex;を指定すると、要素を横並びにしたり、中央に揃えたりしやすくなります。

例えば、次のようなメニューのレイアウトを作るときに便利です。

.menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

CSSなし

Item 1

Item 2

Item 3

要素が上から順番に並んでいます。

CSSあり

Item 1

Item 2

Item 3

display: flexで要素を横並びにしています。

justify-content

横方向の配置を調整するときに使います。

justify-content: center;

align-items

縦方向の配置を調整するときに使います。

align-items: center;

gap

FlexboxやGridで、要素同士の間隔を指定します。

gap: 16px;

position｜要素の位置を調整する

positionは、要素の位置を細かく調整するときに使用します。

代表的な値には、 relative、 absolute、 fixed、 sticky があります。

.header {
    position: sticky;
    top: 0;
}

例えば、スクロールしても上部に残るヘッダーなどにposition: sticky;が使われます。

CSSなし

Badge

カードのタイトル

バッジは通常の文書の流れに沿って表示されています。

特別な位置指定をしていません。

CSSあり

Badge

カードのタイトル

positionを使って、バッジをカード右上に配置しています。

親をrelative、バッジをabsoluteにしています。

このように、positionは通常の文書の流れから要素の位置を調整したいときに役立ちます。

---

初心者が最初に覚えたいCSSプロパティ一覧

プロパティ	役割	使用例
color	文字色	color: #333;
font-size	文字サイズ	font-size: 16px;
font-weight	文字の太さ	font-weight: 700;
line-height	行間	line-height: 1.8;
background-color	背景色	background-color: #fff;
border	枠線	border: 1px solid #ddd;
border-radius	角丸	border-radius: 12px;
width	幅	width: 100%;
max-width	最大幅	max-width: 1100px;
margin	外側の余白	margin: 20px;
padding	内側の余白	padding: 20px;
display	表示方法	display: flex;
justify-content	横方向の配置	justify-content: center;
align-items	縦方向の配置	align-items: center;
gap	要素間の間隔	gap: 16px;
position	位置指定	position: relative;

---

HTMLとCSSを使って簡単なカードを作ってみよう

このように、複数のプロパティを組み合わせれば、シンプルなHTMLでもカード型のデザインを作れます。

さらに、文字色や余白、レイアウトを調整すると、目的に合わせてさまざまなデザインへ発展させることができます。

HTML

<div class="card">
    <h2>CSSを学ぼう</h2>
    <p>基本プロパティを使ってカードを作ります。</p>
</div>

CSS

.card {
    max-width: 400px;
    padding: 24px;
    background-color: #FFFFFF;
    border: 1px solid #E8E1D8;
    border-radius: 12px;
}
.card h2 {
    margin: 0 0 16px;
    font-size: 24px;
}
.card p {
    margin: 0;
    color: #8B8580;
    line-height: 1.8;
}

CSSなし

CSSを学ぼう

基本プロパティを使ってカードを作ります。

CSSあり

CSSを学ぼう

基本プロパティを使ってカードを作ります。

このように、複数のプロパティを組み合わせることで、シンプルなHTMLからカード型のデザインを作ることができます。

---

CSSが反映されないときの確認ポイント

CSSを書いたのに見た目が変わらない場合は、いくつか確認してみましょう。

第一に、CSSのセレクタがHTMLと合っているか確認します。

第二に、class名やid名のスペルに間違いがないか見直します。

そのため、コードを書いた直後は、HTMLとCSSを見比べることが大切です。

さらに、CSSファイルが正しく読み込まれているか、別のCSSによって上書きされていないかも確認してください。

最後に、ブラウザやWordPressのキャッシュが残っていないかチェックします。

特に初心者のうちは、「class名のスペルミス」と「別のCSSによる上書き」がよくある原因です。

---

CSSはどこに書く？

CSSを書く方法はいくつかあります。

外部CSSファイル

第一に、外部CSSファイルへまとめる方法です。
複数のページで同じCSSを使いたい場合に向いています。

styleタグ

次に、HTML内の<style>タグへ記述する方法があります。 小さなデモや特定のページだけで使うスタイルに便利です。

インラインCSS

また、HTML要素に直接style属性を書くインラインCSSという方法もあります。

このように、目的に応じてCSSの書き方を使い分けることが大切です。

---

CSSを勉強するときのおすすめの順番

CSSは一度にすべて覚えようとすると難しく感じます。 まずは基本的なプロパティを使いながら、少しずつできることを増やしていくのがおすすめです。

1. CSSの基本構文を覚える
2. 文字色・文字サイズを変更する
3. margin・paddingを理解する
4. 背景・枠線・角丸を使う
5. display: flexを覚える
6. Gridを学ぶ
7. レスポンシブデザインを学ぶ
8. アニメーションやトランジションを学ぶ

最初から完璧に覚える必要はありません。 実際にコードを書きながら、「このプロパティは何を変えるのか」を確認していくことが大切です。

---

CSSの学習に必要なもの

CSSを勉強するために、高価なソフトを用意する必要はありません。 基本的にはコードエディターとWebブラウザがあれば始められます。

• Visual Studio Code
• Google ChromeなどのWebブラウザ
• HTMLファイル
• CSSファイル

VS Codeについては、こちらの記事でも紹介しています。

---

まとめ

CSSは、HTMLで作ったWebページの見た目を整えるために使います。

最初からたくさんのプロパティを覚える必要はなく、まずは次のような基本プロパティから使ってみましょう。

まずはcolorやfont-sizeなど、文字の見た目を変えるものから試してみましょう。

そのうえで、marginやpadding、background-color、borderなどを使い、少しずつ表現を増やしていくのがおすすめです。

さらに、displayやpositionを覚えると、レイアウトや要素の配置も調整できるようになります。

このように、実際にコードを書きながら試していくことで、CSSの役割や各プロパティの使い方を理解しやすくなります。

CSSは実際に書いてみることで理解しやすくなります。 「文字の色を変える」「余白を付ける」「カードを作る」といった小さな練習から始めてみましょう。