第4回まで、文字の装飾や見出しのデザインなど、CSSのさまざまなテクニックを学んできました。いよいよ今回がCSS編の最終回です！
テーマは、今の時代に避けては通れない「レスポンシブデザイン（スマホ対応）」。パソコンで見ると綺麗なのに、スマホで見るとデザインが崩れている…そんな悩みを解決する魔法のコードを覚えましょう。
第14章：なぜスマホ対応が必要なのか？
現在のブログ読者の多くは、隙間時間にスマホからアクセスしています。PC向けの大きな文字や広い余白が、スマホ画面では逆に読みづらさの原因になることもあります。
デバイスの横幅に合わせてデザインを切り替える仕組みを「メディアクエリ（Media Queries）」と呼びます。
第15章：魔法の呪文「@media」の使い方
CSSの中に以下のコードを書くことで、「画面幅が〇〇px以下の時だけ、このデザインを適用する」という命令が出せます。
/* 画面幅が768px以下（主にスマホ・タブレット）の場合 */
@media screen and (max-width: 768px) {
.entry-content {
font-size: 16px; /* スマホでは少し文字を小さく */
}
.entry-content h2 {
padding: 8px; /* 余白をスリムにして画面を有効活用 */
}
}
このように、基本のデザインの下に@mediaを書き加えるのが一般的なルールです。
第16章：スマホで「画像をはみ出させない」コツ
初心者の方がよく直面するのが、「大きな画像がスマホの画面を突き抜けて横スクロールが発生してしまう」問題です。これを防ぐには、画像に対して以下の指定をしておきましょう。
/* 全ての画像を画面幅に収める */
img {
max-width: 100%;
height: auto;
}
これを書いておくだけで、どんなサイズの画像も、読者の持っているデバイスの幅に合わせて自動で縮小されます。エンジニアがUIを組む際の鉄板設定ですね。
まとめ：CSSでブログはもっと楽しくなる！
全5回にわたるCSSデザイン集中講座、お疲れ様でした！
最初は「難しそう」と感じていたコードも、自分で書いてブログが変わる瞬間を体験すれば、どんどん楽しくなってくるはずです。デザインは一度完成したら終わりではなく、「読者の反応を見ながら改善し続ける」ことが大切です。
HTMLとCSSという2つの武器を手に入れたあなたのブログが、これからどう進化していくのか楽しみにしています！
【目次】Tomaのゲーム日記：HTML基礎講座シリーズはこちら
デザインを極めたい方へ
HTMLの次は、ブログの見た目を自由自在に操る「CSSデザイン集中講座」に挑戦してみませんか？ 初心者の方でも、全5回で理想のブログデザインに近づける構成になっています。
