< HOME / 掲示板 / スタイルシート質問板 / 過去ログ / 一覧 / ボックスを数個並べた回り込み

---

0   名前： もや ： 2006/06/06（火） 01:25  ID:fyOUs9Dg

外部スタイルシートを作り始めています。
目次として２００ｐｘのボックスを作り縦数十個並べました。
この隣りにボックスや文字を入れるときは、どうすればよいのでしょうか。
数十個のボックスを一つの大きなボックスでまとめて<float>でするのでしょうか。
やってみたのですが、その次の必要のないボックスに<div class="*****">と（clear:boht）しましても隣りに並びます。
設定が悪いのか、プレビューではきっちりと見られるのですが、作成画面では重なります。

サイトは複製し作り直していてガタガタになっておりますのでアップしておりません。
上手く説明できませんが、
ここに載っている他の質問欄なども参考に致しましたが、上手く行きません。

---

1   名前： もや ： 2006/06/06（火） 01:25  ID:fyOUs9Dg

これで書き方がよいか判りませんがタグの付け足しです。

.float1{
float : left;/*左回り込み*/
}

.box1{
padding-top : 2%;
padding-left : 2%;
padding-right : 2%;
padding-bottom : 2%;
border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;border-color : #009900 #009900 #009900 #009900;
width : 200px;
}

.box3{
padding-top : 2%;/*500*/
padding-left : 2%;
padding-right : 2%;
padding-bottom : 2%;

border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;
border-color : #009900 #009900 #009900 #009900;
width : 500px;
}

.float-c{
clear : both;/*回り込み解除*/
}

ここからhtmlです。
<div class="float1">
<div class="box1">
</div></div>
<div class="float1">
<div class="box3">
</div></div>
<div class="float-c">
<div class="box3">
</div></div>
このように記述しているのですが、３つがピタッとくっついて離れません。
どこを直せばよいでしょうか。

---

2   名前： 匿名 ： 2006/06/06（火） 01:25  ID:Iz2k4TNT

読解力が足りなくて、最終的にどのような見た目になればいいのかがちょっとわかりません。

左側にbox1が縦にずらーっと並び、
その横に文章など内容が入るbox3が何個か入るようにしたい…という事なのでしょうか？

※３つがピタッとくっついて離れません、という記述もわからないです。
　…というのも、載せられたソースをそのままエディタにコピペした所、３つが横並びしなかったもので。

.float1{
float : left;/*左回り込み*/
width : 200px;
}
.float2{
}


.box1{
padding-top : 2%;
padding-left : 2%;
padding-right : 2%;
padding-bottom : 2%;
border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;border-color : #009900 #009900 #009900 #009900;
width : 200px;
}

.box3{
padding-top : 2%;/*500*/
padding-left : 2%;
padding-right : 2%;
padding-bottom : 2%;

border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;
border-color : #009900 #009900 #009900 #009900;
width : 500px;
}

.float-c{
clear : both;/*回り込み解除*/
}




<div class="float1">
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
</div>
<div class="float2">
<div class="box3">
</div>
<div class="box3">
</div>
</div>

↑勝手な解釈でちょこっとやってみました。
float2の部分は省略中。…レスついてから考えます。

---

3   名前： もや ： 2006/06/06（火） 01:25  ID:fyOUs9Dg

回答有り難うございます。
上記してみました。
<div class="float1">
<div class="box1">あ
</div>
<div class="box1">あ
</div>
<div class="box1">あ
</div>
<div class="box1">あ
</div>
<div class="box1">あ
</div>
</div>
<div class="float2">
<div class="box3">い
</div>
<div class="box3">う
</div>
</div>
『あ』と『い』が横並びになり、（今は離れていますが）
『う』を回り込みを解除して下に持ってきたいのです。

ご回答頂いたのを見ていまして不思議に思ったのですが、
float2はスタイルシートに詳細が設定されておりませんのに
（float : left;/*左回り込み*/width : 200px;が無い）
何故使えているのでしょうか？

---

4   名前： 匿名 ： 2006/06/06（火） 01:25  ID:Iz2k4TNT

>float2はスタイルシートに詳細が設定されておりませんのに
>（float : left;/*左回り込み*/width : 200px;が無い）
>何故使えているのでしょうか？

名前をつけはしたけれど、内容を記述しなくとも
divタグが変化してしまうわけではないので、元々の効果です。
class名は必ずつけなくてはならないわけではない…はずですよ。

ええと、本題です。

.float1{
float : left;/*左回り込み*/
width : 200px;
}


.box1{
padding-top : 2%;
padding-left : 2%;
padding-right : 2%;
padding-bottom : 2%;
border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;border-color : #009900 #009900 #009900 #009900;
width : 200px;
}

.box3{
padding-top : 2%;/*500*/
padding-left : 2%;
padding-right : 2%;
padding-bottom : 2%;

border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;
border-color : #009900 #009900 #009900 #009900;
width : 500px;
}

.float-c{
clear : both;/*回り込み解除*/
margin: 10px 0px 0px 0px;
}

float2はお役ごめんになったので削除しました。
あと自分でわかりやすいように「う」をちょっと離すのにfloat-cにマージン入れましたがここは修正してください。

<div class="float1">
<div class="box1">あ
</div>
<div class="box1">あ
</div>
<div class="box1">あ
</div>
<div class="box1">あ
</div>
<div class="box1">あ
</div>
</div>
<div class="box3">い
</div>

<div class="float-c">
<div class="box3">う
</div>
</div>

こんな感じでしょうか？

---

5   名前： もや ： 2006/06/06（火） 01:25  ID:fyOUs9Dg

