色と背景の設定

このページでは、ウェブページの色と背景の設定方法について学びます。色は、文字や背景の見た目を変更するだけでなく、ウェブページの印象を大きく変えることができます。背景は、単色や画像などでページ全体の雰囲気を変えることができます。

色の指定には、色名、RGB、HEX、HSLなどの方法があります。CSSでは、colorプロパティを使って文字色を指定し、background-colorプロパティを使って背景色を指定します。例えば、以下のように指定できます。

<style>
  p {
    color: red;
    background-color: #f0f0f0;
  }
</style>

上記のコードでは、段落（<p>）要素の文字色を赤にし、背景色を明るい灰色に設定しています。

背景画像は、CSSのbackground-imageプロパティを使って指定します。画像ファイルのURLを指定することで、ページの背景に画像を表示できます。例えば、以下のように指定できます。

<style>
  body {
    background-image: url('example.jpg');
  }
</style>

上記のコードでは、body要素の背景にexample.jpgという画像を表示しています。必要に応じて、background-repeatやbackground-positionなどのプロパティで繰り返しや位置の調整ができます。

これで、色と背景の設定方法について学ぶことができました。色や背景を調整することで、ウェブページの印象を変えることができます。次のページでは、ボックスモデルとレイアウトについて学んでいきましょう。

練習問題