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

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

ウイルスバスター 30日無料体験版 ノートン無料体験版 マカフィー・30日間無料版 [PR]

● レイアウト

widthで左に寄ったブロック要素の右側はマージン(余白)ではなく何も無い空白なのですが、 この空白を利用しようと、普通に文字列や画像を配置しても、上から下にしか記事は配置されていきません
そこで、空白に文字列や画像を回し込むために、スタイルシートの『float』プロパティを使用します。
値として『left』を設定すれば、左に寄った記事の右側に流し込み、 『right』を設定すれば、右に寄った記事の左側に流し込みます。 『none』の設定は設定しないとなります。

<P style="float:left ; width:50% ; margin:0 ; border:2px double gray ; padding:0.5em">
記事(ここ)
</P>
<P>
ココは右側(=≫)に回し込まれます。
</P>

設定したブロック要素を左(left)に置き、次のブロックを右側に回し込みます
ここは通常のP要素で書かれた記事です。

段落を変えてもclear:(回し込み解除)が与えられるまで、回し込みを続けます。
↓<BR style="clear:left">

<BR style="clear:left">の記述で、解除され元の状態に戻ります。別に<P style="clear:left">でも、その場にあった要素に付記してください。
clearには left 左に寄せを解除。right 右に寄せを解除。both 全ての回し込みを解除。 none 解除せず。の値があります。

基本となるブロック

コレは float:left を付けてwidth:50%

コレは float:left を付けず、width:50%

width:50%が画面に対してになっています。
float:leftを設定したブロック要素の次にfloat:leftを設定したブロック要素をおくと その境界線ごと回し込まれます。が、そのあとに何も与えない普通の要素が設置された場合、ブラウザによって挙動が違います。
O6.05とN7.0は上と同様境界線は左により、N7.0は記事だけが回し込まれ、O6.05は記事が下行に移りました。 このときの要素の幅はウィンドウに対して50%になっています。
一方IE6.0だけ回し込まれた要素の下に同様の状態で表示されています。 このときの要素の幅は上同様、残りのスペースに対してになっています。
以下の場合は特にブラウザによる違いはありません。

基本となるブロック

ここは float:left を付けず、width設定無し

width設定がないため画面いっぱいに広がっています。

基本となるブロック

ここは float:left を付け、width設定無し

ここは float:left を付け、width:30%

真ん中はwidth設定がないため、記事に対して自動で調整された幅になっています。
右側のwidth:30%は画面に対してになっています。

基本となるブロック

ここは float:left 無し、width設定無し

ここは float:left 無し、width:30%

右側の四角二つは <DIV style="float:left ; border:2px dotted lightcyan"> で囲われています
DIV要素が回り込み、中の四角二つは、回し込みに関係なく成っていますが、 DIV要素に幅設定をしていないため、上の四角が幅の基準となり、 下の四角は上の幅に対して30%になっています。

この回し込み(float:)する要素にマージンを設定すれば、記事を上から並べるだけではなく、 多彩なレイアウトができると思います。
なお、回し込み(float:)が可能なのは、前頁に引き続き、 画像のIMG要素をのぞいて、ブロック要素であると言うことをお忘れ無くです。 『ブロック』をページ内に配置していくという感じを思い描いていただければ分かり易いと思います。

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

中古スマホ・ガラケーなどのモバイル製品をお探しなら電脳プラザで!
 
常時2,000台以上の在庫を取り揃え!最短即日出荷に対応!

TOP] [HOME

更新日時:2014/08/09