新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

CSS2.1まとめ書き-background編(HTML・CSSリファレンス)

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

CSS2.1まとめ書きも3回目。
今回はバックグラウンドカラー(背景の色)やバックグラウンドイメージ(背景に敷くイメージ)を設定するプロパティbackgroundに関してです。
これは、WebをCSSでデザインするにあたって非常に重要になるプロパティなので、しっかり覚えておいたほうがいいでしょう。
まあ、Dreamweaver使っちゃえば簡単に設定できちゃうんですけどねぇ。。

スポンサーリンク
 

まずは各プロパティを解説。よく使う書き方で説明します。

background-color:#000000;

バックグラウンドカラー(背景色)を黒にする場合上記のように書きます。
値は16進数によるRGB指定及びキーワード(white、green等)になります。

background-image:url(images/bg.gif);

バックグラウンド(背景)にイメージを敷く場合に上記のように書きます。
「url(イメージのパス)」という値になります。
パス表記は絶対パス、相対パスどちらでも可です。

background-repeat:no-repeat;

バックグラウンドのイメージの繰り返し設定です。
初期値(repeat)は縦方向、横方向ともに繰り返す設定になっています。
(つまり、バックグラウンドにイメージがタイル上に並ぶ)
no-repeatで繰り返しをなしに、repeat-x、repeat-yでそれぞれ横方向、縦方向のみに繰り返すという設定になります。

background-position:0px 5px;

バックグラウンドに敷いたイメージの位置を指定します。
数値にした場合は左上を基準にして左からの距離、上からの距離の順で書きます。
数値以外にleft(左揃え、0pxと同等)、right(右揃え)を左から距離に、top(上揃え、0pxと同等)、bottom(下揃え)を上からの距離にすることもできます。
それぞれ、center(中央揃え)を使うことも可能です。

で、これらをまとめて書く場合は以下のようになるわけです。

background:url(images/bg.gif) no-repeat 0px 5px;

これも順序は問いません。(background-positionの値の順番は変えられません)
したがって以下のようにも書けるわけです。

background:0px 5px no-repeat url(images/bg.gif);

さて、ここであるプロパティが抜けていることに気付きます。
「background-color」です。
通常、バックグラウンドに画像を敷けば色の設定はいらないのでこう書くことが多いのですが、
実は「background-color」も含めてひとまとめで書けちゃいます。

background:#000000 url(images/bg.gif) no-repeat 0px 5px;

この場合も記入する順番は問いません。(くれぐれもbackground-positionの値の順番は変えないように)
が、個人的には上記の書き方が一番間違いなくていいと思ってます。

background:color image repeat position;

と言った感じですね。

以下のサイトの様にバックグラウンドに色とイメージと両方使う場合に使うことがあります。
イメージとカラーの併用例
bodyにbackground-imageを設定しているため、その配下のdivに

background:white url(side_yellow.png) repeat-y top right;

といったような形でbackground-colorとbackground-imageを両方設定しています。

 - Webデザイン, デザイン

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

no image
僕もそのうちの一人です

1年以上前の記事です。内容が古い可能性があります。livedoor ニュース & …

ツイッター(Twitter)顔文字用の文字が探せるサイト「Shapecatcher」が便利

1年以上前の記事です。内容が古い可能性があります。ツイッター(Twitter)は …

「position:absolute」を子要素に使いたいときは親要素に「position:relative」【CSS】

1年以上前の記事です。内容が古い可能性があります。CSSには「position( …

ツイッターアカウントで目にする逆英字(ɐsıɹoN)の作り方

1年以上前の記事です。内容が古い可能性があります。ツイッターのユーザー名に普通と …

Photoshopでスライスをまとめて削除する方法

1年以上前の記事です。内容が古い可能性があります。これ、生徒さんに聞かれてすぐ答 …

縦長すぎる東京スカイツリーのサイトが面白い

1年以上前の記事です。内容が古い可能性があります。5月22日オープン予定の東京ス …

Dreamweaverの同期機能を使いこなす。まずはプレビューから同期

1年以上前の記事です。内容が古い可能性があります。Webサイト制作に際し、今まで …

TV見ません。雑誌読みません。

1年以上前の記事です。内容が古い可能性があります。最近、テレビを見なくなった。そ …

HTML5対応HTML構文チェック(バリデート)サイト「Another HTML Lint5」

1年以上前の記事です。内容が古い可能性があります。Dreamweaverなど、H …

DreamweaverとFC2ホームページで作るサイト定義(前編)

1年以上前の記事です。内容が古い可能性があります。前編 → 後編 → 公開編 す …

血液型オヤジ