- ベストアンサー
枠組みをつくりたい！！
このページを参考にＨＰをつくっています。http://ameblo.jp/img/index_header_border_green.gif このページのような枠組みをつくるにはどうすればいいでしょうか？テーブルを使ってやる以外にもっとスマートな方法はありますか。また枠線の色を調べるにはどうすればよいでしょうか？
- yahoolivevoda
- お礼率16% (9/53)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
>サンプルのようにうまくそれぞれの間隔がとれないのはどうしてでしょうか・・。間隔の（というかボーダー！？）を黒線にして、バッググラウンドを白にしようとすると、どうしてもナビゲーターとコンテンツが上下（うえした）の順で表示されてしまいます。 例えば、コンテンツ部分を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>
その他の回答 (1)
- digo
- ベストアンサー率66% (2/3)
http://ameblo.jp/ のように段組したいというコトですか？ ここはテーブルを使わないでCSSで段組しているみたいですね。コレがスマートな方法ではないかと思います。 段組をした場合、テーブルでもCSSでも見る環境や身体的な制約によっては期待通りに内容が伝わらないこともあります。 テーブルに対応していない状況ではHTMLを書き換える位しか対処法はありませんが、CSSを使ってレイアウトすれば、本文と分けてページをデザインできるので、最悪でもCSSを外してもらえば内容が伝わらないということは無いです。 CSSでレイアウトするのは最初は面倒かもしれませんが、慣れれば管理が格段に楽になりますよ。以下のサイトを参考にされると良いかもです。 Webアクセシビリティとは？ - インフォアクシア -： http://www.infoaxia.com/awareness/accessibility.html Webアクセシビリティ・ユーザビリティ： http://homepage2.nifty.com/web_master/technique.html スタイルシート段組： http://desperadoes.biz/style/dan/index.php デスクトップ上の色を調べるときは、私は Color Setting System for S を使ってます。 http://www.vector.co.jp/soft/win95/net/se177252.html
お礼
いきなりの投稿ありがとうございます。 早速参考にさせていただきます。
補足
サンプルのようにうまくそれぞれの間隔がとれないのはどうしてでしょうか・・。間隔の（というかボーダー！？）を黒線にして、バッググラウンドを白にしようとすると、どうしてもナビゲーターとコンテンツが上下（うえした）の順で表示されてしまいます。