スタイルシートを使って段組でのバディングは？

解決済

質問者：noro6857
質問日時：2006/12/31 15:49
回答数：4件

書籍にのっていたスタイルシートでの段組を
次のように記述してみました。

<DIV style="float:left;border-right:3px dashed #000000;width:50%;padding-left:10px;">
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
</DIV><DIV style="padding-left:10px">　
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
</DIV>

中央に点線が入って文章が左右に分けられるのですが、
文字と中央線の余白がないので、paddingやmarginを使って
みたのですが、特に右側文章の左にある点線と文字の空間がどうしてもできません。（左側部分のの左右余白は機能するのですが）
tableを使ったときはpadding-leftで設定できたのですが、正しい方法がありましたらお教えください。
書籍にもここらへんの説明がないのです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

No.1

回答者： noname#56851
回答日時：2006/12/31 17:17

文字を<p></p>で囲みpにmargin-right margin-left を指定してみてはどうですか。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
ご指摘の方法を試してみましたが、やはり効果はありませんでした。

通報する

お礼日時：2006/12/31 17:45

No.2ベストアンサー

回答者： vista2446
回答日時：2006/12/31 22:06

cssで段組を組むときは、ボックスのサイズをきちんと記述しましょう。

<div style="width: 800px; height: 30px;">
<div style="float:left; border-right: 3px dashed #000000; width: 387px; height: 30px; padding-left: 10px;">
ああああああああああああああああああああああああああああああああああああああああああああ
</div>
<div style="float:left; padding-left: 10px; width: 390px; height: 30px;">
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
</div>
</div>

- 0
- 件

通報する

この回答へのお礼

どうもありがとうございました。
ご指定の記述で実現することがわかりました。
枠サイズを設定しておかないといけないんですね。

ところで単純な質問ですが、記述の中で
２番目の<DIV>のfloattがleftになっていますが、これは１段目で左寄せにした結果右側に送られると思うので記述不要だと思いますが、なにか意味があるのでしょうか。
あまり詳しくないので、よろしくお願いします。

通報する

お礼日時：2006/12/31 22:28

No.3

回答者： crepon133
回答日時：2006/12/31 22:07

幅を％で指定すると、IE、Opera、Firefox、など全てに対応させるのが難しいです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>サンプル</title>
</head>
<body>
<div style="width:100%;margin:0%;padding:0%;">
<div style="width:47%;float:left;padding-right:2%;border-right:3px dashed #000000;">○○○○○○○○○　○○○○○○○○○○○　○○○○○○　○○○○○　○○○○○○○○○○○
</div>
<div style="width:48%;float:right;padding-left:2%;">○○○○○○○○○　○○○○○○○○○○○　○○○○○○　○○○○○　○○○○○○○○○○○</div>
<br style="clear:both">
</div>
</body>
</html>

ご参考：
CSSによる段組（マルチカラム）レイアウト講座
http://www.geocities.jp/multi_column/

- 0
- 件

通報する

この回答へのお礼

どうもありがとうございました。
％使用は注意が必要みたいですね。
紹介していただいたサイトをじっくり見てもう少しベンキョウしようと思います。ありがとうございました。

通報する

お礼日時：2006/12/31 22:37

No.4

回答者： vista2446
回答日時：2006/12/31 23:02

ANo.2です。

＞<DIV>のfloattがleftになっていますが、これは１段目で左寄せにした結果右側に送られると思うので記述不要だと思いますが、なにか意味があるのでしょうか。

閲覧者が「InternetExplorer」でかならず「最大化」の状態で閲覧するとは限らないので、出来る限り、他のブラウザにも対応できるように記述してるわけです。
floatを外したり、いろいろ記述をかえて検証してみてください。意外なところでページレイアウトが崩れますよ～
百聞は一見にしかず。結果を目で見て記述方法を覚えるのが、一番わかりやすいと思います。