CSSでブログは見違える！頻出プロパティ実践集【コピペOK】
CSSの基本ルールとセレクタを学んだら、次はいよいよ実践です。CSSには膨大な数の「プロパティ（スタイルの種類）」がありますが、すべてを一度に覚える必要はありません。
この記事では、ブログのデザインをカスタマイズする上で特に使用頻度の高いCSSプロパティを、カテゴリー別に厳選して紹介します。これらの「道具」の役割と使い方を理解するだけで、あなたのブログの見た目は劇的に向上します。
✍️ 1. 文字とフォントの装飾 (Text and Font)
記事の読みやすさは、ブログの最も重要な要素です。適切なフォント、サイズ、色の設定は、読者のエンゲージメントに直接影響します。
- color (文字色)
-
テキストの色を指定します。
redのような色名や、#333333のような16進数カラーコードで指定します。真っ黒(#000)より、濃いグレー(#333)などを使うと、目が疲れにくく読みやすい記事になります。p { color: #333333; /* 濃いグレーで読みやすく */ } - font-size (文字サイズ)
-
文字の大きさを指定します。
px（ピクセル）のほか、rem（ルート要素を基準とした相対サイズ）がよく使われます。bodyで基準サイズを決め、見出しなどはremで指定すると、サイト全体の文字サイズ調整が簡単になります。body { font-size: 16px; /* サイト全体の基準となる文字サイズ */ } h1 { font-size: 2rem; /* 基準サイズ(16px)の2倍 = 32px */ } - font-weight (文字の太さ)
-
文字の太さを指定します。
normal（標準）やbold（太字）のほか、100〜900の数値でも指定できます（400がnormal、700がboldに相当）。strong { font-weight: bold; /* <strong>タグを（改めて）太字に */ } - font-family (フォントの種類)
-
フォントの種類を指定します。ここで重要なのが「フォントスタック」という考え方です。閲覧者の環境に指定したフォントが無い場合に備え、カンマ区切りで複数の候補を指定します。
body { /* 最初にヒラギノ角ゴ(Mac)、次にメイリオ(Win)、 どちらもなければゴシック体の汎用フォントを使用 */ font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; }なぜ複数のフォントを指定するの？
ウェブデザインでは「制作者は閲覧者の環境をコントロールできない」という事実があります。あなたが指定した美しいフォントも、読者のPCになければ表示されません。この「フォントスタック」は、「まずAを試して、ダメならB、それもダメならCを」とブラウザに指示する、WEBデザインの基本的なテクニックです。 - line-height (行の高さ)
-
行の高さを指定し、行間の余白を調整します。読みやすい文章のためには、文字サイズの1.5〜1.8倍程度（
1.5や1.8のように単位なしで指定）が推奨されます。p { line-height: 1.7; /* 単位なしで指定すると、文字サイズの1.7倍になる */ } - text-align (テキストの揃え)
-
テキストの水平方向の揃え位置（
left,center,rightなど）を指定します。h2 { text-align: center; /* 見出しを中央揃えに */ } - text-decoration (テキストの装飾)
-
テキストの下線や打ち消し線を指定します。ブログでは、リンク（
aタグ）のデフォルトの下線を消す際によく使われます。a { text-decoration: none; /* リンクの下線を消す */ }
🎨 2. 背景と色 (Background and Color)
要素の背景を設定することで、セクションを視覚的に区別したり、デザインにアクセントを加えたりできます。
- background-color (背景色)
-
要素の背景色を指定します。プロフィール欄や「あわせて読みたい」欄などに薄い色をつけると、メリハリが出ます。
.profile-box { background-color: #f5f5f5; /* プロフィール欄の背景を薄い灰色に */ } - background-image (背景画像)
-
要素の背景に画像を指定します。
url()の中に画像のパス（場所）を記述します。.hero-header { background-image: url('images/header-bg.jpg'); }
📏 3. サイズと余白（ボックスモデル）
CSSレイアウトの基本は「ボックスモデル」です。全てのHTML要素は長方形のボックスとして扱われ、そのボックスは「内側の余白(padding)」「境界線(border)」「外側の余白(margin)」を持ちます。
- width / height (幅と高さ)
-
要素の幅と高さを指定します。記事のサムネイル画像などで高さを揃えたい時に使います。
.post-thumbnail { width: 100%; /* 親要素の幅いっぱいに広げる */ height: 200px; } - margin (外側の余白)
-
ボックスの「外側」の余白です。要素と要素の間の距離を調整するために使います。
.post { margin-bottom: 40px; /* 記事と記事の間に40pxの下余白を設ける */ } - padding (内側の余白)
-
ボックスの「内側」（境界線とコンテンツの間）の余白です。ボタンやボックス内の窮屈さを解消するために使います。
.button { padding: 10px 20px; /* 上下10px、左右20pxの余白を設ける */ }
🌟 4. 枠線、角丸、影 (Effects)
要素に枠線や影を追加することで、デザインにメリハリや立体感を与えることができます。
- border (枠線)
-
枠線の太さ、種類（
solid実線,dashed破線など）、色をまとめて指定します。img { border: 1px solid #dddddd; /* 画像に1pxの細い実線の枠をつける */ } - border-radius (角丸)
-
ボックスの角を丸くします。値が大きいほど丸みが強くなり、柔らかい印象を与えます。
.tag-link { border-radius: 4px; /* タグの角を少し丸くする */ } - box-shadow (影)
-
要素に影をつけ、立体感を演出します。カード型デザインなどで要素を浮き上がって見せる効果があります。
.card { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* カードに薄い影をつける */ }
