テンプレートとアクセスアップのでめらら楽天日記

< 新しい記事

新着記事一覧(全372件)

過去の記事 >

2005.05.17

style19（background-背景）

(8)

テーマ：アクセス向上(301)

カテゴリ：【実験中】

スタイルシート>>全般>>background（背景）

■background-color: ***;（要素内の背景に色を付ける）
■background-image: url(***);（要素内の背景に画像を使う）
■background-repeat: ***;（背景画像の並び方を指定する）
■background-position: ***;（背景画像の表示位置を指定する）
■background-attachment: fixed;（背景画像をスクロールさせない）
■background: ***;（背景の設定をひとまとめに行う）

■background-color: ***;（要素内の背景に色を付ける）
<p style=" background-color: #FFA500; ">要素内の背景に色を付ける</p>
こんな感じですね（＾＾）↓

要素内の背景に色を付ける

■background-image: url(***);（要素内の背景に画像を使う）
<p style=" background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/39.gif); ">要素内背景に画像を使う</p>
こんな感じですね（＾＾）↓

要素内背景に画像を使う

■background-repeat: ***;（背景画像の並び方を指定する）
□repeat … （敷き詰める）デフォルト
<div style="width: 400px; height: 100px;background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: repeat;
こんな感じですね（＾＾）↓

repeat … （敷き詰める）デフォルト

□repeat-x … （横方向に繰り返し並べる）
<div style="width: 400px; height: 100px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: repeat-x; ">（横方向に繰り返し並べる）</div>
こんな感じですね（＾＾）↓

（横方向に繰り返し並べる）

<div style="width: 400px; height: 100px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: repeat-y; ">（縦方向に繰り返し並べる）</div>
こんな感じですね（＾＾）↓

（縦方向に繰り返し並べる）

□no-repeat … （1つだけ表示繰り返さない）
<div style="width: 400px; height: 100px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: no-repeat; ">（1つだけ表示繰り返さない）</div>
こんな感じですね（＾＾）↓

（1つだけ表示繰り返さない）

□inherit（ほとんど使いませんが、一応(;笑)、親要素の値を明示的に継承する指定の値です）

■background-position: ***;（背景画像の表示位置を指定する）
このプロパティでは値をひとつ記述した場合とふたつ記述した場合が設定できます。
ひとつだけ記述しますと左右の値を現し、上下位置は中央に表示されます。
ふたつ記述しますと(1)左右の値(2)上下の値を現します。

□percentage（パーセンテージで指定する場合）
background-position: 20% 70%; … 左から20%、上から70%の位置に表示
<div style="width: 400px; height: 100px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: no-repeat; background-position: 20% 70%; ">左から20%、上から70%の位置に表示</div>
こんな感じですね（＾＾）↓

左から20%、上から70%の位置に表示

background-position: 50%; … 左から50%、上から50%の位置に表示
<div style="width: 400px; height: 100px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: no-repeat; background-position: 50%; ">左から50%、上から50%の位置に表示</div>
こんな感じですね（＾＾）↓

左から50%、上から50%の位置に表示

□length（単位で指定する場合）
『相対値指定の単位　em: フォントの大きさ ex: 小文字の高さ px: ピクセル』
『絶対値指定の単位 in: インチ。2.54 cm cm: センチメートル mm: ミリメートル pt: ポイント。1/72 インチ pc: ピカ。12 ポイント』
background-position: 100px 40px; … 左から100px、上から40pxの位置に表示
<div style="width: 400px; height: 100px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: no-repeat; background-position: 100px 40px; ">左から100px、上から40pxの位置に表示</div>
こんな感じですね（＾＾）↓

左から100px、上から40pxの位置に表示

background-position: 80px; … 左から80px、上から50%の位置に表示
<div style="width: 400px; height: 100px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: no-repeat; background-position: 80px; ">左から80px、上から50%の位置に表示</div>
こんな感じですね（＾＾）↓

左から80px、上から50%の位置に表示

□『水平方向：left（左）center（中央）right（右）』『垂直方向：top（上）center（中央）bottom（下）』
【記述例】
background-position: right bottom; … 右より下部に表示
background-position: left top; … 左より上部に表示
background-position: right; … 右の中央に表示（省略された場合すべてcenterと同じになります）
background-position: bottom; … 下の中央に表示
background-position: center; … 中央に表示
<div style="width: 400px; height: 100px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: no-repeat; background-position: right bottom; ">右より下部に表示</div>
こんな感じですね（＾＾）↓

右より下部に表示

■background-attachment: fixed; 背景画像をスクロールさせない
□fixed（背景画像の位置固定、スクロールしても動かなくなります。）
□scroll（スクロールにしたがい、背景画像も移動します。）
<div style="width: 400px; height: 100px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif); background-repeat: no-repeat; background-position: right bottom; background-attachment: fixed; ">背景画像の位置固定、スクロールしても動かなくなります</div>
こんな感じですね（＾＾）↓

背景画像の位置固定、スクロールしても動かなくなります

■background: ***; 背景の設定をひとまとめに行う
<div style="width: 400px; height: 100px; background: #FFA500 url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/11.gif) repeat-y fixed right top; ">背景の設定をひとまとめに行う</div>
こんな感じですね（＾＾）↓

背景の設定をひとまとめに行う

▲CSS本来の記述方法(楽天ではできませんが、本来はbodyに指定して壁紙を設定するなどが一番多い使い道です)
<style type="text/css">

</style>

*****************************************************

【庶事所感】
時間の使い方って本当に難しいなと思います。
何でもダイジェストで見れたり聞けるといいのですが、そうは行かないものが多くて･･･
要領の良い悪いもあるのかもしれませんが、どうもこのところ段取りが悪いのか一日に思っていることの半分以下のことしか出来ません（＞＜）

*****************************************************

なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