ウェブページの背景色を制御する CSS コード

誰もが自分の Web ページの背景にふさわしい画像を見つけることに悩むことが多いと思います。これは事実だと思います。なぜなら、これらの画像は大きすぎたり、小さすぎたり、雑然としすぎたりしているからです。それでは、自分のホームページの好みに合う画像にする方法はあるのでしょうか?答えはイエスです。

それを達成する方法を知りたいですか? では、今すぐ私に従ってください。すぐに習得できることをお約束します。ただ、ネットで「起業」する友人は、ネットカフェで「起業」する人（私もそうでしたが、最初は他人のホームページから関連コードを引っ張ってきて改造するところから始めました）と、自宅でDWやFPなどの専門ソフトを使って作ってアップロードする人に大別されると思います。そこで、2回に分けて紹介しようと思います。まずはネットカフェで「起業」する友人について考察し、最後にDW4で作った背景スタイルをいくつか簡単に紹介します。

実際のところ、すべては同じであり、ただやり方が違うだけです。さて、雑談はここまでにして、本題に入りましょう。

背景といえば、背景色とカラー画像しかありません。この2つは、bgcolor="#808080"とbackground="URL"を追加するものだということは、皆さんご存知だと思います。しかし、今回紹介するのは、このやり方ではなく、CSSスタイルを使う方法です。少し面倒ではありますが、全体的な調和はとても良いです。

背景色 background-color

詳しく紹介する必要はないと思います。カラーコードは皆さんご存知だと思います。英語に置き換えたり、指定のコードで表現したりします。デフォルト値は透明です。例：

本文{背景色:黄色} 
H1{背景色:#000000}

背景画像

HTML での背景画像と背景色の設定は基本的に同じで、関連するステートメントを追加することで完了できます。しかし、ここではこの方法について言及しているのではなく、私が使用する方法は依然として CSS です。 background-image の主な機能は、画像を表示することです。画像を表示する必要がある場合は、最後に URL (画像のアドレス) を追加するだけです。画像を表示したくない場合は、これが最も簡単な方法です。デフォルトでは何も必要ありません。画像を追加したい場合は、最後に none を追加するだけです。例：

体
{
背景画像:url('file&:///C:/WINDOWS/BACKGRND.GIF')
} 
h1
{
背景画像:url('なし')
}

背景画像を使用する際、一部の画像が小さすぎてページ全体の美しさを損なう画像が繰り返し表示されたり、他の画像を置き換えても適切でなかったりと、さまざまな困った状況に遭遇したことがあるはずです。しかし、これからは、以下の CSS メソッドを使用して画像を制御すれば、このような問題は二度と発生しなくなります。

画像を繰り返し表示するかどうか background-repeat

繰り返し表示が必要な場合もありますが、繰り返し表示が面倒な場合もあります。これは非常に役立ち、画像の繰り返し方法 (水平方向の繰り返し、垂直方向の繰り返し、両方向の繰り返し) を制御するのにも役立ちます。これら 3 方向の繰り返しを実現するには、background-repeat の後に repeat-x (水平方向)、repeat-y (垂直方向)、repeat (両方向) を追加するだけです。

もちろん、画像の繰り返しを制御することもできますし、画像の非繰り返しを制御することもできます。 no-repeat は、背景画像を繰り返すのではなく、1 つの背景画像のみを表示することを示します。これはデフォルトではありません。デフォルトでは、背景画像を繰り返し表示します (repeat)。例：

体
{
背景画像:url('file&:///C:/WINDOWS/BACKGRND.GIF');
背景繰り返し:繰り返しなし
}

画像の表示位置を指定する background-position

上記の設定の背景画像では、多くの場合不十分です。上記の非繰り返し表示設定を使用すると、画像はページの左上隅にのみ表示され、他の場所には表示されないためです。ただし、この背景画像を中央または他の場所に表示したい場合は、background-position が役立ちます。これは、左上隅を基準とした画像の位置を表示するために使用されます (デフォルト値は 0% 0%)。中央のスペースで区切られた 2 つの値で設定されます。

主な値は左・中央・右・上・中央・下です。また、パーセンテージ値を使用して相対位置を指定したり、値を使用して絶対位置を指定したりすることもできます。たとえば、50％は位置が中央にあることを意味し、水平値が50pxの場合、画像は左上隅から水平方向に50px離れた位置に移動します。ここで注意すべき点は、1.値を設定するときに値のみを指定すると、水平位置のみを指定したのと同じになり、垂直位置は自動的に50％に設定されることです。2.設定した値が負の数の場合、背景画像が境界を超えていることを意味します。例：

体
{
背景画像:url('file&:///C:/WINDOWS/BACKGRND.GIF');
背景繰り返し:繰り返しなし;
背景位置:100px 10px
}

画像をスクロールするかどうかを制御する background-attachment

上記の 2 つの手順で画像の配置を完了できますが、ページにスクロール バーがある場合、背景画像が常にその位置に配置されるとは限らないため、これだけでは完璧ではありません。画像をその位置に永久に配置したい場合は、ページ コンテンツのスクロールに合わせて画像をスクロールさせるしかありません。このとき、background-attachment が役立ちます。scroll (静的) と fixed (スクロール) のいずれか 1 つを追加するだけで済みます。

もちろん、ランダムに追加することはできません。結局のところ、スクロールがデフォルトであり、つまり画像はページの内容とともにスクロールしません。例：

体
{
背景画像:url('file&:///C:/WINDOWS/BACKGRND.GIF');
背景繰り返し:繰り返しなし;
背景添付:固定
}

さて、上記の設定をすると、背景がより美しくなると思いますが、コードが多すぎると読みにくくなり、間違いを起こしやすくなります。ここでお伝えしたいのは、上記のコードをすべて一緒に追加できること、つまり、上記の関連コードを背景に追加できることです。

背景にコードを追加するときは、各値の間にスペースを入れて区切り、背景画像の URL の後に背景色コードを入れないでください。画像が表示されなくなります。例：

体
{
背景:緑 url('file&:///C:/WINDOWS/BACKGRND.GIF') 
固定 100px 50px 繰り返しなし
}

最後に、コードを直接挿入する場合は、正常に表示されるように、次のコードの後に​​挿入し、その間に配置する必要があることに注意してください。

要約する

上記は、Web ページの背景色を制御する CSS コードの詳細です。CSS Web ページの背景の詳細​​については、123WORDPRESS.COM の他の関連記事に注目してください。