*左右への配置と回り込みの設定 [#v0f29a04] ブロックの背景に設定した画像の表示位置を 固定するかしないかを設定するには、 ''background-attachment''プロパティを設定します。 ブロックや画像を左右に配置して文字などの回りこみをを設定するには、 ''float''プロパティを設定します。 <pre> COLOR(red):background-attachement: COLOR(blue):固定するかしないか </pre> #pre(novervatim){{ COLOR(red):float: COLOR(blue):配置する位置 }} background-positionプロパティは、 ブロックの背景に設定した画像の表示位置を、 ウィンドウの中の設定した位置に固定するか、 コンテンツ(内容)と一緒にスクロールさせるかを指定します。 固定のしかたは次のような設定ができます。 -fixed: 背景画像の位置を固定 -scroll: 背景画像をコンテンツと一緒にスクロール floatプロパティは、 画像や指定した要素を、 左右に配置して、その反対側に後に続く要素を回りこませます。 配置する位置には、次のような設定ができます。 -left: 左に配置(後の要素は右に回りこみ) -right: 右に配置(後の要素は左に回りこみ) -none: 左右への配置と回り込みをしない <pre> body { background-image: url(bgimage.gif); background-repeat: no-repeat; COLOR(red):background-attachement: COLOR(blue):fixedCOLOR(black):; 回り込みを解除するには、 clearプロパティを使います。 #pre(novervatim){{ div.right { border: thin gray dotted; margin: 0.5em; width: 30%; background: #eeeeee; COLOR(red):float: COLOR(blue):right; } </pre> img.left { margin: 0.8em; COLOR(red):float: COLOR(blue):left; clear: right; } }} #ref(css01.png,nolink,floatの例); &br; &navi2(Lecture/InfoDesignB2004/9th,next);進んでください。 ---- #navi2(Lecture/InfoDesignB2004/9th,prev,toc,next) }} |