Webページの見た目（色・サイズ・レイアウト）を決めるのに欠かせないのが CSSです。
WordPressでも、記事の細かい装飾に役立ちます。
この記事では、CSSの基本を初心者向けに解説します！
CSSとは？
CSS（Cascading Style Sheets）は、Webページのデザインを指定するための言語です。
HTMLで作った骨組みに対して：
- 色
- 余白
- 文字サイズ
- 背景色
- 位置
などの見た目を設定します。
HTMLとCSSの役割の違い
| 言語 | 役割 |
|---|---|
| HTML | ページの構造・意味 |
| CSS | デザイン・装飾 |
→ セットで使うのが基本。
CSSの基本構造（ルールセット）
セレクタ {
プロパティ: 値;
}
例：
p {
color: red;
}
意味：
「pタグの文字色を赤にしてください」
CSSの適用方法3つ
① インラインCSS
HTMLタグに直接書く方法：
<p style="color: blue;">青い文字</p>
初心者が一番使いやすい。
② <style>タグにまとめる
<style>
h2 {
color: green;
}
</style>
③ 外部CSS（本格的）
<link rel="stylesheet" href="style.css">
WordPressテーマは基本これ。
よく使うプロパティ
文字色（color）
p {
color: #333;
}
文字サイズ（font-size）
p {
font-size: 16px;
}
太字（font-weight）
strong {
font-weight: bold;
}
背景色（background-color）
div {
background-color: #f5f5f5;
}
余白（margin / padding）
外側の余白：
p {
margin: 20px;
}
内側の余白：
p {
padding: 10px;
}
ブログで見やすさUP！
枠線（border）
div {
border: 1px solid #ccc;
}
テキスト位置（text-align）
h1 {
text-align: center;
}
中央揃えが簡単。
セレクタの種類（超重要）
タグセレクタ
p { color: red; }
クラスセレクタ（よく使う）
.mybox {
background-color: yellow;
}
HTML側：
<div class="mybox"></div>
IDセレクタ（1ページ1回）
#title {
color: blue;
}
CSSの優先順位（カスケード）
CSSには優先順位があります：
強い ← 弱い
!important ＞ インライン ＞ ID ＞ クラス ＞ タグ
例：
color: red !important;
基本は使いすぎ注意。
CSSでよく使う単位
| 単位 | 意味 |
|---|---|
| px | 固定ピクセル |
| % | 親要素に対する割合 |
| rem | ルートフォントサイズ基準 |
スマホ対応なら rem や % も便利。
ボタン風デザイン例（超実用）
.btn {
display: inline-block;
background: #f57c00;
color: #fff;
padding: 12px 20px;
border-radius: 30px;
text-decoration: none;
}
HTML側：
<a href="#" class="btn">今すぐ見る</a>
→ サイト作成で大活躍！
WordPressでCSSを使う場面
- 見出しの装飾
- 記事内ボックスデザイン
- CTAボタン
- 吹き出しデザイン
- 比較表の整形
→覚えるほどブログ品質UP。
WordPressでCSSを追加する場所
管理画面 → 外観 → カスタマイズ → 追加CSS
または
子テーマのstyle.css
初心者がやりがちなNG
❌ !important使いすぎ
❌ 余白ゼロの詰め込み
❌ IDを乱用
❌ 同じデザインを都度コピペ
CSSのデバッグ方法（簡単）
Chromeで：
右クリック → 検証（DevTools）
→ CSSをリアルタイムで変更検証できる！
練習課題（コピペOK）
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #e64a19;
text-align: center;
}
.box {
background: #f5f5f5;
padding: 20px;
border-left: 5px solid #e64a19;
}
</style>
</head>
<body>
<h1>CSS練習ページ</h1>
<div class="box">
CSSでデザインを変える練習です。
</div>
</body>
</html>
→ 触って動かすと一気に理解が深まります。
CSS学習のコツ
- 少しずつ覚える
- 手を動かす
- デザイン事例を真似る
- Chrome検証ツールを見る
よくある質問（FAQ）
Q：CSSは難しい？
A：最初だけです。慣れたら気持ちいいほど自由。
Q：覚えておくべき必須プロパティは？
A：color / font-size / margin / padding / border / background
Q：WordPress初心者でも必要？
A：必須級。差別化できる。
まとめ
| ポイント | 状態 |
|---|---|
| CSSはデザイン担当 | ✅ |
| HTMLとセットで使う | ✅ |
| margin/padding理解が最重要 | ✅ |
| クラスセレクタで拡張 | ✅ |
| Chrome検証で確認 | ✅ |
おすすめ関連記事
この記事が役に立ったら、いいね！お願いします！
