CSSフロートを使ったレイアウト割の方法

2023/10/21 02:18

このQ&Aのポイント

CSSのフロートを使ったレイアウト割で質問です。ボックスを横並びにする方法について教えてください。
フロートleftを使用してボックスを横並びに詰めた場合、ボックス同士の間隔を10px空ける方法について教えてください。
CSSのフロートを使ったレイアウト割で、ボックスを等間隔で並べる方法について教えてください。

ベストアンサー

CSSのフロートを使ったレイアウト割

2011/03/31 10:21

CSSのフロートを使ったレイアウト割で質問です。あるボックス（仮に100px）を真横に並べる時の事ですが、いつもは<p>なり<div>なりにCSSでフロートleftで詰めていました。間隔を空けるためにマージンで10pxとったとして 100px+10pxで110pxのものが5つ 550pxの幅になります。ただ、最後のボックスにはマージンを付けたくありません。 ■がボックス、□が間隔の10pxだとして｜　　バナー　　｜ ■□■□■□■□■ ■□■□■□■□■ ■□■□■□■□■ ｜他のコンテンツ｜こういう風にしたいんです。（この例でいうと540pxにおさめたい）左と右が端にあって等間隔でそろっている。どんどん下にも追加していったり消したり、つめていくので一番右の最後にだけ別のCSSを付けるわけにはいきません。どんどん左詰めで詰まって行くコンテンツを作りたいのですが、このやり方だと出来ないですよね。あまり使わないんですがこういう場合って <ul>とか<il>とか使うんですか？やり方があったら教えて下さい。

peco33
お礼率79% (123/154)

HTML
回答数5
ありがとう数4

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

mat-21
ベストアンサー率56% (91/162)

2011/03/31 15:29 回答No.2

■を<li>とすると、 ▼CSS #navi { position:relative; top:0px; left:0px; width:540px; } #navi ul { position:relative; top:0px; left:-5px; width:550px; margin:0px; list-style:none; } #navi li { width:100px; margin:0px 5px; float:left; } ▼HTML <div id="navi"> <ul> <li>あああ</li> <li>いいい</li> <li>ううう</li> <li>えええ</li> <li>おおお</li> </ul> </div> id:540pxの元ボックス<div id="navi">を作り、その中に左右5px空けた幅100pxで左右5px空けた横並び<li>をulボックスを入れる。こうすると一番左の<li>の左側に5pxの空きが出るので、親ボックスの<ul>をposition:relative;left:-5pxで、<ul>ボックスを-5pxずらす。こんなんでどうですか？ブラウザ表示確認していないので、間違っていたらごめんなさい。

質問者

お礼 2011/04/11 10:11

ありがとうございます。早速、試してみたいと思います。

その他の回答 (4)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/04/08 18:36 回答No.5

五行目まで対応　以下同様に追加すると何行でも・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:orika1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css">  </style> </head> <body> <h1>サンプル</h1> <div class="BoxList"> <ul> <li>あ</li><li>い</li><li>う</li><li>え</li><li>お</li> <li>か</li><li>き</li><li>く</li><li>け</li><li>こ</li> <li>さ</li><li>し</li><li>す</li><li>せ</li><li>そ</li> <li>た</li><li>ち</li><li>つ</li><li>て</li><li>と</li> <li>な</li><li>に</li><li>ぬ</li> </ul> <hr> </body> </html>

質問者

お礼 2011/04/11 10:13

ありがとうございます。増やしていかないといけないんですね＞＜結構大変ですね。これが一般的なやり方なのでしょうかね

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/04/08 16:32 回答No.4

>途中のどれかを消しても、場所を入れ替えたりしても >つまって、各列の5個目がマージン無しになるということですね？いいえ、この方法は５個目だけです。五個置きに設定する場合も同様に兄弟セレクタを使います。

Questa
ベストアンサー率48% (13/27)

2011/03/31 21:15 回答No.3

