はじめに
CSS のカラーと背景に関する実験へようこそ！ウェブデザインにおいて、色と背景は視覚的に魅力的でユーザーフレンドリーなウェブサイトを作成するための基本です。これらは、トーンを設定し、可読性を向上させ、ユーザーの注意を導くのに役立ちます。
この実験では、要素の外観を制御するために使用される最も一般的な CSS プロパティのいくつかについて実践的な経験を積むことができます。背景色の設定方法、テキスト色の適用方法、背景画像の利用方法、そしてそれらの画像が表示される方法の制御方法を学びます。以下のプロパティについて説明します：background-color、color、background-image、background-repeat、およびbackground-position。
この実験の終わりには、ウェブページのカラーと背景のスタイリング方法について確かな理解を得られるでしょう。
16 進数コードを使用して background-color プロパティを設定する
このステップでは、ページ全体の背景色を変更する方法を学びます。background-colorプロパティと 16 進数（hex）カラーコードを使用します。Hex コードはウェブ開発で色を表現する一般的な方法で、#で始まり、その後に 6 つの文字（0-9、a-f）が続きます。
まず、styles.cssファイルを編集する必要があります。このファイルは、WebIDE の左側にあるファイルエクスプローラーで見つけることができます。
styles.cssファイルをクリックして、エディタで開きます。- 以下の CSS ルールを追加して、
<body>要素の背景色を設定します。これにより、スタイルがページ全体に適用されます。
body {
background-color: #f0f8ff;
}
このルールはbody要素を選択し、その背景色を「AliceBlue」として知られる薄い青色に設定します。
コードを追加した後、ファイルを保存します（Ctrl+SまたはCmd+Sを使用できます）。変更を確認するには、インターフェースの上部にあるWeb 8080タブをクリックします。ページの背景が白から薄い青色に変わっているはずです。
RGB 値で color プロパティを適用する
背景色を設定したので、メインの見出しテキストの色を変更しましょう。ここでは、要素のテキストコンテンツの色を設定するcolorプロパティを使用します。これにはrgb()カラーフォーマットを使用します。
rgb()関数は、赤（Red）、緑（Green）、青（Blue）の各コンポーネントを使用して色を定義し、各値は 0 から 255 の範囲です。
引き続きstyles.cssファイルを編集します。
<h1>要素を対象とする新しい CSS ルールを追加します。- このルール内で、
colorプロパティをrgb(60, 60, 60)を使用して濃い灰色に設定します。
以下のコードをstyles.cssファイルに追加してください。
h1 {
color: rgb(60, 60, 60);
}
ファイルを保存し、Web 8080タブに切り替えて変更をプレビューします。「Welcome to LabEx」の見出しが濃い灰色になり、薄い青色の背景に対して際立つはずです。
url を使用して background-image プロパティを使用する
CSS では、単色に加えて画像も背景として使用できます。この目的のためにbackground-imageプロパティが使用されます。画像パスはurl()関数を使用して指定します。
このステップでは、ページのbodyに背景画像を追加します。セットアップスクリプトは、プロジェクトディレクトリにlabex.svgという名前の画像ファイルを既に作成しています。
styles.cssファイルに戻ります。- 既存の
bodyルールを変更して、background-imageプロパティを追加します。
bodyセレクタの波括弧内に次の行を追加します。
body {
background-color: #f0f8ff;
background-image: url("labex.svg");
}
ファイルを保存した後、Web 8080タブを確認します。画像（labex.svg）がページに表示されていることに気づくでしょう。デフォルトでは、背景画像は要素全体を埋めるために水平方向と垂直方向の両方に繰り返されます。次のステップでは、この動作を制御する方法を学びます。
background-repeat プロパティに no-repeat を実装する
前のステップで見たように、背景画像はデフォルトで繰り返されます。background-repeatプロパティを使用すると、この動作を制御できます。このプロパティは、repeat（デフォルト）、repeat-x（水平方向に繰り返す）、repeat-y（垂直方向に繰り返す）、no-repeatなど、いくつかの値を取ることができます。
このステップでは、背景画像の繰り返しを防止します。
styles.cssファイルでbodyルールの編集を続けます。background-repeatプロパティを追加し、その値をno-repeatに設定します。
これで、bodyルールは次のようになります。
body {
background-color: #f0f8ff;
background-image: url("labex.svg");
background-repeat: no-repeat;
}
ファイルを保存し、Web 8080タブをリフレッシュします。これで、背景画像の単一のインスタンスがページの左上隅に表示されるようになります。
background-position プロパティに center を追加する
現在、単一の背景画像はページの左上隅に配置されています。background-positionプロパティを使用して、その位置を変更できます。このプロパティは、left、right、top、bottom、centerなどの値、および特定の長さまたはパーセンテージの値を受け入れます。
この最後のステップでは、背景画像を水平方向と垂直方向の両方で中央に配置します。
styles.cssファイルで、bodyルールにbackground-positionプロパティを追加します。- その値を
centerに設定します。
これで、完全なbodyルールは次のようになります。
body {
background-color: #f0f8ff;
background-image: url("labex.svg");
background-repeat: no-repeat;
background-position: center;
}
変更を保存し、Web 8080タブで結果を表示します。背景画像は、ページの中央に完全に配置されているはずです。
まとめ
実験完了おめでとうございます！基本的な CSS プロパティを使用して、ウェブページの配色と背景をスタイルする方法を習得しました。
この実験では、以下のことを練習しました。
background-colorと 16 進数コードを使用してページの背景色を設定する。colorプロパティとrgb()値を使用してテキストの色を変更する。url()関数を使用してbackground-imageを追加する。background-repeat: no-repeat;で画像のタイリングを制御する。background-position: center;で背景画像を配置する。
これらのプロパティは、あらゆるウェブ開発者にとって不可欠なツールです。値の変更や異なる画像の試行など、さらに実験して、どのようなものが作成できるか試してみてください。
