【webデザイン】floatについて悩んでおります

解決済

質問者：irai0712
質問日時：2013/03/18 11:48
回答数：2件

当方webデザイナーを目指し勉強中です。
サイトデザインをしてコーディングをしていてつまずいてしまったため質問をさせていただきました。

添付した画像の一番左側のようなレイアウトにしようとおもうのですが、思うようにいきません。
floatを使って横に流し込む際に、おかしなところでボックスの改行（？）が起こってしまいます。
おそらくナビゲーションの配置をする際にposition:relative;を用いて場所の変更を行う前の位置で改行がかかっているのだと思うのですが、このような場合はどのようにCSSにて記述するのがスマートなのでしょうか？
よろしければお答えをお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： tkmojo
回答日時：2013/03/19 10:29

floatでも普通にレイアウトできると思いますが、

右のコンテンツ部分を一つのdivで囲んで、widthをちゃんと設定していれば問題ないと思います。
floatで失敗するのはwidthを入力していないから、という理由が結構多いので。

それと、position:relative;をかけたボックスの位置をtopやleftなんかで動かすと、
ボックスの「元あった位置」が常にレイアウトのネックになるので、
位置を変更するボックスはposition:absolute;を使う事をお勧めします。

- 0
- 件

通報する

この回答へのお礼

widthの入力を確かに見落としておりました、ありがとうございます！
位置変更の際には今後position:absolute;を使うようにしたいと思います。

通報する

お礼日時：2013/04/02 10:14

No.1

回答者： ORUKA1951
回答日時：2013/03/18 13:44

私は、そのようなときに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">

</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>