第1回では、CSSを書き込む場所と基本的なルールについて学びましたね。場所さえ分かれば、あとは「どこを」「どう変えるか」の命令を積み上げていくだけです。
第2回となる今回は、ブログの「読みやすさ」を劇的に改善するフォントサイズと余白（マージン・パディング）の魔法について解説します。文字が詰まっていて読みづらい…と感じている方は必見ですよ！
第5章：読みやすさの基本！フォントサイズの調整
標準の設定だと、文字が小さすぎて読者が疲れてしまうことがあります。エンジニアがドキュメントを作成する際もそうですが、適切な文字サイズは情報の吸収率を変えます。
はてなブログの本文サイズを調整するには、以下のコードを使います。
/* 記事本文の文字サイズを大きくする */
.entry-content {
font-size: 17px;
line-height: 1.8; /* 行間も広げて読みやすく */
}
「line-height」は行と行の間の広さです。ここを少し広げるだけで、画面全体の圧迫感が消え、スラスラ読めるようになります。
第6章：デザインの要！「外側の余白」と「内側の余白」
CSSで最も重要な概念の一つが「ボックスモデル」です。すべての要素は四角い箱（ボックス）に入っており、その周りには2種類の余白が存在します。
- margin（マージン）：要素の外側にある余白。隣の要素との距離を決めます。
- padding（パディング）：要素の内側にある余白。枠線と文字の間の距離を決めます。
例えば、見出しの上下に隙間を作って目立たせたい時は、このように書きます。
/* 大見出し(h2)の上下に余白を作る */
.entry-content h2 {
margin-top: 40px; /* 上の余白 */
margin-bottom: 20px; /* 下の余白 */
padding: 10px; /* 内側の余白 */
}
第7章：ゲームのUIに学ぶ「情報の整理」
ゲームのステータス画面を思い出してみてください。HPやMP、スキル説明が読みやすいのは、適切な「余白」があるからです。情報と情報の間に隙間があることで、読者の目は迷わずに済みます。
ブログも同じです。段落（pタグ）の後に少し広めのmargin-bottomを設定するだけで、プロっぽい仕上がりになります。
/* 段落の後の余白を調整 */
.entry-content p {
margin-bottom: 1.5em; /* 1文字分＋αの余白 */
}
まとめ：余白を使いこなして脱・初心者！
今回は、文字サイズと2種類の余白について学びました。
デザインとは「飾ること」だと思われがちですが、実は「適切な隙間を作ること」こそが最大のテクニックです。自分のブログを眺めてみて、「ちょっと窮屈だな」と感じる場所に余白を足してみてくださいね。
次回は、クリック率を左右する「ボタンとリンク」の装飾術に挑戦します！
【目次】Tomaのゲーム日記：HTML基礎講座シリーズはこちら
デザインを極めたい方へ
HTMLの次は、ブログの見た目を自由自在に操る「CSSデザイン集中講座」に挑戦してみませんか？ 初心者の方でも、全5回で理想のブログデザインに近づける構成になっています。
