CSSのフロートを使ったレイアウト割で質問です。
あるボックス(仮に100px)を真横に並べる時の事ですが、
いつもは<p>なり<div>なりにCSSでフロートleftで詰めていました。
間隔を空けるためにマージンで10pxとったとして
100px+10pxで110pxのものが5つ
550pxの幅になります。
ただ、最後のボックスにはマージンを付けたくありません。
■がボックス、□が間隔の10pxだとして
| バナー |
■□■□■□■□■
■□■□■□■□■
■□■□■□■□■
|他のコンテンツ|
こういう風にしたいんです。(この例でいうと540pxにおさめたい)
左と右が端にあって等間隔でそろっている。
どんどん下にも追加していったり消したり、つめていくので
一番右の最後にだけ別のCSSを付けるわけにはいきません。
どんどん左詰めで詰まって行く
コンテンツを作りたいのですが、このやり方だと出来ないですよね。
あまり使わないんですが
こういう場合って
<ul>とか<il>とか使うんですか?
やり方があったら教えて下さい。
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ずらす。
こんなんでどうですか?
ブラウザ表示確認していないので、間違っていたらごめんなさい。
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">
<!--
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>
No.4
- 回答日時:
>途中のどれかを消しても、場所を入れ替えたりしても
>つまって、各列の5個目がマージン無しになるということですね?
いいえ、この方法は5個目だけです。
五個置きに設定する場合も同様に兄弟セレクタを使います。
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)のなかに、他より高いボックスがあると表示が乱れることがあるのでご注意ください。
ありがとうございます。
行や列に意味はないです。ただのリストですので
ui、liで良さそうですね。
上記の方法試してみたいと思います。
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などは省略
ありがとうございます。なんとなくわかってきました!
優先順位が位置だけでなく
詳細度というのがあるのですね。
上のやり方であれば
5行の列が
10列
つまり50個のボックスがあって
途中のどれかを消しても、場所を入れ替えたりしても
つまって、各列の5個目がマージン無しになるということですね?
実際やってみないとわかりませんが
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- 楽器・演奏 電子キーボードのCASIO Privia PX-S1100 とPrivia PX-S1000のどちら 1 2023/07/31 20:56
- プリンタ・スキャナー プリンターの電源について 3 2022/10/16 20:13
- その他(パソコン・スマホ・電化製品) 新品未使用品のPX-M650F というエプソンのプリンターを売りたいのですが ハードオフかセカンドス 6 2022/12/17 16:53
- 数学 p,qを整数とし、f(x)=x^2+px+qとおく。 有理数aが方程式f(x)=0の1つの解ならば、 3 2023/05/01 21:45
- プリンタ・スキャナー エプソンの PX 105 プリンター ブラックのみカートリッジ使用する設定 教えてください 1 2023/03/20 17:02
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSが上手く反映されないみたい...
-
htmlの<ol>タグで、数字などを...
-
<table>の高さ固定。情報増加時...
-
ulタグやliタグの中でbrタグ...
-
li 長さ指定
-
真横に展開するドロップダウン...
-
ページを開いているときのリン...
-
display:table;を多段表示させたい
-
URLにアクセスした際に指定した...
-
プルダウンメニューの背景色を...
-
HTMLのdlとul どちらが正しいと...
-
html <ul></ul>の並びで一行空...
-
サイドバーの作り方を教えてく...
-
リストの数字のフォントサイズ...
-
【CSS】メニュー上部に固定させ...
-
リストマーカーをボックス内に...
-
html/cssの、navを2段にする...
-
liタグの中に<p>タグやら<dl>を...
-
CSSでつくったメニューのアニメ...
-
pythonリストの特定の値を表示h...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
divタグ内のコンテンツが重なっ...
-
リストの数字のフォントサイズ...
-
html/cssの、navを2段にする...
-
レスポンシブWebデザインでリン...
-
ulタグやliタグの中でbrタグ...
-
複数行にまたがる括弧を表示し...
-
<table>の高さ固定。情報増加時...
-
画像にリンクを張ると画像がず...
-
html <ul></ul>の並びで一行空...
-
<ul><li></li></ul>にするメリ...
-
ページを開いているときのリン...
-
HTMLで組織図を作成する方法
-
リンク文字同士の間隔を開ける...
-
htmlの<ol>タグで、数字などを...
-
ボタンを横に並べて表示させる方法
-
bxsliderの画像が左によってしまう
-
番号付きリスト(<Ol><Li>・・...
-
HTMLもしくはCSSのULでリンクを...
おすすめ情報