忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[97] [96] [95] [94] [93] [92] [91] [90] [89] [88] [87

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSSにできること―背景編

CSSにできること第三弾。今回は背景色、背景画像編です。
前作:CSSにできること―文章編

背景色や背景画像の指定は、HTMLでもできた部分が多いですが、より細かく指定をすることが可能になっています。

1.背景色をつける。

HTMLにおいては、bgcolorという属性で背景色をつけることができます。
この属性は、bodyとtableにしか対応していないので、HTMLでは、bodyとtable,tr,td系のタグにしか色をつけられないことになります。(だからテーブルレイアウトが主流になったんですね。と納得。)

CSSでは、background-colorで背景色をつけることが可能です。bodyやtable系のタグ以外にも背景画像をつけることが可能です。


2.背景画像をつける。

HTMLでは背景画像はbackgroundという属性でつけることができますが、この属性はbody専用のものなので、背景はページ全体にしかつけられない仕様になっています。
CSSではbackground-imageというプロパティでどこでも背景画像をつけることが可能です。

背景画像をつけた例。


3.背景画像の繰返し

背景が画像の場合、画像の表示方法を指定するbackground-repeatというプロパティがあります。値をrepeatにすると、画像が全体にしきつめられます。
また、横方向、縦方向のみに画像を繰り返すこともできます。x-repeatだとx軸方向(横)、y-repeatだとy方向(縦)のみの繰返しになります。no-repeatだと繰返しなしになります。
ここでは、background-repeat: none;を指定しています。


4.背景画像の位置固定

画像の表示位置を指定するには、background-positionを使います。

また、background-attachmentというプロパティでは、画面をスクロールしても画像が動かないように指定することも可能です。


以上、画像でできることの紹介でした。
テーブル・リスト編へ続きます。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
02« 2017/03 »04
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
ブログ内検索
忍者ブログ [PR]