説明が上手くできませんでしたのに有り難うございます！これが作りたかったのです。
昨日から徹夜でやっていましたので、とっても気持ちがよいです。

ただ、プレビューでは望んでいたものになっておりますが、
編集ページでは「う」は回り込みが解除されていない状態で「い」のすぐ下にありますが、
これは気にしなくて良いのですよね。

＞名前をつけはしたけれど、内容を記述しなくとも
＞divタグが変化してしまうわけではないので、元々の効果です。
＞class名は必ずつけなくてはならないわけではない…はずですよ。

勉強不足でした。

匿名さん、やっと先に進めます！本当に有り難うございました！

---

6   名前： 匿名 ： 2006/06/06（火） 01:25  ID:Iz2k4TNT

何の編集ページなのか、わかりませんけれども、
一度アップロードして（HTMLファイルの名前は適当にtestとかにでもするとか）
ファイルをブラウザで開いてみて問題なければ、よろしいのかと思います。

なんにせよ喜んでいただけてよかったです＾＾

---

7   名前： Z ◆XTzyosZXcL ： 2006/06/06（火） 01:25  ID:7f4VEd9L

　気が付くのが遅かったため、もうこのスレッドをご覧になっていないかもしれませんが、目に留まったので(^^;

>>0
>目次として２００ｐｘのボックスを作り縦数十個並べました。
　えーと、目次として箇条書きにするのでしたらUL要素（またはOL要素）＋LI要素の組み合わせでマークアップした方がよいのではないでしょうか？(^^;
　その上で、ある塊をDIV要素でくくって段組を考える方が自然だと思うのですが。

HTML4.01仕様書）
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html
http://www.w3.org/TR/html401/struct/lists.html

CSS仕様書和訳）
http://www.y-adagio.com/public/standards/tr_css2/toc.html

参考）
http://members.jcom.home.ne.jp/jintrick/Personal/markup.html
http://members.jcom.home.ne.jp/jintrick/Personal/bad_css.html
http://elastic965.blog52.fc2.com/blog-entry-27.html

---

8   名前： もや ： 2006/06/06（火） 01:25  ［URL］  ID:fyOUs9Dg

Z 様遅くなりましたが、今日気づきました。
有り難うございます。
もう少し勉強してみます。

早速ですが、匿名様　とのやりとりで、ビルダーの編集の画面（制作の画面）で
回り込みをしたときの画面が重なると言った件です。

＞一度アップロードして（HTMLファイルの名前は適当にtestとかにでもするとか）
＞ファイルをブラウザで開いてみて問題なければ、よろしいのかと思います。

とお応え頂いたので、アップしたのですが次のページに進むとやっぱり回り込んだ所の
文字が重なり気になってきました。
アップは普通に出来ておりますが、編集がしにくいのですが重なりをなくすことは出来ませんか？

---

9   名前： Z ◆XTzyosZXcL ： 2006/06/06（火） 01:25  ID:7f4VEd9L

　あー、ホームページビルダーですか。
　オーサリングツールをいっさい使っていないので、私はその質問にご回答することはできかねます(^^;
　CSSによるポジショニングによって重なってしまう、ということであればプロパティの座標指定系統を疑うことになると思うのですが（「どこでも配置」モードでの作成はお奨めできません）、操作方法まで考えるとなるとそこはやはり公式サポートかユーザーズコミュニティをお探し頂いた方が解決しやすいと思うのです。

　参考までに、ホームページビルダーでよりよいHTML(XHTML)作りをするためのお勧めサイトをご紹介しておきますね。

ホームページ・ビルダーV9ではじめてのWebページ
http://hpbuilder.net/

---

10   名前： もや ： 2006/06/06（火） 01:25  ID:fyOUs9Dg

ご回答有り難うございます。
ビルダーを使って制作しておりますが、
「どこでも配置」モードでは使っておりません。
でも見て頂いてZ様がそういうのなら、もしかすると、スタイルシートがそうなっているのかもしれません。
（ビルダーのスタイルシートを使っていまして、それが「どこでも配置」モードになっているのかも。）

早速、すべてやり直してみます。
有り難うございました。

---

11   名前： Z ◆XTzyosZXcL ： 2006/06/06（火） 01:25  ID:7f4VEd9L

　ひょっとしてインラインスタイルシート（HTML文書内にSTYLE要素でCSSを記述する）をページ毎に設定してませんか？
　もしそうであれば、一つのページのCSSを訂正しても、他のページには反映されませんからいちいちページ数だけCSSを直さなければなりません。
　複数ページで同じような見かけをさせるにはCSSを外部ファイル化してLINK要素で参照させるほうがいいです（というより、CSSのメリットはそれにあるといってよいでしょう）。
　ホームページビルダーでそれが可能なのかまで存じ上げないもので、もしかしたらこの提案は無用の長物かもしれないのですが、>>8で「次のページに進むとやっぱり回り込んだ所の文字が重なり気になってきました。」とあった点がちょっと気になりましたので。

参考：
http://members.jcom.home.ne.jp/pctips/www/cssmerit.html

---

12   名前： naka ◆9gBxIXDbBT ： 2006/06/06（火） 01:25

こっちに移動して終了済み。
http://hpb.cool.ne.jp/wforum/wforum.cgi?no=4622&mode=allread

---

---

TAG indexについて - ご利用について - プライバシーポリシー - 連絡フォーム - 広告掲載のご案内 - お問い合わせ

［ホスティング by XREAサーバー］

Copyright (C) 1997-2008 TAG index. All Rights Reserved.