CSSテクニックコミュの3カラムを作る際に、

作れないことはないんですが、
3カラムを作るときに、
2カラムを二つ作って３カラムにするってのが普通なんだと思うのですが、これだとソースが乱れる感じがして嫌じゃないですか？？
ほかに良い方法とかないんですかねぇ…；；

今日はこの方法で半日悩んでました(´･ω･)
結局解決策はまだ見つかってないですが…。
マージン－１５０とかポジションとかは極力使いたくないんですよねぇ…。

後、エリアの名前ですね。
これについても半日悩みました…（今日仕事してない

header や footer wrapperとかは統一できているんですが、
左ローカルメニュー部分をleft_boxとかだと、後々更新の際みんながわかるかどうか…。

皆さんはどのサイトでも、この名前は統一している　とかありますか？

ちなみに、CSSのIDとかclassの名前です。

コメント(23)

最初
全て
最新の40件

[1] mixiユーザー 10月16日 23:56

<div id="all">
<div id="left">左側</div>
<div id="center">中央</div>
<div id="right">右側</div>
</div>

#all{
width:700px;
}
#left{
width:180px;
float:left;
}
#center{
width:400px;
float:left;
}
#right{
width:120px;
float:right;
}

ってのはいかがでしょう？
睡眠不足のぼけーっとした頭で考えたので全然ダメな答えかもしれないです･･･。

[2] mixiユーザー 10月17日 00:15

リニューアル必須案件ばかりなので、left、right なんて絶対に使わないですね。次回は左右逆に、なんてゾッとします（笑）

main、sub、ex 等を使用しています。

[3] mixiユーザー 10月17日 07:09

floatをleft,left,rightだとIEだと確かおかしくなります(´･ω･)
昨日さんざん色々試しましたね＿|￣|○

リニューアル案件うちも多いです　今してる仕事もリニューアルですね

テーブルレイアウトだとどんなレイアウトでもクリア出来る自信あるのにCSSだと不安です(´･ω･)

[5] mixiユーザー 10月17日 07:37

確か、IEでセンタリング構造でしてるときに左右対称のマージンをとらなかったはずです(´･ω･)

DWのプレビューだとグチャグチャになります・・・。

[7] mixiユーザー 10月17日 07:51

やっぱりマイナスマージンなんですかぁ…。
んー…一応今してる仕事はリニューアルしたサイトを初心者さんでも簡単に更新できるようにしなくちゃいけないんですよねぇ…。CSSはいじる事は無いと思うのですが…。

難しいですね…(´･ω･)

[8] mixiユーザー 10月17日 09:31

私は3カラムの場合はpositionとfloatを使って作ってます。
＃ソースの順が思い通りにできるので。

ソースが、左側 → 中央 → 右側
の順でいいならば、floatだけでいけると思います。
製作時Mac・IE共に確認しておりますが、特に崩れた覚えはありません。

もう一度ソースをじっくり見直してみてはいかがでしょう？

あと、ソースが簡単＆コメントアウトがわかりやすければ「初心者にもやさしい」といえるのではないでしょうか。

[9] mixiユーザー 10月17日 10:27

ソースが、左側 → 中央 → 右側
floatが、left,left,rightで間違いなくいけます。
幅の設定がちゃんとしてればOKです。
ちなみに、1ピクセルで崩れます。
気をつけるのがpaddingですね。
下手をするとこれで幅が変わってしまいます。

[10] mixiユーザー 10月17日 11:38

/* ラッパー
--------------------------------------------------*/
#wrapper {
width: 760px;
margin-right: auto;
margin-left: auto;
}

/* ヘッダー
--------------------------------------------------*/
#header {
padding: 10px;
height: 60px;
background: #F2F2F2;
width: 740px;
}

/* メイン
--------------------------------------------------*/
#main {
height: 270px;
padding-bottom: 1px;
background: #FEEFBC;
width: 760px;
}

/* グローバルナビゲーション
--------------------------------------------------*/
#globalnavi {
height: 55px;
width: 740px;
background: #DDEBFF;
padding-right: 10px;
padding-left: 10px;
}

/* コンテナ
--------------------------------------------------*/
#container {
padding: 10px 10px 30px;
width: 740px;
}
#container #box_left {
float: left;
width: 190px;
margin-right: 10px;
background: #868686;
}

#container #box_center {
float: left;
width: 340px;
}

