CSSでホームページの文字色・背景色・文字サイズ変更を体験！初心者でも簡単に見た目を変えられる

「いつか自分だけのホームページを作ってみたい」

そう思ったことはありませんか？

しかし、いざ始めようとすると、こんな不安が浮かぶかもしれません。

「なんだか難しそうで、途中で挫折してしまいそう」
「おしゃれなホームページを作るには、特別なデザインセンスが必要なのでは？」
「プログラミング経験がない自分には難しいかもしれない」

新しいことを始めるとき、不安を感じるのは自然なことです。

でも、ホームページ制作の最初の一歩は、あなたが思っているほど難しいものではありません。

実は、ホームページの見た目を整える基本は、
「文字の色を変える」
「背景に色をつける」
「文字の大きさを調整する」

といった、シンプルな変更から始まります。

Webデザインは、こうした小さな工夫を積み重ねることで、少しずつ魅力的なページへと変化していきます。

ここでは、難しい専門知識を覚えることから始めるのではなく、実際に手を動かしながら「ホームページ作りって意外と楽しい」「これなら自分にもできそう」という感覚を体験していただきます。

必要なのはパソコンだけです。

まずはホームページの文字色や背景色、文字サイズを変えるところから、Web制作の楽しさを体験してみましょう。

その小さな成功体験が、Web業界への第一歩につながります。

ホームページの見た目をデザイン！文字色・背景色・文字サイズを1分で変更してみよう
WEB制作は思っているより簡単！あなたも今日から始めてみよう

ホームページの見た目をデザイン！文字色・背景色・文字サイズを1分で変更してみよう

「ホームページを作る」と聞くと、複雑なプログラムを書いたり、専門的な知識を覚えたりする必要があると思うかもしれません。

しかし、Webデザインの最初の一歩は、意外とシンプルです。

文字の色を変える。
背景の色を変える。
文字の大きさを変える。

このような小さな変更でも、ホームページの印象は大きく変わります。

ここでは、実際にコードを少し変更しながら、ホームページの見た目が変化する楽しさを体験してみます。

ホームページのデザイン変更に必要なのはパソコンだけ

ホームページのデザイン変更の体験に特別なソフトは必要ありません。

普段インターネットを見るために使っている Google Chrome や Safari などのブラウザには、ホームページの裏側を確認できる「検証機能（デベロッパーツール）」という便利な機能が最初から備わっています。

この機能を使うと、表示されているホームページの HTML や CSS を確認したり、一時的に書き換えてデザインの変化を試したりできます。

例えば、
文字の色を変える
背景の色を変える
文字の大きさを変える
といったホームページのデザイン変更を、その場で体験できます。

もちろん、実際のWebサイトを書き換えてしまうわけではありません。

自分のパソコン上で気軽に試せるため、「コードを変更すると画面が変わる」という Web制作の基本的な楽しさを体験することができます。

まずは難しく考えず、ホームページの見た目が変化する面白さを感じてください。

ホームページの文字色を変更してデザインを整えてみよう

まずは、ホームページに表示されている文字の色を変更してみます。
CSSを1行追加するだけで、文字の表示色を変えることができます。
変更前のHTML

<!DOCTYPE html>
<html>
 <head>
  <title>私のホームページ</title>
 </head>
<body>
 <p>Web制作を始めてみよう</p>
</body>
</html>

表示結果（変更前）

Web制作を始めてみよう

現在は黒い文字で表示されています。

ここに CSS を追加して文字色を変更します。
CSSを追加

<!DOCTYPE html>
<html>
 <head>
  <title>私のホームページ</title>
  <style>
  p {
    color: blue;
  }
  </style>
 </head>
<body>
 <p>Web制作を始めてみよう</p>
</body>
</html>

表示結果（変更後）

Web制作を始めてみよう

文字色が青色になりました。
たった1行のコードを書き換えるだけで、目の前のホームページのデザインが変わります。

ホームページの背景色を変更して雰囲気を変えてみよう

次は、背景の色を変更してみます。
CSS で背景色を指定すると、ページの背景部分を変更できます。
変更前のHTML

<!DOCTYPE html>
<html>
 <head>
  <title>私のホームページ</title>
 </head>
<body>
 <p>白い背景のシンプルなページ</p>
</body>
</html>

表示結果（変更前）

白い背景のシンプルなページ

ここに CSS を追加して背景色を変更します。
CSSを追加

<!DOCTYPE html>
<html>
 <head>
  <title>私のホームページ</title>
  <style>
  p {
    background-color: #00F6FF;
  }
  </style>
 </head>
<body>
 <p>白い背景のシンプルなページ</p>
</body>
</html>

表示結果（変更後）

白い背景のシンプルなページ

background-colorに色を指定すると、背景が変わりました。
少しコードを追加するだけで、表示されるホームページを変更できることが分かります。

ホームページの文字サイズを変更して見やすくデザインしよう

最後に、文字の大きさを変更してみます。
CSS で文字サイズを指定すると、表示される文字の大きさを変更できます。
変更前のHTML

<!DOCTYPE html>
<html>
 <head>
  <title>私のホームページ</title>
 </head>
<body>
 <p>Web制作を始めてみよう</p>
</body>
</html>

表示結果（変更前）

Web制作を始めてみよう

ここに CSS を追加して文字サイズを変更します。
CSSを追加

<!DOCTYPE html>
<html>
 <head>
  <title>私のホームページ</title>
  <style>
  p {
    font-size: 36px;
  }
  </style>
 </head>
<body>
 <p>Web制作を始めてみよう</p>
</body>
</html>

表示結果（変更後）

Web制作を始めてみよう

font-sizeの数字を変更すると、表示される文字の大きさが変わりました。
このように、CSSでは文字の見た目を細かく変更できます。

ホームページの文字色・背景色・文字サイズを変更して見やすくデザインしよう

文字色・背景色・文字サイズを全て同時に変更してみます。
変更前のHTML

<!DOCTYPE html>
<html>
 <head>
  <title>私のホームページ</title>
 </head>
<body>
 <p>Web制作を始めてみよう</p>
</body>
</html>

表示結果（変更前）

Web制作を始めてみよう

ここに CSS を追加して文字色・背景色・文字サイズを変更します。
CSSを追加

<!DOCTYPE html>
<html>
 <head>
  <title>私のホームページ</title>
  <style>
  p {
    color: blue;
    background-color: #00F6FF;
    font-size: 36px;
  }
  </style>
 </head>
<body>
 <p>Web制作を始めてみよう</p>
</body>
</html>

表示結果（変更後）

Web制作を始めてみよう

WEB制作は思っているより簡単！あなたも今日から始めてみよう

「ホームページを作るなんて、やっぱり専門的なセンスや頭の良さが必要なのでは？」
そう思うかもしれませんが、WEB制作の仕組みは驚くほど合理的でシンプルです。

1.WEBの言語は「役割の指定と装飾」の組み合わせ
ホームページを作るための「HTML」や「CSS」は、複雑な計算を行うプログラミング言語とは根本的に異なります。
その仕組みは非常に合理的で、「文章に役割を与える（HTML）」 ➔「その役割ごとに見た目を変える（CSS）」という、シンプルな2つの指示の組み合わせだけで成り立っています。