HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

★月々263円からオンラインショップを運営!高機能カート・クレジット決済が簡単導入 [PR]

● 背景の装飾

ここまでで、そこそこのページは作れるはずですが、まだ細かな装飾があります。例えば背景です。
背景に色をつけるのなら文字の装飾で使用したbackground-colorを、 BODY要素やHTML要素に設定してあげればよいです。 画像を張りたいのならbackground-imageに成ります。
HTML要素の設定はIE5.5/O6.05では反映されません。また、画像はHTML要素には無効です。
設定した要素内がその色、又は画像となります。

背景色の設定 <HTML style="background-color:#efefef">
背景色の設定 <BODY style="background-color:#efefef">
背景画像の設定 <BODY style="background-image:url('img/back.gif')">
段落の背景色の設定 <P style="background-color:#efefef">

と記述することで#efefefが背景色となったり、 img/back.gifがウィンドウ全体に貼り付けられます。
(TABLE要素やTD要素、DIV要素等にも有効です。)
HTML要素はウィンドウの背景色となりますので、 BODY要素の幅(高さ)を小さくしてウィンドウの背景が表示されるスペースを確保する必要があります。 background-colorの初期値は『transparent』で透明です。 よって、HTML要素や、BODY要素に与えられた背景設定は、背景色を与えていない要素内では『透過』して見えます。
なお、背景画像は以下の記述で位置や動きを設定できます。

○背景画像の固定・移動を設定(background-attachment)
scroll(スクロールする) <BODY style="background-attachment:scroll">
fixed(スクロールしない) <BODY style="background-attachment:fixed">

このページは『しない(fixed)』に設定してありますので、木目が移動しません。

○背景画像の敷き詰め方の設定(background-repeat)
repeat(敷き詰める)
no-repeat(ひとつだけ)
repeat-x(横方向のみ)
repeat-y(縦方向のみ)

<DIV style="background-image:url('back.gif') ; background-repeat:no-repeat">
<DIV style="background-image:url('back.gif') ; background-repeat:repeat-x">
<DIV style="background-image:url('back.gif') ; background-repeat:repeat-y">

○背景画像の表示位置を設定(background-position)
横方向設定には left, center, right, 0〜100% の値を
縦方向設定には top, center, bottom, 0〜100% の値を設定
各々を半角スペースで区切って設定。background-repeat:no-repeatを併せて設定しないと敷き詰められてしまいます。

<DIV style="background-image:url('back.gif') ; background-position:center center ; background-repeat:no-repeat">
<DIV style="background-image:url('back.gif') ; background-position:33% bottom ; background-repeat:no-repeat">

background-repeat:repeat-x / background-repeat:repeat-y も利用できます。

<DIV style="background-image:url('back.gif') ; background-position:33% ; background-repeat:repeat-y">
<DIV style="background-image:url('back.gif') ; background-position:center ; background-repeat:repeat-x">

IE仕様で縦横を別々に設定できます。
横(X方向)位置 background-position-x
縦(Y方向)位置 background-position-y

○背景に関する設定(background)
上記の背景に関する設定を background で一括して与えられます。
<BODY style="background:color image repeat attachment position">
のように各値を半角スペースで区切って設定します。

<<前へ  |上へ|  次へ>>
1234567891011121314151617

今すぐ仕事に結びつく資格&技能完全ガイド【情報満載のガイド無料進呈】

‥…━★ 通信教育80年の実績!がくぶん総合教育センター ★━…‥

TOP] [HOME

更新日時:2014/08/09