>こういう場合って<ul>とか<il>とか使うんですか？ご質問の場合は「どんどん下にも追加していったり…」とありますから、UL、LI でよろしいんじゃないでしょうか。順番に意味があるデータ列挙なら OL、LI に、行と列それぞれに意味づけができるなら TABLE になりますが。以下は UL、LI による作例です。 (HTML) <div id="smp"> <ul> <li>1</li> <li>2</li> ... <li>50</li> </ul> </div> (CSS) #smp { width: 540px; /* (100+10)*4 + 100 */ overflow: hidden; margin: 1em auto; height: 110px; background-color: #eef; } #smp ul { margin: 0; padding: 0; width: 550px; /* (100+10)*5 */ list-style: none; } #smp li { float: left; margin-right: 10px; margin-bottom: 10px; width: 100px; height: 50px; background-color: #dcc; line-height: 50px; text-align: center; } UL の 10px のはみ出しを DIV の overflow:hidden で切り捨てています。また、この overflow:hidden で float の clear と同等の効果が得られます。 floatしているボックス（LI）のなかに、他より高いボックスがあると表示が乱れることがあるのでご注意ください。

質問者

お礼 2011/04/11 10:12

ありがとうございます。行や列に意味はないです。ただのリストですので ui、liで良さそうですね。上記の方法試してみたいと思います。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/03/31 12:28 回答No.1

＞あまり使わないんですがこういう場合って<ul>とか<il>とか使うんですか？　基本的な考え方が間違っています。　HTMLは(Hyper Text Markup Language)で文書の構造にしたがってマークアップするべきで、デザインのためにマークアップするものじゃありません。　それがナビゲーションリンクなら配列/リストでマークアップすべきです。並列な(順位のないもの)なら、ulでマークアップすべきです。(HTML5ならnav)!!! 　五つ並べて最後のものに適用させるには隣接(兄弟)セレクタを使います。 <ul class="nav"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 　なら、 ul.nav li+li+li+li+li{margin-right:0px;}/*詳細度15*/ ul.nav li{margin-right:10px;}/*詳細度11*/ 　古いIEには適用されないので <ul class="nav"> <li></li> <li></li> <li></li> <li></li> <li class="navLast"></li> </ul> uul.nav li.navLast{margin-right:0px;}/*詳細度は22なので上書きされる*/ l.nav li{margin-right:10px;} ★list-style:none; display:block; float:leftなどは省略

質問者

お礼 2011/03/31 14:01

ありがとうございます。なんとなくわかってきました！優先順位が位置だけでなく詳細度というのがあるのですね。上のやり方であれば５行の列が 10列つまり50個のボックスがあって途中のどれかを消しても、場所を入れ替えたりしてもつまって、各列の5個目がマージン無しになるということですね？実際やってみないとわかりませんが

関連するQ&A

