こんにちは、grillon designです。
未経験からWeb制作を学ぶ100日チャレンジ、9日目になりました。
前回のDAY8では、CSSとは何か、HTMLとCSSの役割の違い、そしてCSSの基本的な書き方について勉強しました。
今回はその続きとして、実際にCSSを書きながら、
- 文字色を変える
- 背景色を変える
- 文字サイズを変える
- 文字を太くする
- 文字を中央に揃える
という練習をしてみました。
まだまだCSS初心者ですが、コードを少し変更するだけで画面の見た目が変わっていくのが面白くて、少しずつWeb制作の楽しさが分かってきました。
この記事では、今回実際に使ったCSSのプロパティと、初心者の私がつまずいたポイントをまとめていきます。
CSSで文字や背景の見た目を変えてみる
CSSの基本的な書き方が少し分かってきたところで、今回は実際にコードを書いて、Webページの見た目を変える練習をしました。
今回使ったのは、次の5つです。
| プロパティ | できること |
|---|---|
color | 文字色を変える |
background-color | 背景色を変える |
font-size | 文字サイズを変える |
font-weight | 文字の太さを変える |
text-align | 文字の位置を揃える |
名前だけ見ると少し難しく感じますが、実際に使ってみると意外とシンプルでした。
CSSは最初から全部覚えようとしなくて大丈夫！
「文字を赤くしたい」「文字を大きくしたい」など、やりたいことから少しずつ覚えていけばOKです。
background-colorで背景色を変える
まずは、ページ全体の背景色を変えてみました。
CSSではbackground-colorを使うことで、背景に色をつけることができます。
body {
background-color: #f5f5f5;
}
今回は#f5f5f5という薄いグレーを指定しました。
真っ白だった背景が薄いグレーになるだけで、ページ全体の雰囲気が少し柔らかくなりました。
たった1行追加しただけなのに、見た目が変わるのが面白いです。
CSSの色はどうやって指定する？
CSSで色を指定する方法には、いくつか種類があります。
例えば、
color: white;
のようにカラーネームを使ったり、
color: #333;
のように16進数で指定したり、
color: rgb(51, 51, 51);
のようにrgb()を使ったりできます。
今回はまだ勉強を始めたばかりなので、16進数での色指定を使ってみました。
色の指定方法だけでもいろいろあるんですね。
colorで文字色を変える
次に試したのがcolorです。
colorは、文字の色を指定するプロパティです。
今回は見出しのh1に、
h1 {
color: #333;
}
と指定しました。
#000なら真っ黒ですが、今回は少し柔らかい印象になる#333を使ってみました。
真っ黒から少しグレーに変えるだけでも、意外と印象が違います。
普段何気なく見ているWebサイトでも、文字色を真っ黒ではなく少しグレーにしているサイトがあります。
「こういう細かい部分もCSSで調整しているんだな」と、Webサイトを見る目も少し変わってきました。
font-sizeで文字サイズを変える
次はfont-sizeです。
font-sizeは、文字の大きさを指定するプロパティです。
今回は見出しを32px、本文を16pxにしました。
h1 {
font-size: 32px;
}
p {
font-size: 16px;
}
見出しを大きくすることで、本文との間にメリハリがつきます。
実際に表示してみると、
「おお、ちゃんと見出しっぽくなった！」
という感じでした（笑）。
文字の大きさを変えるだけでも、どこが重要なのかが視覚的に分かりやすくなるんですね。
px以外にも単位がある？
ここで気になったのがpxという単位です。
調べてみると、CSSにはpx以外にも、
emrem%vwvh
など、さまざまな単位があることが分かりました。
……多い！（笑）
まだそれぞれの違いをしっかり理解できているわけではありません。
今回はまずpxを使って、CSSの基本を覚えることにしました。
px・em・remの違いについては、これからの学習で詳しく勉強していきたいと思います。
font-weightで文字を太くする
続いてはfont-weightです。
これは文字の太さを指定するプロパティです。
例えば、
h1 {
font-weight: bold;
}
とすると、文字を太字にできます。
見出しを目立たせたいときなどに使えそうですね。
そして、ここで一つ疑問が出てきました。
「boldと700って何が違うの？」
せっかくなので調べてみました。
font-weightのboldと700は何が違う？
font-weightでは、文字の太さをキーワードや数値で指定できます。
例えば、
font-weight: 400; /* 通常 */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* 太字 */
というように指定できます。
一般的には、
400→ 通常700→ 太字
というイメージです。
一方で、
font-weight: bold;
と書くこともできます。
boldは基本的に700相当の太さを表します。
「とりあえず太字にしたい！」ならboldでOK。
「少しだけ太くしたい」「もっと細かく調整したい」という場合は、数値指定が便利です。
今の私には、まず
「boldでも700でも太字にできる」
と覚えておくくらいでよさそうです。
細かいデザインをするときには、数値で調整する場面も増えていきそうですね。
text-alignで文字を中央に揃える
最後に試したのがtext-alignです。
今回は見出しを中央に揃えるため、
h1 {
text-align: center;
}
と指定しました。
すると、見出しが中央に移動します。
左寄せの状態と比べると、中央に揃えるだけでかなりタイトルらしい見た目になりました。
CSSって、本当に1行追加するだけでも見た目が変わるんですね。
DAY9で実際に書いたCSS
今回学んだことをまとめると、最終的にこんなCSSになりました。
body {
background-color: #f5f5f5;
}
h1 {
color: #333;
font-size: 32px;
font-weight: bold;
text-align: center;
}
p {
font-size: 16px;
}
CSSで文字色・背景色・文字サイズなどを変更した完成画面
実際にCSSを適用すると、こんな見た目になりました。
bodyには薄いグレーの背景色をつけて、h1には文字色・文字サイズ・文字の太さ・中央寄せを指定しています。
そして本文のpは16pxにしています。
まだまだシンプルなCSSですが、何も指定していない状態と比べると、ページの印象がかなり変わりました。
「コードを書いたら、本当に見た目が変わった！」
というのが、今回の学習でちょっと嬉しかったポイントです。
CSS初心者がつまずいたポイント
今回、意外と難しいと感じたのが、プロパティ名を覚えることでした。
例えば、
font-sizeは文字の大きさ。
font-weightは文字の太さ。
名前を見れば何となく分かるのですが、実際にコードを書いていると、
「太さってどっちだっけ？」
となることがあります（笑）。
まだ勉強を始めたばかりなので、すべて暗記するのは難しいです。
そこで、
「分からなかったら調べながら書く」
ことにしました。
一度調べて実際に使ってみると、次に同じプロパティが出てきたときに少し思い出せます。
最初から完璧に覚えようとせず、実際に手を動かしながら覚えていく方が、私には合っていそうです。
CSSは少し変えるだけでも面白い
今回CSSを実際に触ってみて感じたのは、
「ほんの少しコードを変えるだけで、Webページの印象が変わる」
ということです。
背景色を変える。
文字色を変える。
文字を大きくする。
太字にする。
中央に揃える。
一つひとつは簡単な指定でも、組み合わせることでページ全体の雰囲気が変わります。
HTMLを書いていたときよりも、
「Webサイトを作っている！」
という感覚が少し強くなってきました。
これは結構楽しいです。
DAY9のまとめ
今回はCSSを使って、Webページの文字や背景の見た目を変える練習をしました。
今回覚えたことは、
color→ 文字色を変えるbackground-color→ 背景色を変えるfont-size→ 文字サイズを変えるfont-weight→ 文字の太さを変えるtext-align→ 文字の位置を揃えるfont-weightはboldだけでなく数値でも指定できる- CSSには
pxやem、remなどさまざまな単位がある
ということ。
特に今回実感したのは、CSSは1つのプロパティを追加するだけでも、Webページの印象を大きく変えられるということでした。
まだ分からないこともたくさんありますが、
「この見た目にしたいなら、どのCSSを使えばいいんだろう？」
と考えるようになってきたことが嬉しいです。
100日チャレンジは、まだ9日目。
先はまだまだ長いですが、焦らず一つずつ「分からない」を「分かった」に変えていきたいと思います。
明日はさらにCSSのプロパティを増やしながら、今回気になった**px・em・remなどの単位の違い**についても勉強していく予定です。
未経験からWeb制作を学ぶ100日チャレンジ。
明日もコツコツ頑張ります！
コメント