Webの森.com - html編背景を変えてみよう！

背景

更新日:2011年10月27日

背景を変えるその前に

背景色を変える

背景を変えるその前に

今までbodyタグにHTML属性を指定することによって、背景の色や画像を変えてきました。しかし最近の背景の変え方は非推奨になっております。（できないわけではないです）

そこで使用するのがスタイルシートによる背景の変更になります。

bodyタグに属性を指定して記述していくのですが、全てのページに同じ背景を指定する場合は外部スタイルシートで一括指定した方が良いかと思います。ここでは、bodyタグにスタイルシートを使用して色々と背景を変えてみたいと思います。

背景色を変える

文字にスタイルシートを使ったように、bodyタグにも同じような方法で使用できます。

と記述します。色コードは文字の時と同じく、色見本の中から好きな色を選んでください。簡単に背景色を変える事ができます。

また、これから背景画像などを指定して色はいらないのでは？と思われるかもしれませんが、必ず背景色も指定するようにしましょう。なぜなら背景画像が表示されなかったときの為です。

たとえば黒系の背景画像にした後、白い文字で設定して、背景画像が消えて白くなった場合、文字が見えなくなってしまうためです。背景画像が消えても文字がちゃんと見える背景色にしておきましょう。

背景に画像を使用する

背景に画像を使用するにはまず、元となる画像がなければ始まりませんので、自分で用意するかフリーで提供してくれるホームページの素材屋さんで画像を貰ってくるといいですよ

画像を用意できたらbodyタグに指定するスタイルシート属性をみてみましょう。

赤い文字のところに画像ファイルのパスを指定します。拡張子も含めて書き込んで下さい
（例：○○.jpg、○○.gif、○○.png、など）

背景画像の並び方を変えてみる

場合によっては、背景画像の並べ方を指定しないとちゃんと表示されない場合がありますたとえば下のサンプルをご覧下さい。ここで使用したサンプルは、フリー素材屋さんから借りたものなのでダウンロードして使わないで下さい。

サンプル01

このように画像がいくつも並べられた状態になってしまうのが分かると思います。並べても問題ない画像の場合はいいのですがこれでは背景としては使えないでしょう。そこでこのような属性を追加してやります。

『background-repeat: repeat-y;』という指定が画像の並べ方の種類を表しています。赤い文字で表している文字を変えることによって、画像の並べ方を変えることができます。

repeat-yサンプル

画像を縦に並べる方法になっています。縦続きの画像等に使用されます。

repeat-xサンプル

画像を横に並べる方法になっています。横続きの画像等に使用されます。

no-repeatサンプル

画像を単体で表示させる方法になります。

背景画像の並べる位置を決める

画像を縦・横・単体の３種類の方法で表示することができました。次に並べる位置を設定していきましょう。

先ほどのスタイルシートに追加で記述する形になりますが、右上と設定しても『repeat-y』と指定すると思うように設定できないのでとりあえず単体で『no-repeat』の設定にします。

『background-position: right top;』というスタイルシートを使用して画像の位置を指定しているのですが、『right top』という指定があります単純に見ると右上ですね

横の位置と縦の位置を半角スペースで区切って指定しているわけです。それぞれの指定する値を変えることによって背景画像の位置も変わってくるということです。

・横の位置

left （左）、center （中央）、right （右）

・縦の位置

top （上）、center （中央）、bottom （下）

・数値でそれぞれ指定する

100px、50%などの数値で縦横を細かな位置を指定することも可能です。

以上が、背景の位置の設定方法です。一部ブラウザでは、背景の位置を正しく表示することができない場合がありますのでご注意下さい。

背景の一括設定

実はこれまで説明してきた、背景の色、背景の画像、背景画像の並べ方、背景画像の位置をひとまとめに設定する方法があります。まずは例としてのスタイルシートをお見せします。

みたことのある設定が並んでいますね、そう各設定を半角スペースで区切って並べるだけでいいのです。

文字も短いですし、慣れてきたらこの書き方で良いと思います。また、記述する順番は自由ですし、設定する必要がないものは省略して結構です。その場合デフォルトの設定が適応されます。

背景画像の並べ方サンプル

ここのページで使用されているサンプルの画像素材は素材屋さんから貸して貰っているものなのでご使用の場合はそのサイトへいってダウンロードしてください。使用例の一例ですので色々と試してみて下さい。

・普通に１つの画像を並べるサンプル

・１つの画像を右下に表示するサンプル

・画像を横に並べるサンプル

・画像を縦に並べるサンプル

背景を設定するときの注意点

背景を設定するときに気をつけないといけないことがあります。それは、背景と文字を似たような色にしない事です。黒の背景に黒の文字で書かれても読めません。それを悪用してキーワードを羅列して検索エンジンのランキングを操作しようとする人もいますが、そういう事をスパムと言われてただ検索エンジンの評価を下げるだけですので、絶対に避けて下さい。

お願い

もしページの内容がお役に立てたら、ポチっと押して貰えると幸いです。

NINJA_STYLE_MAILFORMアフィリエイト

リンク

Web作成関連紹介