CSS初心者が最初に覚えたいborder・background-color・colorの使い方｜ブログ装飾で学んだこと

# CSS初心者が最初に覚えたいborder・background-color・colorの使い方｜ブログ装飾で学んだこと

CSSの演習で、コメントアウト、border、background-color、colorを学びました。

CSSは、Webページの見た目を整えるための言語です。

文字の色を変えたり、背景に色をつけたり、枠線で囲んだりすることで、同じ文章でも読みやすさが変わります。

ブログを書いていると、どうしても文章の内容ばかりに目が向きがちです。

でも、読者にとっては「読みやすい見た目」も大切です。

この記事では、CSS初心者が最初に覚えておきたい基本プロパティと、ブログ装飾に使いやすい簡単なコード例を紹介します。

CSS初心者｜border・background-color・colorの基本

まずは、今回の演習で学んだ4つの基本プロパティを順番に整理します。

CSSのコメントアウトはメモとして使えます

CSSでは、コメントアウトを使ってメモを残せます。

/* ここにコメントを書きます */

コメントアウトした部分は、ページの見た目には反映されません。

コードが増えてくると、「この指定は何のために書いたのか」が分からなくなることがあります。

そんなときにコメントを残しておくと、あとから見返したときに理解しやすくなります。

初心者のうちは、少し多めにメモを残しておくくらいでちょうどよいと感じました。

borderを使うと、内容のまとまりが見やすくなります

borderは、要素に枠線をつけるためのプロパティです。

.box {
  border: 1px solid #333333;
}

この指定では、太さ1pxの実線を、濃いグレーで表示します。

ブログでは、補足説明や注意点を囲むときに使いやすいです。

文章だけが続いているページでも、枠線があるだけで「ここは大事な部分です」と伝えやすくなります。

ブラウザの余白をリセットする全称セレクタの話は、CSS初心者が「*」の意味を理解した日｜全称セレクタでブラウザの余白をリセットにまとめています。

background-colorで背景色を変えられます

background-colorは、背景色を指定するプロパティです。

.box {
  background-color: #f5f5f5;
}

背景色を少し変えるだけで、ページの印象は大きく変わります。

特に、見出し下の説明文や補足のボックスに使うと、読みやすくなります。

ただし、色を強くしすぎると、かえって読みにくくなることもあります。

初心者のうちは、白に近いグレーや淡い色から試すのがおすすめです。

colorで文字色を変えられます

colorは、文字の色を指定するプロパティです。

p {
  color: #333333;
}

色は、16進数で指定できます。

たとえば、#333333は濃いグレーです。

#000000は黒、#ffffffは白を表します。

ブログ本文では、真っ黒よりも少しやわらかい濃いグレーを使うと、読みやすく感じることがあります。

文字色は目立たせるためだけでなく、読者が疲れにくい見た目にするためにも大切だと感じました。

CSS border｜ブログで使いやすい囲み枠の例

ここでは、4つのプロパティを組み合わせて作った囲み枠の例を紹介します。

今回学んだborder、background-color、colorを組み合わせると、ブログで使える囲み枠を作れます。

.point-box {
  border: 1px solid #dddddd;
  background-color: #f9f9f9;
  color: #333333;
  padding: 16px;
}

HTMLでは、次のように使えます。

<div class="point-box">
  ここに補足説明や大事なポイントを書きます。
</div>

このように指定すると、薄いグレーの枠線と背景色がついた、やさしい印象のボックスになります。

補足説明、注意点、まとめたいポイントなどに使いやすい形です。

CSSは、見た目を華やかにするためだけのものではありません。

読者が迷わず読めるようにするための工夫でもあります。

ここが、今回の学習で一番おもしろいと感じたところです。

CSSの行間の考え方は、CSSの行間はただの余白ではなかった｜初心者がline-heightを学んでスッキリした話で紹介しています。

CSS初心者｜JPEG・GIF・PNGの使い分けもブログ運営に役立つ

CSSの装飾とあわせて、画像形式についても学びました。

JPEG、GIF、PNGは、それぞれ得意な使い方が違います。

JPEGは、写真のように色の変化が多い画像に向いています。

風景写真、人物写真、作業中の写真などはJPEGが使いやすいです。

GIFは、色数が少ない画像や、簡単なアニメーションに使われることがあります。

PNGは、ロゴ、図解、文字入り画像、背景を透明にしたい画像に向いています。

ブログでは、写真ならJPEG、図解や文字入り画像ならPNG、簡単な動きが必要ならGIFと覚えておくと分かりやすいです。

最初から完璧に使い分けようとしなくても大丈夫です。

ブログを書きながら、少しずつ使い分けを覚えていけばよいと思いました。

CSS学習法｜小さく試すのが一番

最後に、CSSを学び始めたばかりの人におすすめしたい進め方をまとめます。

CSSを学び始めたばかりのときは、最初からきれいなデザインを作ろうとしなくても大丈夫です。

まずは、1つのプロパティを実際に書いてみることが大切です。

今日は文字色を変えてみる。

次は背景色をつけてみる。

その次は枠線をつけてみる。

このように小さく試していくと、CSSの役割が少しずつ分かってきます。

過去の自分を振り返ると、「前は分からなかったことが、今は少し分かるようになっている」と感じられます。

この感覚があると、学習は続けやすくなります。

classとidの使い分けについては、CSS初心者がclassとidの違いを学んで気づいたことに書きました。

まとめ

今回は、CSSの基本として、コメントアウト、border、background-color、colorを学びました。

枠線や背景色、文字色を少し変えるだけで、ブログの読みやすさは変わります。

また、JPEG・GIF・PNGの違いを知ることで、ブログ画像も目的に合わせて使いやすくなります。

CSSは、いきなり完璧に覚える必要はありません。

まずは、自分のブログの見出し下や補足ボックスに、1つだけ装飾を入れてみましょう。

小さく試して、少しずつ積み上げていくことが、成長につながります。

職業訓練が50代にとってきついのかどうかは、職業訓練は50代にきついか｜片道2時間・月18日の5ヶ月で振り返っています。

最後までお読みいただき、ありがとうございました。

• CSSの行間はただの余白ではなかった｜初心者がline-heightを学んでスッキリした話
• CSS初心者がclassとidの違いを学んで気づいたこと
• 職業訓練は50代にきついか｜片道2時間・月18日の5ヶ月