フロートを利用した2カラムレイアウト
お世話になります。 HTML＋CSSにてサイト制作をしております。IE6のバグだと思うのですが、フロートを利用した2カラムレイアウトの段組みの間の空き具合をうまく調整することができません。なぜでしょうか？？形は、左右の2カラムで成り立っており、右半分に重要なコンテンツ部分（主にテキスト）、左半分にメニューをおいています。【HTML】 <div id="wrapper"> <div id="right"> □□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□(重要テキスト) </div> <div id="left"> □□□□□□□□□(メニュー） </div> </div> 【CSS】 #wrapper{ width:800px; background:url();←省略 } #right{ float:right; width:680px; } #left{ float:left; width:100px; } という感じです。それで、800px－(680px＋100px)＝20pxを左右の段組みの間に空きスペースとして確保したいのですが、IE6だとうまくいきません。 Firefox,safariなどでは、仕様通り左カラムは左に寄り、右カラムは右によるため、左右の段組みの間に20pxの空きが出るのですが、IE6だと左右の間にスペースはなく、かわりに右カラムの右(つまり、一番右）が空いてしまうのです。 floatを両方ともrightにして左カラムに右マージンorパディングを入れてみたのですが、今度はカラム落ちしてしまいます。どうすれば、IE6で左右の間にスペースがある2段組みができるのでしょうか？？なにか根本的に間違ってるのでしょうか？
- ベストアンサー
- HTML
CSS　floatによるレイアウト
box_mを縦に並べて、box_mの中にbox_1（左）とbox_2（右）を作りました。 CSS .box_m { width: 410px; margin: 0px 0px 20px 0px; } .box_1 { float: left; width: 200px; height: 100px; } .box_2 { float: right; width: 200px; height: 100px; margin: 0px 0px 0px 10px; } HTML <div class="box_m"> 　<div class="box_1"> 　ボックス１　</div> 　<div class="box_2"> 　ボックス２　</div> </div> <div class="box_m"> 　<div class="box_1"> 　ボックス１　</div> 　<div class="box_2"> 　ボックス２　</div> </div> IEでは意図したとおりに表示されましたが、Firefoxではbox_mの下のmargin20pxが反映されず、box_m同士がくっついています。 box_m同士の間に20pxの空間を作るにはどうしたらいいですか？
- ベストアンサー
- CSS
ＣＳＳレイアウトの２カラム左メニューでコンテンツを先にＨＴＭＬに記述できる方法をおしえてください。
趣味でＨＰを作成しております。一般的なＣＳＳレイアウト２カラム左メニューにしたいのですが、ＨＴＭＬ部分で左メニューよりコンテンツを先に記述し、ＣＳＳで左メニューで右にコンテンツがくるようにしたいです。現在のＣＳＳは * { margin:0; padding:0; } .wrapper { width: 750px; margin: 0 auto; } .header { width: 750px; height: 100%; } .main { width: 750px; } .menu { float: left; width: 200px; } .contents { float: left; width: 550px; } .footer { clear: both; width: 750px; height: 100%; } .menu ul { list-style: none; } このような記述です。つづきましてＨＴＭＬ部分は <body> <div class="wrapper"> <div class="header"> ヘッダー部分 </div> <div class="main"> <div class="contents"> コンテンツ部分 </div> <div class="menu"> 　メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> このような感じです。しかしこれだとＨＴＭＬ部分はコンテンツが先にきておりますが、メニューが右になってしまいます。これをＨＴＭＬ部分を変えずにＣＳＳでメニューを左に配置する方法はありますでしょうか？１週間くらい試行錯誤したのですが、できませんでした。お詳しい方教えてください。
- ベストアンサー
- HTML
cssでフロートを使用した段組について。
記述にドリームウィーバーMX2004を使用し、ブラウザーにIE6を使用しています。例えば、幅800pxのメインボックスを作って、その中に、幅400px、高さ200pxのレフトボックス（float:leftで左寄せ）と幅300px、高さ200px(float:rightで右寄せ）のライトボックスを作りたいとします。（左右ボックスの間に100pxの隙間を開ける）まず、こんな感じでhtmlを記述したと仮定してください。 <div class="mainbox"> <div class="leftbox">左側</div> </div> （とりあえず、左側のボックスを作る）で、cssをとりあえずここまで記述します。 .mainbox { width: 800px; background-color: #666666; } (分りやすくする為に背景色を付けておきます） .leftbox { width: 400px; height:200px; background-color: #666666; } （こちらも別の背景色を付けておきます）この時点ではfloatを指定していません。で、この時点ですと、レフトボックスの高さに合わせてメインボックスの高さも200pxになりますよね？ですが、leftboxにfloat:leftを指定すると、mainboxの高さがなくなってしまいます。また、続けて予定通りにrightboxを右にフロートさせてもmainboxの高さは無視されてしまいます。こういった場合はmainboxの高さを指定しないといけないのでしょうか？ mainboxに高さ200pxを指定すれば意図したとおりに表示されるのですが、この場合に中のどちらか（仮にleftbox）の高さが200pxを超えると、ドリームウィーバーの編集画面上はmainboxの高さは200pxのままで、IE6上ではleftboxに合わせてmainboxの高さも伸びた状態で表示されます。こういった状態がcssの仕様なのか、ブラウザによるものなのかを知りたいと思っています。トンチンカンなことを書いてるのかもしれませんが、教えて頂けると幸いです。
- ベストアンサー
- HTML
フロートするとIE7だけレイアウトがくずれる
IE7以上、FireFox3以上の対応でコーディングをしています。下記のようなレイアウトでIE7でだけ<div id="main">のカラムの中のテーブルだけがおちてしまします。レイアウトとしては、全体には幅指定をせず、サイドナビゲーションにのみ幅指定をしています。と言うのも、mainの中のテーブルの大きさが各ページ違い、かなり大きなサイズのテーブルになるため、大きくなるテーブルはブラウザからわざとはみ出させるためです。幅の小さなテーブルがあるページはブラウザ内に収まり、幅の大きなテーブルはブラウザからはみ出します。幅指定をしていないので、navi　main　両方にフロートをかけることはせず、naviにのみフロートをかけ、mainには左側にマージンを入れています。これでFFとIE8では思い通りに表示されています。 IE7だけブラウザ幅を超えるテーブルがあるページのテーブルのみが下におちてしまいます。 --------------------------------------------- <body> <div id="all"> <div id="header">ヘッダー</div> <div id="wrap" class="C"> <div id="navi">ナビゲーション</div> <div id="main"> <table> <thead> <th>あかさたな</th> <th>あかさたな</th> </thead> <tbody> <td>はまやらわ</td> <td>はまやらわ</td> </tbody> </table> </div> </div> </div> CSS------------------- #all{ min-width:850px; } #wrap{ padding:20px 20px; margin:0 0; } #navi{ float:left; width:190px; padding:0; } #main{ margin:0 0 0 200px;　 } どうすればIE7でもIE8と同じ表示にできるか、テーブルが落ちてしまわないかわかる方はいらっしゃいませんでしょうか？よろしくお願いします。
- ベストアンサー
- CSS
ドリームウィーバーでｃｓｓのことについて困っています。
一番上がヘッダー　左にサイドバー、この横」にコンテンツを製作しています。このコンテンツの中を更に、右と左に分けたいのですが、右と左のＣＳＳスタイルを製作して、左側のＣＳＳセレクタのボックスの中のフロートを左に設定しましたが、右側のよこに並列しません！どんなにがんばっても、縦に並んでしまうのですが、ヒントになるようなことでもいいので、わかる方あればよろしくお願いいたします。説明が十分でないかもしれませんがよろしくお願いいたします。　
- 締切済み
- ホームページ作成ソフト
CSSのボックス表示の違いについて
現在、以下のようなボックス配置を作っています。｜ボックス左｜｜ボックス右｜ <div class="clear"></div> ｜ボックス左｜｜ボックス右｜ <div class="clear"></div> ｜ボックス左｜｜ボックス右｜ボックス左は左フロートボックス右は右フロートにしてあります。どちらも幅は250pxにしていしてあります。そして、その中にこのように文章と画像を入れていきたいのですが、｜画像１　　｜｜文章　　　｜｜　　　　　｜｜画像２　　｜ <div class="clear"></div> 実際にやってみると、ボックスの中身の長さが右の方が長い場合、｜画像１　　｜｜文章　　　｜｜画像２　　｜｜　　　　　｜ <div class="clear"></div> このように、画像２が左のボックスの下に表示されてしまうのです。 FFとSafariならこのように｜画像１　　｜｜文章　　　｜　　　　　　　｜画像２　　｜　　　　　　　｜文章　　　｜　　　　　　　｜画像３　　｜ <div class="clear"></div> どれだけ中身を増やしても、右のボックスが下に伸びて縦長になっていくだけなのですが、どうしてIEだと上のように隣のボックスの下に画像や文章が回り込んでしまうのでしょうか。どうしてもわかりません。｜画像１　　｜｜文章　　　｜｜画像２　　｜｜画像２　　｜｜画像３　　｜｜文章　　　｜｜画像４　　｜｜画像３　　｜ <div class="clear"></div> このように、左のボックスにも中身がある場合は右ボックス内のものは下に回り込みません。何がいけないのかわかりません。おしえてください。よろしくお願いします。
- ベストアンサー
- CSS
CSSでのレイアウトについて
現在、table、flameタグを使わず、CSSだけでレイアウトを組んでいるのですが、その際、BOX同士が離れてしまってどうしてもBOX同士をくっつけれません。。Illustratorで作った画像をスライスしてそれをつなげたいのですが。。。marginも0にしてるのに、どうもBoxの底辺にわずかな隙間ができてしまうのです。。 css body { width:800px; margin:0; padding:0; border:0; } #outline { width:800px; margin:0; padding:0; border:0; }  <div class="center-free1"> <div class="main"> メインスペース </div> <div class="free1"> </div> <br class="clear"> </div> <div class="free2"> 灰色back </div> <div class="clear"> </div> <div class="under"> </div> </div> </BODY> 一応ソースも載せてみました。。周りでcssを使ってる人がいないので、誰にも聞けず、途方に暮れています。。どうかご教授願います。。
- ベストアンサー
- CSS
3カラムのレイアウト、及びdivの入れ子等
初めまして。とても基本的なことでお恥ずかしいのですが、 3カラムのレイアウト、及びdivの入れ子等について、行き詰ってしまいました。どうぞ宜しくお願い致します。下記のように、3カラムの段組みレイアウトを行いました。左・右のナビゲーションに、width:150pxで幅指定し、それぞれleft・rightにfloat、中心部分（#contents）は、左右ナビゲーション分のマージンを設定して、真ん中に配置させる方法です。 HTMLでは、可変？させたい真ん中部分は、ナビゲーションの後に記述すること、とのことでしたので、そのように致しました。＜CSS＞ #contents { margin-left:155px; margin-right:155px; } #left { float:left; width:150px; } #right { float:right; width:150px; } ＜HTML＞ <div id="left>あああああああ</div> <div id="right">いいいいいいい</div> <div id="contents">ううううううう</div> ここまでは、問題なく配置させられたのですが、【#contents】の中に、<div>や<ul>などを使用すると、画像（http://blog.goo.ne.jp/ray-chimin）のような現象が起きます。ちなみに、【#left】のheightを長く伸ばすと、IEではキレイに並びましたが、firefox等では、やはり崩れます。と言いましても、それは実験的に行った結果で、【#left】のheightを無駄に長く伸ばすことは避けたいです…(;ω;) そもそも、【#contents】の中の、「中身の並べ方」の考え方に問題があるのでしょうか…？可能な限りシンプルに、正しいCSSの使い方でレイアウトしたいと考えております…！(>_<) divの不必要な多用？（ひとつひとつの画像をdivの中に入れたり、横並びのミニバナーを、divの中にdivを入れて…のような入れ子構造）は避けたいと思っておりましたが、もしかして、それがいちばん正しいのでしょうか…？ご存じの方、どうぞご指南の程宜しくお願い致します！散文、失礼いたしました！
- ベストアンサー
- HTML
回り込みfloatの間隔について質問です
ボックスでボックスを回り込みしています。(?) …書いたほうが早いですね… HTMLが <div id="left"> 左ボックス </div> <div id="right"> 右ボックス </div> CSSが *{ margin: 0px; padding: 0px; } #left { float: left; width: 100px; height: 100px; } #right{ width: 200px; height: 100px; } といった感じです。左ボックスと右ボックスの間に1～2pxほどの間隔があいてしまいます。これをなくすにはどうすればいいですか？お願いします。
- 締切済み
- その他（インターネット・Webサービス）

CSSフロートを使ったレイアウト割の方法

CSSのフロートを使ったレイアウト割