- ベストアンサー
【webデザイン】floatについて悩んでおります
当方webデザイナーを目指し勉強中です。 サイトデザインをしてコーディングをしていてつまずいてしまったため質問をさせていただきました。 添付した画像の一番左側のようなレイアウトにしようとおもうのですが、思うようにいきません。 floatを使って横に流し込む際に、おかしなところでボックスの改行（？）が起こってしまいます。 おそらくナビゲーションの配置をする際にposition:relative;を用いて場所の変更を行う前の位置で改行がかかっているのだと思うのですが、このような場合はどのようにCSSにて記述するのがスマートなのでしょうか？ よろしければお答えをお願いいたします。
- irai0712
- お礼率100% (2/2)
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （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まで添付していただいての回答をありがとうございました、今後是非参考にさせていただきます！
関連するQ&A
- コーディングで「float」のclearの仕方
htmlとcssのコーディングに関して質問させてください。 右側と左側にボックスをフロートさせた際、 どうやって回り込みを解除したらよいのか教えてください。 ▼htmlのタグ <div id="left">......</div> <div id="right">......</div> ▼cssのタグ #left{float:left; width:100px;} #right{float:right; width:100px;} このようなコーディングをした際には、 html、もしくはcssのどちらに、どのようなタグを 追加して回り込みをなくしたらよろしいでしょうか？ 分かりにくいかもしれませんがご教授いただければ幸いです。
- 締切済み
- その他([技術者向] コンピューター)
- お叱りを受けるような質問なのですが・・・
ＣＳＳをかじって１年位なのですが、ＨＰ作ってふと疑問に思うことがあるのです。 CSSは、主に文書のレイアウトやデザインの為の言語ですよね。で、その目的で使う分については、テキストの位置、画像の位置すべてposition.relativeで思うようにできると思うのですがそれでは、だめなのですか？ paddingやfloatとかdivとか使わなくても・・・と思うのですが・・・。 グループで分業してやってるわけではないから、すべてposition,relativeでレイアウトしてもいいと思うのですが、どうなんでしょう？
- ベストアンサー
- HTML
- floatを使わずに、cssレイアウトって可能でしょうか？
例えば、現在見ているこのページのように、ヘッダーとフッターがあり、コンテンツが左右二つのカラムで成り立っているようなレイアウトを、floatでなくpositionで、レイアウトすることは可能でしょうか？ （その際、左右どちらのカラムの方が、高さが高くなっても、レイアウトが崩れないように。） floatを使いたくない理由は、親ボックスからはみ出さないように、ハック（clearfix）を使わないといけないからです。
- ベストアンサー
- CSS
- CSSのfloatについて
ホームページを作成していて、CSSが効かなくて困っています。 ２カラムで左側にメニュー 右側にメインのコンテンツを作成しております。 メインのコンテンツは floatでrightに設定していて その中にさらに ２つの内容を入れようと （メインコンテンツ内に左側に画像で右側に画像の詳細をいれたい） floatタグでleftとrightに設定したのですが CSSが効かなくて 左側に画像が配置され その下に画像の詳細文が配置されてしまい 全部左側に配置されてしまいました。 色々と試したみたのですが やっぱりCSSが効きませんでした。 すいません誰かお分かりになられましたら 教えてください。宜しくお願い致します。
- 締切済み
- その他([技術者向] コンピューター)
- 可変レイアウト時の、floatしたulの中央寄せ
floatしたulをセンタリングする為、以下のソースを記述しました。 <section> <ul> <li>ボタン1</li> <li>ボタン2</li> </ul> </section> section { position: relative; overflow: hidden; } section ul{ float:left; left:50%; position:relative; } section ul li{ float:left; left:-50%; position:relative; width:150px; margin-right: 5px; } ひとまずはそれで上手くいったのですが、スマホサイトなので横幅を可変にしたいと思い section ul li{ float:left; left:-50%; position:relative; width:40%; margin-right: 5px; } に書き換えた所、リストの横幅がすごく狭くなってしまいました。 ％幅で横に2つ並んだリストボタンをセンタリングさせられれば、 potisionを使用したセンタリングにこだわっているわけではありませんが 自分で思いつく限りを試しても解決に至らず、質問させていただきました。 html5、css3で記述しています。 詳しい方がいらっしゃいましたら、よろしくお願い致します。
- ベストアンサー
- CSS
- floatを複数使用するとFirefoxでデザインが崩れる
CSSの質問です。 divタグを使い、div1を左にfloatさせ、div2を右にfloatさせています。そのdiv2内にまたdiv3とdiv4を配置し、div3を左にfloat、div4を右にfloatさせようとしたのですが、問題が起こりました。IEでは狙ったとおりに表示されるのですが、Firefoxではデザインが崩れてしまいます。先の例で言うと、div2がdiv1の下の行に来てしまうのです。 Firefoxでは、二重にfloatを使用することは出来ないのでしょうか？
- 締切済み
- HTML
- レスポンシブルWebデザインのボックスの中の文字
宜しくお願いします。 2行目に記したボックスを均等に配置したレイアウトで、ブラウザを縮めると1行目の ように文字が上下中央に揃う形にコーディングしたいのです。 どのようにすれば実現出来ますか？ 出来ればHTML5 CSS3で実現したいですがJavaScriptやJqueryを用いた方法でも構いません。 下記に参考ソースを記します。 http://jsfiddle.net/2VfDu/11/
- ベストアンサー
- HTML
- ホームページ作成に関する質問
現在ホームページを次のようなレイアウトで作っています。 ----------------------------- ----------------------------- (1)ヘッダー ----------------------------- (2)リンク｜ --------- (3)リンク｜ (5)コンテンツ --------- (4)リンク｜ --------- ----------------------------- (6)フッター ----------------------------- ----------------------------- 各ボックスをdiv要素で作っているのですが、(5)、(6)の配置がうまくいきません。 (5)をcssの position:relative; で相対位置を指定して配置すると、(6)が離れた下のほうにできてしまいます。誰かよい配置法を知っておられたらご教授願います。
- ベストアンサー
- HTML
- webデザインこれが普通？
たまにコーダー作業を請け負いますが、きっちりと座標、位置、サイズをあわせたデザインカンプでその通りに作れば、ちゃんとコーディング可能なデータを回してくるデザイナーさんと、ガイドの位置もずれていたり、サイズ配置座標も数ピクセルずれているデータを回してくるデザイナーさんがいます。 後者を雰囲気デザインと個人的に呼称してます。 もちろん雰囲気デザインですから、設計書がついてくることはありません。 雰囲気デザインの場合、結局何度も問い合わせたり、手直ししたり、ひどい場合には突き返したりして、ものすごくイライラします。 皆さんの周りには、後者のような雰囲気デザイナーはweb業界ではどの程度の割合居ますか？どう対応していますか？
- ベストアンサー
- HTML
- CSSのfloatについて教えてください。
商品紹介のページを作成したいのですが、★どうクラスをつけて★どうfloatしたらいいのか 分かりません。（DreamweaverCS3, CSS1,Win）画像添付してます。 いろいろ試してはみたのですが・・・・・↓ 商品紹介は４シリーズに分けて各間にボーダーをつけて商品ブロックを左右に２列ずつ表示していこうと考えています。 ○各シリーズにクラスを設定してborder-Bottomをつける ○商品ブロックを1つづつ定義リストでマークアップして<dl class="floatL"><dl class="floatR">をつけていく。（cssに.floatL {float:left} .floatR {float:right}と記述してます。） 参考書を見ながらこの方法ですると何回やってもErrorがおきてしまいました。 次に１つづつ<dl>にidをつけて１つずつfloatしていくと★2が右に寄った状態になってしまいレイアウトが崩れてしまいました。 ちなみにfloatではなくabsoluteでするとデザインビューでは回りこんで表示するのですがブラウザでは表示できませんでした。 どの方法も間違った感じがするのですが独学中のためアドバイスをいただけたらうれしいです。 宜しくお願いします。
- ベストアンサー
- CSS
お礼
widthの入力を確かに見落としておりました、ありがとうございます！ 位置変更の際には今後position:absolute;を使うようにしたいと思います。