- ベストアンサー
【webデザイン】floatについて悩んでおります
当方webデザイナーを目指し勉強中です。 サイトデザインをしてコーディングをしていてつまずいてしまったため質問をさせていただきました。 添付した画像の一番左側のようなレイアウトにしようとおもうのですが、思うようにいきません。 floatを使って横に流し込む際に、おかしなところでボックスの改行（？）が起こってしまいます。 おそらくナビゲーションの配置をする際にposition:relative;を用いて場所の変更を行う前の位置で改行がかかっているのだと思うのですが、このような場合はどのようにCSSにて記述するのがスマートなのでしょうか？ よろしければお答えをお願いいたします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
floatでも普通にレイアウトできると思いますが、 右のコンテンツ部分を一つのdivで囲んで、widthをちゃんと設定していれば問題ないと思います。 floatで失敗するのはwidthを入力していないから、という理由が結構多いので。 それと、position:relative;をかけたボックスの位置をtopやleftなんかで動かすと、 ボックスの「元あった位置」が常にレイアウトのネックになるので、 位置を変更するボックスはposition:absolute;を使う事をお勧めします。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
私は、そのようなときにfloatは使いません。 1) floatするブロックを前に書く必要があり、HTMLの文書構造が制約を受ける。 2) それにより、デザインの自由度が減る。右にあるものを左に、上に、下に・・と変更できない。 3) 本文中でfloat,clearが自由に使えない。 下記はHTML5ですが、HTML4.01,XHTML1.0/1.1のときは<div class="header">に置き換える。 480px以上のディスプレイで横スクロールなしでページ中央 header navはページトップとかheaderのどこにでも持っていける。 section navもsection内なら・・ section内でfloat,clearが自在に使えます。 ★タブは＿に置換してあるので戻すこと。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> <style media="screen"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,p{margin:0;line-height:1.6em;} header,section,footer{width:90%;min-width:480px;max-width:1000px;margin:0 auto;position:relative;} section{position:relative;min-height:400px;} section h2,section section{margin:0 20%;width:auto;} section section{clear:both;min-height:100px;} nav{position:absolute;z-index:10;width:20%;} header nav{top:100%;left:0;height:400px;} section nav{top:0;right:0;height:100%;} section aside{width:200px;font-size:0.9em;float:left;border:solid 1px gray;padding:5px 10px;margin:5px;} section+section aside{float:right;} body{background-color:gray;} header{background-color:aqua;} section{background-color:lime;} section section,section h2{background-color:white;} nav{background-color:silver;} footer{background-color:fuchsia;} --> </style> </head> <body> ＿<header> ＿＿<h1 id="title">Your title</h1> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="#">Some</a></li> ＿＿＿＿<li><a href="#">navigation</a></li> ＿＿＿＿<li><a href="#">links</a></li> ＿＿＿</ul> ＿＿</nav> ＿</header> ＿<section> ＿＿<h2>A smaller heading</h2> ＿＿<section> ＿＿＿<h3>章見出し</h3> ＿＿＿<p>段落</p> ＿＿＿<aside> ＿＿＿＿<h3>Something aside</h3> ＿＿＿＿<p>補足記事</p> ＿＿＿＿<p>補足記事</p> ＿＿＿</aside> ＿＿＿<p>段落</p> ＿＿＿<p>段落</p> ＿＿＿<p>段落</p> ＿＿</section> ＿＿<section> ＿＿＿<h3>章見出し</h3> ＿＿＿<aside> ＿＿＿＿<h3>Something aside</h3> ＿＿＿＿<p>補足記事</p> ＿＿＿＿<p>補足記事</p> ＿＿＿</aside> ＿＿＿<p>段落</p> ＿＿＿<p>段落</p> ＿＿＿<p>段落</p> ＿＿＿<p>段落</p> ＿＿</section> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="#">Some</a></li> ＿＿＿＿<li><a href="#">navigation</a></li> ＿＿＿＿<li><a href="#">links</a></li> ＿＿＿</ul> ＿＿</nav> ＿</section> ＿<footer> ＿＿<h3>A nice footer</h3> ＿</footer> </body> </html>
お礼
タグやCSSまで添付していただいての回答をありがとうございました、今後是非参考にさせていただきます！
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
widthの入力を確かに見落としておりました、ありがとうございます！ 位置変更の際には今後position:absolute;を使うようにしたいと思います。