枠組みをつくりたい！！

解決済

質問者：yahoolivevoda
質問日時：2005/04/18 07:55
回答数：2件

このページを参考にＨＰをつくっています。http://ameblo.jp/img/index_header_border_green.gif
このページのような枠組みをつくるにはどうすればいいでしょうか？テーブルを使ってやる以外にもっとスマートな方法はありますか。また枠線の色を調べるにはどうすればよいでしょうか？

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： digo
回答日時：2005/04/18 18:44

>サンプルのようにうまくそれぞれの間隔がとれないのはどうしてでしょうか・・。

間隔の（というかボーダー！？）を黒線にして、バッググラウンドを白にしようとすると、どうしてもナビゲーターとコンテンツが上下（うえした）の順で表示されてしまいます。

例えば、コンテンツ部分を80%、ナビゲーター部分を20%と段組した場合にボーダーやマージンを取ると、その幅は％指定した中に含まれないので合計の幅が100%以上になってしまいます。なので上下の順で表示されてしまうのではないでしょうか？

ナビとコンテンツの両方に幅１ピクセルのボーダーを指定した場合、それぞれのブロックの外側左右に１ピクセル増えるので、合計で幅４ピクセル分増えることを考慮しなければいけません。ナビかコンテンツの幅を1%でも減らせば左右に並ぶようになりますよ。

1%減らすと、ウィンドウの内側の幅が600ピクセルの時に6ピクセル分の空きが出ます。内容によってはもう少し余裕を取った方が良いかも知れません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#my_navigation {
float: left;
width: 20%;
border: 1px solid #000000;
}
#my_contents {
float: left;
width : 79%; /* ← ココで余裕を取ってます */
border: 1px solid #000000;
}
</style>
</head>
<body>
<div id="my_navigation">
ここにナビゲーション
</div>
<div id="my_contents">
ここにメインコンテンツ
</div>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： digo
回答日時：2005/04/18 10:32

http://ameblo.jp/ のように段組したいというコトですか？
ここはテーブルを使わないでCSSで段組しているみたいですね。コレがスマートな方法ではないかと思います。

段組をした場合、テーブルでもCSSでも見る環境や身体的な制約によっては期待通りに内容が伝わらないこともあります。
テーブルに対応していない状況ではHTMLを書き換える位しか対処法はありませんが、CSSを使ってレイアウトすれば、本文と分けてページをデザインできるので、最悪でもCSSを外してもらえば内容が伝わらないということは無いです。

CSSでレイアウトするのは最初は面倒かもしれませんが、慣れれば管理が格段に楽になりますよ。以下のサイトを参考にされると良いかもです。

Webアクセシビリティとは？ - インフォアクシア -：
http://www.infoaxia.com/awareness/accessibility. …

Webアクセシビリティ・ユーザビリティ：
http://homepage2.nifty.com/web_master/technique. …

スタイルシート段組：
http://desperadoes.biz/style/dan/index.php

デスクトップ上の色を調べるときは、私は Color Setting System for S を使ってます。
http://www.vector.co.jp/soft/win95/net/se177252. …