#container #box_right {
float: right;
width: 190px;
margin-left: 10px;
background: #999999;
}

/* フッター
--------------------------------------------------*/
#footer {
height: 75px;
width: 760px;
background: #FFEEF3;
}

------------------------------------------------------
<body>
<div id="wrapper">

<div id="header"> id "header" の内容がここに入ります</div>

<div id="main"> id "main" の内容がここに入ります</div>

<div id="globalnavi"> id "globalnavi" の内容がここに入ります</div>

<div id="container"> id "container" の内容がここに入ります

<div id="box_left"> id "left" の内容が入ります<br />
<br />
<br />
<br />
<br />
</div>

<div id="box_center"> id "box_center" の内容がここに入ります</div>

<div id="box_right">
<p>id "right" の内容が入ります</p>
<p>ダミーダミーダミーダミー<br />
ダミーダミーダミーダミー<br />
ダミーダミーダミーダミー<br />
ダミーダミーダミーダミー<br />
ダミーダミーダミーダミー<br />
ダミーダミーダミーダミー<br />
ダミーダミーダミーダミー<br />
ダミーダミーダミーダミー<br />
ダミーダミーダミー</p>
</div>
<br clear="all" />

</div>

<div id="footer"> id "footer" の内容がここに入ります</div>

</div>
</body>

IEだと崩れます・・・。何がおかしいのか…涙

[11] mixiユーザー 10月17日 12:16

「IEではfloat要素のmarginが2倍になる」バグとか？

[12] mixiユーザー 10月17日 12:17

div{border: solid;}
を足すとちゃんと表示される不思議。

それとは別に<br clear="all" />を取ったら表示されるようですが。

ソースを張るときは、エンベッドCSSにしてhtmlから始めてもらえるとコピペが楽でいいかもしれません。

[14] mixiユーザー 10月17日 12:55

IEがずれるということは
margin-right: auto;
margin-left: auto;
で、ラッパーを中央寄せしたいが効かない、のかと思いますが、
text-align: center;を上位のタグ（例ならbodyなど）にかけ、ラッパーにtext-align: left;などではいかがでしょう。

[15] mixiユーザー 10月17日 13:11

色々ありがとうございます＾＾；

勉強不足ですみません・・。

あとエンベッドCSSってなんですか・・？？

[16] mixiユーザー 10月17日 18:18

>あとエンベッドCSSってなんですか・・？？

ぐぐると出てきます。style要素を使ってHTML文書内にCSSを書く方式です。「DTD～CSS～html要素の終了タグ」まで書いてもらえれば、コピペしてすぐ確認できるので楽かなと。

> 14: nutsさん

実際にこのソースで表示してみるとわかるのですが、XHTML1.0の標準モード（Valid）でもIE6ではアウトでした。私も最初はそうかなと思ったんですけど。

> 15: りぅぢさん

<br clear="all" />を削除したら解決したでしょうか？

[18] mixiユーザー 10月17日 19:06

＞#container #box_left {
アンダースコア（_）って、IEではエラーじゃないですか。
私は使ったことがないので知りませんが。
もし、違っていたらごめんなさい。

[19] mixiユーザー 10月17日 20:17

>16: 腹巻4世さん
すいません、ブラウザ確認せずにソース眺めていただけだったもので orz

>18: しぇんしぇいさん
id名で先頭の文字でなければ問題なかったと思います。
＃知らずに昔使っていたので。間違ってらすいませんっ

[20] mixiユーザー 10月17日 23:44

チラ見しただけだけど、ブラウザによって崩れるってのはwidthと横マージン（パディング）を同時に設定してるからじゃないのか。

[21] mixiユーザー 10月20日 20:45

HTMLが左・右・中になってしまいますが、left・right・左右マージンとか。

[22] mixiユーザー 10月27日 09:06

>りぅぢさん
まだ勉強中なので間違っているかも知れませんが。

floatを指定しているボックスの場合marginを設定するとIEは計算が出来なくて倍の値をとってしまうらしいです。
この場合はボックスのみfloat指定して中に入れ子でclassなどのボックスを指定しそこでmarginを設定すればよいそうです。
自分はそうしています。

paddingはIEとFIREFOXなどではwidthの扱い方が違うと思いますので注意したほうがいいのかも知れません。

documentのtype宣言で見え方が大きく変わるのでここも重要だと思います。

結構面白い内容で1週間悩みました。

ログインすると、残り5件のコメントが見れるよ