プロが教える店舗&オフィスのセキュリティ対策術

CSSのフロートを使ったレイアウト割で質問です。

あるボックス(仮に100px)を真横に並べる時の事ですが、
いつもは<p>なり<div>なりにCSSでフロートleftで詰めていました。

間隔を空けるためにマージンで10pxとったとして

100px+10pxで110pxのものが5つ

550pxの幅になります。

ただ、最後のボックスにはマージンを付けたくありません。
■がボックス、□が間隔の10pxだとして

|  バナー  |
■□■□■□■□■
■□■□■□■□■
■□■□■□■□■
|他のコンテンツ|

こういう風にしたいんです。(この例でいうと540pxにおさめたい)
左と右が端にあって等間隔でそろっている。

どんどん下にも追加していったり消したり、つめていくので
一番右の最後にだけ別のCSSを付けるわけにはいきません。

どんどん左詰めで詰まって行く
コンテンツを作りたいのですが、このやり方だと出来ないですよね。

あまり使わないんですが
こういう場合って
<ul>とか<il>とか使うんですか?

やり方があったら教えて下さい。

A 回答 (5件)

■を<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ずらす。

こんなんでどうですか?
ブラウザ表示確認していないので、間違っていたらごめんなさい。
    • good
    • 0
この回答へのお礼

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

お礼日時:2011/04/11 10:11

五行目まで対応


 以下同様に追加すると何行でも・・
<!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">
<!--
div.BoxList {width:600px;border:solid red 1px;padding:10px 0px 0px 0px;height:auto;}
div.BoxList ul{display:block;list-style:none;width:100%;padding:0px;margin:0px;}
div.BoxList ul li{display:block;list-style:none;width:100px;height:60px;margin:5px 10px 5px 0px;border:solid blue 1px;padding:5px;float:left;}
div.BoxList ul li+li+li+li+li,
div.BoxList ul li+li+li+li+li+li+li+li+li+li,
div.BoxList ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
div.BoxList ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
div.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
{margin-right:0px;}
div.BoxList ul li+li+li+li+li+li,
div.BoxList ul li+li+li+li+li+li+li+li+li+li+li,
div.BoxList ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
div.BoxList ul li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
div.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
{margin-right:10px;border-color:green;}
div.BoxList hr{height:1px;visibility:hidden;clear:left;border:none;}
}

-->
</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>
    • good
    • 0
この回答へのお礼

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

お礼日時:2011/04/11 10:13

>途中のどれかを消しても、場所を入れ替えたりしても


>つまって、各列の5個目がマージン無しになるということですね?
いいえ、この方法は5個目だけです。
五個置きに設定する場合も同様に兄弟セレクタを使います。
    • good
    • 0

>こういう場合って<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)のなかに、他より高いボックスがあると表示が乱れることがあるのでご注意ください。
    • good
    • 0
この回答へのお礼

ありがとうございます。
行や列に意味はないです。ただのリストですので
ui、liで良さそうですね。

上記の方法試してみたいと思います。

お礼日時:2011/04/11 10:12

>あまり使わないんですがこういう場合って<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などは省略
    • good
    • 0
この回答へのお礼

ありがとうございます。なんとなくわかってきました!
優先順位が位置だけでなく
詳細度というのがあるのですね。

上のやり方であれば
5行の列が
10列
つまり50個のボックスがあって
途中のどれかを消しても、場所を入れ替えたりしても
つまって、各列の5個目がマージン無しになるということですね?

実際やってみないとわかりませんが

お礼日時:2011/03/31 14:01

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!