CSSでヘッダーとフッター付きの2カラムレイアウトを書籍のサンプルを見て行ないました。
表示は何も問題ないのですが、色々とサンプルレイアウトのサイトを見ていると「main」でleft-marginfを指定しているのはなく、floatを指定しているのが多いのですが、下記でも合っているのでしょうか。
#wrap {
width: 700px;
margin: 0 auto;
text-align: left;
}
#header {
color: #fff;
}
#menu {
width: 160px;
float: left;
}
#main {
margin-left: 160px;
padding: 10px;
}
#footer {
clear: both;
padding: 10px;
}
No.2ベストアンサー
- 回答日時:
>下記でも合っているのでしょうか。
文法の問題もありますが、なにより作成側の設計の問題があります。
どの様な意図で書かれているかによっては、文法で正しくブラウザで適切に表示されても不適切なCSSと言えます。
また、1つの目的に対して手段は複数あります。
よって、どの様な設計(意図)でどの点について合っているか考えるのか明示されていない限り、回答は困難です・・・。
とりあえず margin-left と float ですが、前者は余白であり後者は配置に関わる指定であります。
また想定している事で、内部に記述される物はどの様な物を考えているのか。文字か画像か。内容のサイズは可変か。 改行などの制御はどの様に意識しているか・・・。
それらにより、余白を用いる方法を選ぶべきか配置を用いた考え方を選ぶべきかなってきて・・・。
結局、まずは設計。どの様な考え方によって行っているかがポイント・・・。
正直、何も考えずにただこう見えると作るのは、それ時点で誤りかと思います。
最後に margin-left は単に左余白の指定です。その部分もその要素の一部です。今回の例だとmenuの塊が短い場合の見え方に主に影響があるのではないかと。
float は配置の指定です。float:left; の場合、相対的な位置決めで左寄せで既にある左側の要素の次に位置するという事で、決して余白があるとかいう事ではありません。それぞれ別の要素が並ぶという事で、場合によっては改行されます・・・。
menuとmainでfloatにするということ→witdh指定を両方にしなくちゃいけない→IEとMozillaでmainのpadding10px分、幅のズレが出てしまう。
それでこのようにしていましたが、色々と教えていただいた参考サイトなどを見て周り、結局mainブロックを包括するブロックをもう1つ中にいれてpaddingはそちらで指定することにしようと思います。
koutarou504さんのおっしゃる通り、「設計」を最初にすることが大切だと思いました。
seawさん、質問の仕方が言葉足らずですみません。
大変参考になりました。
ありがとうございました。
No.1
- 回答日時:
HTMLが無いので、以下のように勝手に解釈しましたが、違っていたら言ってください。
>下記でも合っているのでしょうか。
CSSの指定に、正解も不正解もありません。(文法違反は存在しますが…。)
スタールシートは勉強していくうちに、理解できます。
CSSの勉強には、
CSS Dencitieというサイトを強くおすすめします。
http://www6.plala.or.jp/go_west/nextcss/
しかし、スタイルシートでのレイアウトでは、ブラウザごとに対応状況がまちまちなので、注意が必要です。
※参考
http://www6.plala.or.jp/go_west/nextcss/tip/ua_b …
http://cssbug.at.infoseek.co.jp/
http://level.s69.xrea.com/mozilla/index.cgi?id=2 …
http://internet.watch.impress.co.jp/cda/news/200 …
------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
body
{
background-color: #ffffff;
color: #000000;
}
#wrap {
width: 700px;
margin: 0 auto;
text-align: left;
background-color: #0000ff;
}
#header {
color: #fff;
background-color: #9900ff;
}
#menu {
width: 160px;
float: left;
background-color: #3366cc;
}
#main {
margin-left: 160px;
padding: 10px;
background-color: #66cc33;
}
#footer {
clear: both;
padding: 10px;
background-color: #37475b;
}
</style>
<title>サンプル</title>
</head>
<body>
<div id="wrap">
wrap
<div id="header">
header
</div>
<div id="menu">
menu
</div>
<div id="main">
main
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
menuとmainでfloatにするということ→witdh指定を両方にしなくちゃいけない→IEとMozillaでmainのpadding10px分、幅のズレが出てしまう。
それでこのようにしていましたが、色々と教えていただいた参考サイトなどを見て周り、結局mainブロックを包括するブロックをもう1つ中にいれてpaddingはそちらで指定することにしようと思います。
koutarou504さんのおっしゃる通り、「設計」を最初にすることが大切だと思いました。
seawさん、質問の仕方が言葉足らずですみません。
大変参考になりました。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
htmlタグ 詳しいかた
-
<h1>タグの後の行間を詰めたい。
-
CSSでテキストを垂直、中央に設...
-
HTMLフォームのSELECTの幅を一...
-
インラインフレームの表示位置...
-
INPUT TEXT内の文字位置を指定...
-
<legend>で表示されるタイトル...
-
スタイルシートと画像リンクの下線
-
エクセルでサイズに合ったもの...
-
Excelの列や行の幅を表示...
-
HTMLでテーブルを縦に並べたい!
-
PDFへてのテキストボックスにて...
-
Excelの列の幅(ピクセル)につい...
-
パソコンでランドルト環の作成...
-
ホームページビルダーで、急に...
-
表の幅が広がる
-
ホームページビルダーの表にお...
-
TABLEの横枠線を点線にしたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
インラインフレームの表示位置...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
macとwindowsのレイアウト崩れ...
-
INPUT TEXT内の文字位置を指定...
-
text-alignの解除の方法
-
ホームページビルダー 空白の...
-
Formタグのブロックの高さについて
-
端から端まで横線を引きたい
-
<legend>で表示されるタイトル...
-
なぜ左に寄っているの?
-
FireFoxで見るとブラウザの幅に...
-
コードを書いて下さい( ; ; )...
-
アップロードするサーバーによ...
-
CSSでh1とその下の文字との行間...
-
文字を内側にも色の付いた枠で...
-
テキストボックスの文字を右揃...
-
Dreamweaverで画面サイズを一定...
おすすめ情報