はじめての板芸 #3 ― 文字に色をつける

2026.07.22 その他

「はじめての板芸 #2 ― 最初のファイルを作る」の続きです。前回は文字を画面に表示させました。今回は、その文字に色や大きさをつけていきます。

1. styleで見た目を変える

前回作った「index.html」をテキストエディタで開いてください。中身はこうなっているはずです。

前回の内容

<meta charset="UTF-8">
<h1>こんにちは</h1>

見た目を変えるには、タグの中にstyle="〇〇"と書き足します。料理で言えば、食材（文字）に味付け（色や大きさ）をする工程です。

よくある間違い ― 全角スペースに注意

コードの中のスペースは、すべて半角スペースで書いてください。日本語入力がオンのままスペースキーを押すと全角スペース（　）が入ってしまい、色や大きさが反映されないことがあります。スペースを入力するときは、日本語入力をオフにしてから押すのが確実です。

h1タグを次のように書き換えてください。

書き換える内容

<meta charset="UTF-8">
<h1 style="color: #4a90d9;">こんにちは</h1>

保存したら、ブラウザで「index.html」を開き直してください（すでに開いている場合は再読み込み）。文字が青色に変わっていたら成功です。

#4a90d9は色の番号です。好きな色に変えてみてください。

色の番号の例

色と同じように、styleの中に大きさの指定を足します。

書き換える内容

<meta charset="UTF-8">
<h1 style="color: #4a90d9; font-size: 48px;">こんにちは</h1>

保存してブラウザで開き直してください。文字がさらに大きく表示されたら成功です。

48pxの数字を変えると大きさが変わります。24pxにすれば小さく、72pxにすればもっと大きくなります。好きな数字を試してみてください。

文字だけでなく、ページ全体の背景色も変えてみます。h1の下に1行足してください。

書き換える内容

<meta charset="UTF-8">
<h1 style="color: #4a90d9; font-size: 48px;">こんにちは</h1>
<body style="background: #fffdf7;">

保存してブラウザで開き直してください。背景が薄いクリーム色に変わっていたら成功です。

#fffdf7の部分を変えると、背景の色が変わります。先ほどの色の番号をここに使っても構いません。

次の一歩

次回は、キーボードで絵を描いてみます。丸や四角を組み合わせて、ページにちょっとしたアイコンを添えていきます！