新・元地方の中規模印刷会社で苦悩する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

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

  関連記事

DTP、Webデザインを勉強するのにおススメのテキスト【書評】

1年以上前の記事です。内容が古い可能性があります。職業訓練校で講師をやっていた経 …

意外と知らないネットスラング「スルー力」とは

1年以上前の記事です。内容が古い可能性があります。先日、何かの折に「リアルでもス …

Web制作会社はいずれなくなる? アメリカにWeb制作会社がない5つの理由

1年以上前の記事です。内容が古い可能性があります。アメリカにはWeb制作会社がな …

no image
CSS3でプルダウンメニューと可変角丸囲み

1年以上前の記事です。内容が古い可能性があります。今度のCSSはとってもすごいら …

no image
デザイン変えました

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

no image
春だねぇ。。

1年以上前の記事です。内容が古い可能性があります。春が来ました。今日はお花見日和 …

no image
これから

1年以上前の記事です。内容が古い可能性があります。これからのネット社会はどうなっ …

富の分配の究極形、パトロンを得るなら「CAMPFIRE(キャンプファイヤー)」

1年以上前の記事です。内容が古い可能性があります。こんなサイトがあったとは! 眼 …

「key1」と「key2」。配色の話

1年以上前の記事です。内容が古い可能性があります。様々な人が様々な感性をもってい …

「アドセンス(Adsense)」緑→青→緑の軌跡

1年以上前の記事です。内容が古い可能性があります。こちらの記事でやると言っていた …

血液型オヤジ