ジョイタスネットジョイタスネットプログラミング情報を配信します!Webサイト制作(float,absolute)floatfloatを使ったときの回り込みの挙動を確認しよう。1.デスクトップに新しくフォルダ(sample)を作り、その中にcss,images,jsフォルダを作成する。2.下の画像をダウンロードしてimagesフォルダに格納する。3.float.htmlを以下のように作成する。laborum.</p></div></body></html>4.main.cssを以下のように作成し、cssフォルダに格納する。auto;}5.ブラウザで見てみよう。下のように表示されれば成功だ。[解説]img要素はインライン要素なので文字と同じ扱い。一文字めとして画像が配置されているイメージだ。6.floatを使って回り込みを実現する。さきほど作成したfloat.htmlのimg要素にclass=”fl”を付与する。class="fl">7.実行してみよう。img要素がフロートされ文字が回り込んでいるのがわかる。8.同様にクラスをflからfrに変更しよう。class="fr">9.実行してみよう。今度は右にfloatされて文字が左に回り込むのがわかる。10.二つの目のpタグにクラスcbを付与しよう。ipsum・・・11.実行してみよう。clear:bothによってフロートによる回り込みが解除されたのがわかる。12.最後に画像と文字がくっつきすぎなので離してあげよう。この場合floatしている要素にmarginをつけるようにする。main.cssに以下を追記する。20px;}絶対配置フロートも通常の配置ルールを変更される場合に使われるが、同様に絶対配置というのもあるので学習する。13.sampleフォルダの中に新しくabsolute.htmlを以下のように作成する。</div></div></body></html>14.main.cssに追記し、以下のようにする。background:blue;}15.実行してみよう。通常の配置ルールにしたがってブロック要素が上から下に並んでいる。16.絶対配置をさせてみよう。cssで#redの要素のプロパティを以下のように編集する。background:red;}17.実行してみよう。以下のようになれば成功だ。[解説]このようにposition:absoluteを使うと通常の配置ルールを超越してすきなところに配置できる。今回は起点となるところ(body要素)に対してxオフセットが10px、yオフセットが10pxつまり左上を原点として10px離れた位置に配置されたことがわかる。18.続いてcssで空になっていた#blockContainerの部分を以下のように追記。position:relative;}18.実行してみよう。以下のようになれば成功だ。[解説]先ほどは起点となるところを指定していなかったのでブラウザを起点としたが、今回は#blockContainerにrelative指定をした。これによって起点がこの要素となる。absolute指定をした時には自分の親要素を順番に見ていって最初にstatic以外の要素(relative,absolute,fixedのいずれか)があった場合にそこを起点とみなす。19.最後に重なり順を変えてみよう。cssの#redと#blueの部分を以下のように編集。z-index:2;}20.実行してみよう。このようにz-indexを指定することでz-indexの値が大きい方を重なり順を上に表示できる。z-indexを指定するためにはpositionがstatic以外でなければならない。今回blueの要素にposition:relativeを追記したのはそのためだ。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。Profileこのサイトを運営しているmjpurinです。「半年間で全くの初心者をエンジニアに育てる」という仕事を10年続けています。このサイトは講義で使った教材をまとめたものです。練習問題なども多数掲載しているので、同じようにプログラミングを学習し始めた人にも役立つと思います。Twitterもやってます。プログラミング学習に役立つ情報をツイートしてますのでこちらもよろしくおねがいします。