158520 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

Purple town

Purple town

応用編 その5【color&background】

応用編 スタイル宣言 その5 色と背景【color&background】



文字の配置はこれでばっちり。次は色を付けたり背景をいじってみましょう。

色の指定は『color』が文字色。『background-color』で背景色を指定します。
なんだタグ講座で教えていたのと同じじゃないかと思った人、予習がよくできてます。
色の指定もタグと同じなので。『 ブログで使えるタグ講座その2』の色の指定を参考にしてください。
あくまでも<div"> ~ </div">全体の色の指定なので単体で色を変える場合は<font color="色指定" ~ </font>を使用します。(もしかしたら方法があるのかもしれないけど)

色が決まったら背景に画像をいれてみましょう。

<div style="background-image: url(http://plaza.rakuten.co.jp/img/user/92/40/1939240/6.gif)">背景画像</DIV>
背景画像
<div style="background-image: url(この中にurl);background-attachment:scroll;">背景画像の固定(fixed)or移動(scroll)</DIV>
<div style="background-image: url(この中にurl);background-repeat:repeat;">背景画像の繰り返し(repeat)or横繰り返し(repeat-x)or縦繰り返し(repeat-y)or繰り返さない(rno-repeat)</DIV>
<div style="background-image: url(この中にurl);background-position:center;">背景画像位置を縦横で指定。center center、center right、center left、left left、right right、top・center・bottom 他%指定など。</DIV>
<div style="background: #ffffff url(この中にurl) no-repeat fixed center left;">背景の一括指定。</DIV>


この回のおさらい。
<div style="background: #ffffff url(http://plaza.rakuten.co.jp/img/user/92/40/1939240/6.gif) no-repeat fixed 20% 20%;)"> このページの背景に指定。バックきなりで画像固定20%の場所。 </div>






© Rakuten Group, Inc.