CSS - バックグラウンド：初めてのガイド
こんにちは、将来のCSS魔法使いたち！今日は、CSSバックグラウンドの魔法の世界に飛び込みます。このチュートリアルの終わりまでに、平凡で退屈なウェブページを視覚的に素晴らしい傑作に変換できるようになるでしょう。では、虚拟の絵の具を手に取り、始めましょう！
CSSバックグラウンドとは？
本題に入る前に、CSSバックグラウンドとは何かを理解しましょう。あなたのウェブページを白いキャンバスと考えてください。CSSバックグラウンドプロパティはあなたの絵の具で、キャンバスに色、画像、パターンを加え、キャンバスを生き生きとするものです。
バックグラウンドプロパティ：基本
CSSバックグラウンドプロパティは、ショートハンドプロパティで、すべてのバックグラウンド関連プロパティを一度に設定できるものです。ウェブページのバックグラウンドをスタイル化するためのスイスアーミーナイフです！
文法
以下はバックグラウンドプロパティの基本文法です：
セレクター {
background: [バックグラウンド色] [バックグラウンド画像] [バックグラウンド繰り返し] [バックグラウンドアタッチメント] [バックグラウンド位置];
}これが複雑に見えるかもしれませんが、少しずつ解説します！
可能な値
バックグラウンドプロパティで使用できる異なる値を見てみましょう：
| プロパティ | 説明 | 例 |
|---|---|---|
| background-color | バックグラウンド色を設定 | background-color: #ff0000; |
| background-image | 一つまたは複数のバックグラウンド画像を設定 | background-image: url('image.jpg'); |
| background-repeat | バックグラウンド画像の繰り返し方法を指定 | background-repeat: no-repeat; |
| background-attachment | バックグラウンド画像がページの残りと一緒にスクロールするか設定 | background-attachment: fixed; |
| background-position | バックグラウンド画像の開始位置を設定 | background-position: center top; |
これらの各プロパティについて詳しく見ていきましょう！
バックグラウンド色
最もシンプルな始め方としてはバックグラウンド色を設定することです。以下のようにします：
body {
background-color: #f0f0f0;
}これで、整个ページのバックグラウンド色をライトグレイに設定します。色名、16進数値、RGB、またはHSL値を使用できます。
バックグラウンド画像
少し派手なものを加えたい場合は、画像を追加してみましょう！
body {
background-image: url('space.jpg');
}このコードは、'space.jpg'を整个ページのバックグラウンド画像に設定します。画像のパスが正しいことを確認してください、さもないと空白のキャンバスになるでしょう！
バックグラウンド画像と色
バックグラウンド画像と色を組み合わせることもできます。色は画像の透過部分を通して見えます：
body {
background-color: #000000;
background-image: url('stars.png');
}これで、黒いバックグラウンドに半透明な星の画像をオーバーレイした星空効果が作成されます。
バックグラウンド繰り返し
デフォルトでは、バックグラウンド画像は水平方向と垂直方向両方に繰り返します。でも、それが不要な場合はどうでしょうか？
body {
background-image: url('logo.png');
background-repeat: no-repeat;
}これで、ロゴを一度だけ表示し、繰り返しません。repeat-xをhorizontalな繰り返し、repeat-yをverticalな繰り返しにすることもできます。
バックグラウンド位置
バックグラウンド画像を特定の位置に配置したい場合は、background-positionを使用します：
body {
background-image: url('watermark.png');
background-repeat: no-repeat;
background-position: bottom right;
}これで、ウォーターマークをページの右下隅に配置します。
バックグラウンドアタッチメント
パララックス効果のようなクールなものを見たことがありますか？背景がスクロールする間に固定される効果です。それはbackground-attachmentを使ったものです：
body {
background-image: url('mountains.jpg');
background-attachment: fixed;
}これで、山の画像が固定され、コンテンツがその上をスクロールします。
すべてを合わせて
今まで学んだことを一つにまとめた超级バックグラウンドプロパティを見てみましょう：
body {
background: #f0f0f0 url('pattern.png') repeat-x fixed center top;
}これは、ライトグレイのバックグラウンドに水平方向に繰り返すパターン画像を中心上に固定したものです。
CSSバックグラウンド - 関連プロパティ
旅を終えるために、以下の追加のバックグラウンド関連プロパティが役に立つかもしれません：
| プロパティ | 説明 | 例 |
|---|---|---|
| background-size | バックグラウンド画像のサイズを指定 | background-size: cover; |
| background-origin | バックグラウンド画像の配置位置を指定 | background-origin: content-box; |
| background-clip | バックグラウンドの描画エリアを指定 | background-clip: padding-box; |
結論
おめでとうございます！あなたはCSSバックグラウンドのカラフルな世界への第一歩を踏み出しました。CSSをマスターする鍵は練習です。それでは、これらのプロパティを試してみて、さまざまな組み合わせを試し、素晴らしいデザインが作れるかどうか見てください！
谁知道呢？これらのスキルで、あなたは次のウェブデザインのピカソになるかもしれません。幸せなコードを、そしてあなたの背景が常に美しいであれ！
Credits: Image by storyset