【脱・初心者】CSSの基本とはてなブログでの書き方｜デザイン集中講座【第1回】

前回の連載で、HTMLの基本からiframeタグの使い方までマスターしましたね！いよいよ今回からは、ブログの「見た目」を劇的に変える魔法、CSS（カスケーディング・スタイル・シート）の世界へ飛び込みましょう。

【目次】Tomaのゲーム日記：HTML基礎講座シリーズはこちら

「HTMLはなんとなくわかったけど、どうやってデザインを変えるの？」という初心者の方に向けて、はてなブログでの具体的な書き方と基本ルールを解説します。

第1章：CSSとは？ブログにおける役割

HTMLがブログの「骨組み（見出しや本文）」を作るものだとしたら、CSSは「化粧や服（色やサイズ）」を整えるものです。

例えば、HTMLで書いた「見出し」に対して、「文字を大きくして、色を青くして、下に線を引きたい」といった命令を出すのがCSSの役割です。

第2章：はてなブログでCSSを書く場所

はてなブログには、CSSを書き込むための専用の場所が用意されています。以下の手順で開いてみてください。

1. 管理画面の「デザイン」をクリック
2. スパナのアイコン（カスタマイズ）をクリック
3. 一番下にある「デザインCSS」をクリック

ここに入力したコードが、ブログ全体に反映されるようになります。

第3章：CSSの基本構造：セレクタ・プロパティ・値

CSSは、以下の3つの要素を組み合わせて記述します。

セレクタ {
    プロパティ: 値;
}

• セレクタ：どこの（例：見出し、本文）
• プロパティ：何を（例：色、大きさ）
• 値：どうするか（例：赤にする、20pxにする）

第4章：実践！文字の色を変えてみよう

まずは最も簡単な、記事本文の文字色を変えるコードを書いてみましょう。以下のコードを「デザインCSS」にコピー＆ペーストしてみてください。

/* 記事本文の文字色を濃いグレーにする */
.entry-content {
    color: #333333;
}

「.entry-content」は、はてなブログで記事本文を指す特別な名前（クラス名）です。これを使うことで、記事の中身だけにデザインを適用できます。

まとめ：今回の振り返り

第1回は、CSSの役割とはてなブログでの記述場所について学びました。

最初から難しいことを覚える必要はありません。まずは「デザインCSSに書けば見た目が変わる」という感覚を掴むことが大切です。次回は、ブログの読みやすさを左右する「フォントサイズと余白」について解説します。お楽しみに！

【目次】Tomaのゲーム日記：HTML基礎講座シリーズはこちら

デザインを極めたい方へ

HTMLの次は、ブログの見た目を自由自在に操る「CSSデザイン集中講座」に挑戦してみませんか？ 初心者の方でも、全5回で理想のブログデザインに近づける構成になっています。

全5回で学ぶ！「CSSデザイン集中講座」全記事一覧はこちら