第4章：ブログデザインが見違える！頻出CSSプロパティ実践集
こんにちは！前回の第3章では、スタイルの適用先を決める「セレクタ（狙い撃ちする方法）」を学びました。
今回は理論から実践へ移りましょう。「何をどう変えるか（プロパティ）」の登場です。
CSSには何百ものプロパティがありますが、実はブログデザインで日常的に使うのはそのうちのほんの10〜20個程度です。今回は、その中でも特に効果が高く、初心者が絶対に覚えておくべきプロパティを厳選して紹介します。
1. 文字とフォント (Typography)
ブログは「読むもの」です。文字の読みやすさを調整するだけで、読者の滞在時間は大きく変わります。
- color
- 文字の色を指定します。
redのような名前や、#333333のような16進数コードを使います。真っ黒（#000）よりも、少しグレーがかった黒（#333など）の方が目に優しく、モダンに見えます。googleの検索で、カラー選択ツールと入力して、それから好みの色の番号（HEXの下の#4287f5（例））を探すと良いです。もしくは、下の素晴らしいサイト様で色と番号の対応が見れます。 - font-size
- 文字の大きさを指定します。
重要：単位の使い分け
- font-family
- フォント（書体）の種類を指定します。
ブログでは一般的に、ゴシック体を表すsans-serifを指定して、読みやすさを重視します。 - line-height
- 行の高さを指定します。これが行間（行と行の隙間）を決めます。
単位なしで1.5〜1.8程度を指定するのが黄金比です。行間が詰まりすぎていると、文章が非常に読みづらくなります。
2. 背景と色 (Background)
- background-color
- 要素の背景色を指定します。
記事の背景を白に、サイト全体の背景を薄いグレーにすることで、記事エリアを際立たせることができます。
例：background-color: #f9f9f9;
3. サイズと余白 (Box Model) 【最重要】
CSSで最もつまずきやすいのが、この「ボックスモデル（余白とサイズ）」の概念です。
すべての要素は「箱」のような形をしており、以下の4つの層でできています。
↓ 以下の箱の構成を見てみましょう
コンテンツ
青い背景＝Content + Padding
濃い青線＝Border
外側の白＝Margin
- width / height
- コンテンツそのものの幅と高さです。
100%と指定すれば、親要素いっぱいに広がります。 - padding（パディング）
- 「内側の余白」です。枠線と文字の間のスペースを作ります。
これがないと、文字が枠線にピタッとくっついてしまい、窮屈に見えます。 - margin（マージン）
- 「外側の余白」です。隣の要素との距離を取ります。
段落と段落の間を空けたりする時に使います。
💡 記述のコツ（ショートハンド）padding: 20px; と書くと、上下左右すべてに20pxが入ります。padding: 10px 20px; と書くと、上下に10px、左右に20pxが入ります。これよく使います！
4. 枠線・角丸・影 (Decoration)
ブログをおしゃれに見せる「仕上げ」のプロパティです。
- border
- 枠線を引きます。「太さ・種類・色」をまとめて指定します。
例：border: 1px solid #ccc;（1pxの実線、グレー） - border-radius
- 角を丸くします。ボタンや画像の角を少し丸くするだけで、優しい印象になります。
例：border-radius: 5px; - box-shadow
- 要素に影を落とします。少し浮き上がっているように見え、高級感が出ます。
例：box-shadow: 0 2px 5px rgba(0,0,0,0.2);
適用サンプル
角丸と影つき
上の図は以下のCSSのコードで書かれます。
.box {
background-color: #fab1a0;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}🔍 クリックして「完全なCSSコード」を見る
実は、文字を白くしたり、箱のど真ん中に配置するために、裏側では少し高度な設定も行っています。
.decoration-demo {
width: 200px; /* 箱の幅を200pxにする */
height: 100px; /* 箱の高さを100pxにする */
background-color: #fab1a0; /* 背景色をサーモンピンクにする */
margin: 0 auto; /* 箱自体を画面の中央に寄せる */
/* ▼▼▼ ここから下が文字の配置テクニック ▼▼▼ */
display: flex; /* フレックスボックスというモードにする */
align-items: center; /* 縦方向の真ん中に文字を持ってくる */
justify-content: center; /* 横方向の真ん中に文字を持ってくる */
/* ▼▼▼ ここが白抜きの正体 ▼▼▼ */
color: #fff; /* 文字色を白(#ffffffの省略)にする */
font-weight: bold; /* 文字を太くする */
}