未経験プログラマー物語【第二章 研修編②】CSSで文字色を変える
次の課題はCSSを使って文字色を変えるというものだった。
<!DOCTYPE html>
<html>
<head>
<title>Hello tab</title>
</head>
<body>
<p>Hello, world</p>
</body>
</html>
前回までのHTMLはこう。今回はHello, worldの色を赤に変えてる。
「なんだ簡単じゃーん」そういってハジメは早速コードを書いてみる。
<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
</head>
<body>
<font color=”#ff0000″>Hello, world</font>
</body>
</html>
「Hello, worldの前にfontというタグをつけてcolorで#ff0000（赤）を指定している。ちょっとググればすぐにできるじゃん」
得意気に提出したところ、回答としてはバツ。なぜなら『CSS』を使っていないから。
「えーなんでわざわざそんな面倒なことをするんだ？文字が赤くなってるからいいじゃないか」
納得がいかないハジメだった…。
解説
ハジメ君のいうとおりタグを使うことで文字の色を変えることは可能です。今回は文字がひとつしかない画面だからいいです。でも皆さんが見ているホームページって文字がぽつんとあるだけではないですよね？
例えばyahooのトップページなんかは色々なコンテンツが所狭しと並んでいます。これをひとつひとつタグで文字色を設定していたらとても大変です。もしかしたら変更漏れがあるかもしれません。そういう時にCSSを使いまとめて文字色を変えることが出来ます。
※ちなみにハジメが使ったfont color=”#ff0000″の書き方は最近では非推奨ですのであまり真似しないようにしてください。環境によっては適用されません。
以下が模範解答になります。
<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
</head>
<body>
<p class=”font_test”>Hello, world</p>
</body>
</html>
<style>
p.font_test {
color: #ff0000;
}
</style>
まず<style>以下が増えました。<style>～<style>で囲むとこの間はCSSだよと宣言していることになります。
そしてp.font_test というのがCSSで指定するスタイルの塊の名前になります。そしてcolor: #ff0000;で赤を指定します。
HTMLに戻り
<p>Hello, world</p>
を
<p class=”font_test”>Hello, world</p>
のように変更します。class=”font_test”をつけることでCSSのfont_testという名前を指定していることになります。””を忘れないようにしましょう。
実際にこのコードをメモ帳なりに張り付けて拡張子を.htmlにし、ブラウザにドラッグすると赤文字のHello, worldが表示されたと思います。
また、CSSは当然ながら文字色の変更だけでなく文字の大きさ、背景色など色々な指定をすることができますので気になった方は調べてみてください。
CSSをつかって課題をクリアできたハジメ。
「CSSで効果をまとめると便利だな。今度からはちゃんとCSSをつかおうっと」
まだまだ一人前のプログラマーへの道は遠そうです…。
関連記事
- soon
1986年生まれのjavaプログラマー。28歳の時に7年働いた販売士からプログラマーに転職をする。常駐先を転々としながら日々生きています。
- 現状整理の日記 2023-03-15
- おやすみ、世界。 2023-02-11
- 動画投稿に時間を割いてしまう 2022-08-31
- 7月の日記 2022-07-06
- 更新していなかった間にしていたこと 2022-06-23