CSSを少し触るだけで、ブログは読みやすくなります
CSSの演習で、コメントアウト、border、background-color、colorを学びました。
CSSは、Webページの見た目を整えるための言語です。
文字の色を変えたり、背景に色をつけたり、枠線で囲んだりすることで、同じ文章でも読みやすさが変わります。
ブログを書いていると、どうしても文章の内容ばかりに目が向きがちです。
でも、読者にとっては「読みやすい見た目」も大切です。
この記事では、CSS初心者が最初に覚えておきたい基本プロパティと、ブログ装飾に使いやすい簡単なコード例を紹介します。
CSSのコメントアウトはメモとして使えます
CSSでは、コメントアウトを使ってメモを残せます。
/* ここにコメントを書きます */コメントアウトした部分は、ページの見た目には反映されません。
コードが増えてくると、「この指定は何のために書いたのか」が分からなくなることがあります。
そんなときにコメントを残しておくと、あとから見返したときに理解しやすくなります。
初心者のうちは、少し多めにメモを残しておくくらいでちょうどよいと感じました。
borderを使うと、内容のまとまりが見やすくなります
borderは、要素に枠線をつけるためのプロパティです。
.box {
border: 1px solid #333333;
}この指定では、太さ1pxの実線を、濃いグレーで表示します。
ブログでは、補足説明や注意点を囲むときに使いやすいです。
文章だけが続いているページでも、枠線があるだけで「ここは大事な部分です」と伝えやすくなります。
background-colorで背景色を変えられます
background-colorは、背景色を指定するプロパティです。
.box {
background-color: #f5f5f5;
}背景色を少し変えるだけで、ページの印象は大きく変わります。
特に、見出し下の説明文や補足のボックスに使うと、読みやすくなります。
ただし、色を強くしすぎると、かえって読みにくくなることもあります。
初心者のうちは、白に近いグレーや淡い色から試すのがおすすめです。
colorで文字色を変えられます
colorは、文字の色を指定するプロパティです。
p {
color: #333333;
}色は、16進数で指定できます。
たとえば、#333333は濃いグレーです。
#000000は黒、#ffffffは白を表します。
ブログ本文では、真っ黒よりも少しやわらかい濃いグレーを使うと、読みやすく感じることがあります。
文字色は目立たせるためだけでなく、読者が疲れにくい見た目にするためにも大切だと感じました。
ブログで使いやすい囲み枠の例
今回学んだborder、background-color、colorを組み合わせると、ブログで使える囲み枠を作れます。
.point-box {
border: 1px solid #dddddd;
background-color: #f9f9f9;
color: #333333;
padding: 16px;
}HTMLでは、次のように使えます。
<div class="point-box">
ここに補足説明や大事なポイントを書きます。
</div>このように指定すると、薄いグレーの枠線と背景色がついた、やさしい印象のボックスになります。
補足説明、注意点、まとめたいポイントなどに使いやすい形です。
CSSは、見た目を華やかにするためだけのものではありません。
読者が迷わず読めるようにするための工夫でもあります。
ここが、今回の学習で一番おもしろいと感じたところです。
JPEG・GIF・PNGの違いもブログ運営に役立ちます
画像形式についても学びました。
JPEG、GIF、PNGは、それぞれ得意な使い方が違います。
JPEGは、写真のように色の変化が多い画像に向いています。
風景写真、人物写真、作業中の写真などはJPEGが使いやすいです。
GIFは、色数が少ない画像や、簡単なアニメーションに使われることがあります。
PNGは、ロゴ、図解、文字入り画像、背景を透明にしたい画像に向いています。
ブログでは、写真ならJPEG、図解や文字入り画像ならPNG、簡単な動きが必要ならGIFと覚えておくと分かりやすいです。
最初から完璧に使い分けようとしなくても大丈夫です。
ブログを書きながら、少しずつ使い分けを覚えていけばよいと思いました。
CSS学習は小さく試すのが一番です
CSSを学び始めたばかりのときは、最初からきれいなデザインを作ろうとしなくても大丈夫です。
まずは、1つのプロパティを実際に書いてみることが大切です。
今日は文字色を変えてみる。
次は背景色をつけてみる。
その次は枠線をつけてみる。
このように小さく試していくと、CSSの役割が少しずつ分かってきます。
過去の自分を振り返ると、「前は分からなかったことが、今は少し分かるようになっている」と感じられます。
この感覚があると、学習は続けやすくなります。
まとめ
今回は、CSSの基本として、コメントアウト、border、background-color、colorを学びました。
枠線や背景色、文字色を少し変えるだけで、ブログの読みやすさは変わります。
また、JPEG・GIF・PNGの違いを知ることで、ブログ画像も目的に合わせて使いやすくなります。
CSSは、いきなり完璧に覚える必要はありません。
まずは、自分のブログの見出し下や補足ボックスに、1つだけ装飾を入れてみましょう。
小さく試して、少しずつ積み上げていくことが、成長につながります。
コメント