- ベストアンサー
cssレイアウトで表を作成したいです。
添付した画像の様な表組みをテーブルタグを使用せずに作成するのは可能なのでしょうか？ もしくは表はテーブルタグを使用したほうが、ソースの量は少なくて済むのでしょうか 全体を囲うBoxAは"height:auto;"を指定してボックスBoxBのテキストの量によって可変する。BoxCのテキストは常にBoxBの最下行と揃える。 /*css*/ .BoxA{ width:490px; height:auto; margin:0px auto 10px auto; background-color:#999999; border:solid #999999 1px;} .BoxA .BoxB{ width:350px; height:auto; margin:0px; padding:5px; float:left; background-color:#fffbfb;} .BoxA .BoxC{ width:129px; height:auto; margin:0px; padding:0px; float:right; background-color:#fffbfb; } .clearfloat { clear:both;} <!--ソース--> <div class="BoxA"> <div class="BoxB"> <p>■■■■■■■■■■<br /> ■■■■■■■■■■<p/> </div> <div class="BoxC"> <p style="margin:auto 0px 0px;">■■■■■■■■■■</p> </div> <br class="clearfloat" /> </div>
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
> DOCTYPE宣言によって変わるものなのでしょうか？ No.4で申し上げた事はおわかり頂けていませんでしたでしょうか？ どのブラウザがどの条件下で「標準準拠モード」か「後方互換モード」に切り替わる（DOCTYPEスイッチ、というものです）かには、DOCTYPE宣言の種類も関わります。 先日、同様の質問に回答しておりますので、重複になりますが関連部分を引用させて頂きます。 引用ここから---------------------------------------------------------- 後方互換モードでボックスモデルの計算方法の解釈が違ってしまう場合に起こります。 以下のサイトには非常にわかりやすい比較検証の一覧があります。 http://2xup.org/log/2007/07/27-2111 上記からそのまま関連する説明を以下に抜粋しておきます。 （抜粋ここから） 指定した幅 (width) と高さ (height) の外側に border と padding が足される content-box (正しい解釈) と、指定した幅と高さが border と含めてしまう border-box があります。Internet Explorer では後方 (過去) 互換モードで border-box で解釈するので、Windows IE 6 では注意が必要です。 （抜粋ここまで） 引用ここまで---------------------------------------------------------- 上記の参考サイトを見て頂ければすぐわかりますが、 > ちなみにXHTML 1.0 Transitionalなのですが XHTMLの場合、文書の先頭にXML宣言が有るか無いかによって、IE6でのDOCTYPEスイッチは切り替わってしまうのです（他の主要モダン・ブラウザやIEでも7以上であれば変わりません）。そしてXHTMLの場合”XML宣言が有る”事が強く求められるのですが、IE6では”XML宣言が有る”事で「後方互換モード」になってしまい、ボックスモデルの計算方法が他と食い違ってしまうという非常にやっかいな事態を引き起こしてしまいます。 なので、質問者様のXHTML 1.0 Transitionalの文書の先頭にXML宣言が有るか無いかでも、回答は違ってきます。 とりあえず、XML宣言が無くIE6でも標準準拠モードになっているという仮定でお答えします。 ＃IE6が後方互換モードになっている場合も対応可能ですが、CSSでの指定の仕方を振り分けるとか、（それに伴い）HTMLの方のマークアップを変えるなりする対処が必要になってくるので。 3回に分けた回答でちょっとややこしくなってしまった点があるかもしれないので、整理してサンプルを仕切直します。 ＃下記のサンプルは文字コードを（XML宣言の省略ができるとされる）UTF-8にしています。 --------------------------------------------------------------------- 【HTML】 --------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>サンプル</title> <link rel="stylesheet" href="sample.css" type="text/css" media="all" /> </head> <body> <div id="BoxA"> <p class="hoge" id="BoxB">テキスト<br />テキスト<br />テキスト</p> <p class="hoge" id="BoxC">テキスト</p> </div> <p>下のコンテンツ下のコンテンツ下のコンテンツ下のコンテンツ下のコンテンツ下のコンテンツ下のコンテンツ</p> </body> </html> --------------------------------------------------------------------- 【CSS】sample.css --------------------------------------------------------------------- #BoxA { width: 488px; margin: 0 auto 10px; background: #fffbfb; border: solid #999999 1px; } #BoxB { width: 350px; margin: 0px; padding: 5px; border-right: solid #999999 1px; } #BoxC { width: 127px; margin: 0px; padding: 0px; } p.hoge { display: table-cell; _display: inline; _zoom: 100%; vertical-align: bottom; } /* IE7 hack */ *:first-child+html p.hoge { display: inline; zoom: 100%; } --------------------------------------------------------------------- IE6/7、Firefox2/3、Safari3、Opera9.61、Google Chromeでご希望に添う表示結果を得られています。 以下はボックスモデル毎の左右方向（幅）の描画領域の計算に関わる部分です。 【BoxA】 width: 488px; border: solid #999999 1px; 【BoxB】 width: 350px; padding: 5px; border-right: solid #999999 1px; この時点でBoxCの描画領域として残されている値を求めると、 488－350－5×2－1＝127 となりますので、 【BoxC】 width: 127px; が正しい値になります。 いかがでしょうか？不具合や不明点、あるいは検証条件に異なる点などありましたら補足して下さい。
その他の回答 (5)
- abril
- ベストアンサー率69% (388/560)
No.3-4です。 度々すみません、添付画像のイメージに忠実だと考えるなら、BoxBとBoxCの間に1pxのグレーの境界線を表示したいのですね？ であれば129pxという値やBoxAにグレーの背景色を指定しているのも納得がいきます。 もしそうであるなら、そして常にBoxB＞BoxCであるのが確実なら、グレーの境界線はBoxAの背景色にするより「BoxCより確実に高さのある」BoxBの右辺のボーダーとして指定する方が容易に希望のスタイルを実現できると思います。 つまり、No.4での修正に更に手を加えて、 #BoxB { border-right: solid #999999 1px; （省略） } #BoxC { width: 129px; （省略） } といった様に。 連続投稿になってしまい失礼しました。
お礼
丁寧なご対応ありがとうございます。 お礼が遅くなり大変申し訳ありませんでした。 ie8 Google Chrome FireFox3.5.1 上記のブラウザでは、希望どうりのデザインで表示されるのですが、 ie6、ie7だと下に回り込んでしまいます。 DOCTYPE宣言によって変わるものなのでしょうか？ ちなみにXHTML 1.0 Transitionalなのですが 【CSS】 #BoxA { width:488px; margin: 0 auto 10px; background: #fffbfb; border: solid gray 1px; } #BoxB { width: 350px; margin:0px; padding:5px; border-right: solid #999999 1px; } #BoxC { width:128px; margin:0px; padding:0px; } p.hoge { display: table-cell; _display: inline; _zoom: 100%; vertical-align: bottom; } /* IE7 hack */ *:first-child+html p.hoge { display: inline; zoom: 100%; } 【HTML】 <div id="BoxA"> <p class="hoge" id="BoxB">テキスト<br>テキスト<br>テキスト</p> <p class="hoge" id="BoxC">テキスト</p> </div>
- abril
- ベストアンサー率69% (388/560)
No.3です。今改めて見直してみましたが、ちょっと確認点があります。 ボックスの計算方法は標準準拠モードで考えておられるのですよね？ ・BoxAの幅は490px、その外側に四辺1pxの線 ・BoxBの幅は（余白を含まずに）350px、余白は上下左右5px であれば、BoxCに残された幅は129pxではなく130pxとなるのが正しいのですが。 一方、後方互換モードであれば、 ・BoxAの幅は四辺の1pxの線を含めて490px、つまりテキストなどの内包要素の描画領域として残された幅は488px ・BoxBの幅は左右余白各5pxを含めて350px、つまりテキストなどの内包要素の描画領域として残された幅は340px であれば、BoxCに残された幅は129pxではなく138pxになります。 現状、どちらの場合でも計算が合ってない事になりますが、129pxという値が近いのは前者ですので、とりあえず前者だと仮定させて頂きます。 その場合、No.3のサンプルを下記の様に訂正させて頂きます。 #BoxB { width: 340px;→width: 350px; （省略） } #BoxC { width: 129px;→width: 130px; （省略） } となると、BoxAの内部はBoxBとBoxCで上下左右隙間無く埋まっている、という状態がご希望のレイアウトという事になりますから、BoxAの背景色#999999が実際に描画される領域は残っていません。であれば最初からBoxAの背景色として#fffbfbを指定しておけば済む事になりますから、No.3の様な背景画像を作ってお茶を濁す必要もありません。 #BoxA { background: #999999;→background: #fffbfb; （省略） } ご希望に添わない点や不明点等ありましたら具体的に補足して下さい。
- abril
- ベストアンサー率69% (388/560)
> 表はテーブルタグを使用したほうが、ソースの量は少なくて済むのでしょうか 内容が「表」であるなら、ソースの量がどうこういう問題ではなく、tableタグでマークアップするのが当然でしょう。 内容が「表」でないなら、内容に相応しいマークアップを考えるべきですが。 以下は、後者の場合の一例です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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> <style type="text/css" media="screen"> <!-- #BoxA { width: 490px; margin: 0 auto 10px; background: #999999; border: solid #999999 1px; } #BoxB { width: 340px; padding: 5px; background: #fffbfb; } #BoxC { width: 129px; background: #fffbfb; } p.hoge { display: table-cell; _display: inline; _zoom: 100%; vertical-align: bottom; } /* IE7 hack */ *:first-child+html p.hoge { display: inline; zoom: 100%; } --> </style> </head> <body> <div id="BoxA"> <p class="hoge" id="BoxB">テキスト<br>テキスト<br>テキスト</p> <p class="hoge" id="BoxC">テキスト</p> </div> </body> </html> "display: table-cell;"が効かないIE6とIE7用にハックを使用しています。 ＃IE8での挙動は確認していませんが、IE8からは"display: table-cell;"が有効になっている筈です。 ただし、IE6/7では"display: inline;"が適用される為、幅も高さも内包する要素のボリュームで成り行きになります。その為、"background: #fffbfb;"の領域がBoxBとは揃わなくなります。見かけ上の逃げの方法としては、BoxBとBoxCの親であるBoxAにBoxB＋BoxCの幅分が#fffbfbになる様な画像（340＋5×2＋129＝479 なので、幅479px高さ適当の領域を#fffbfbで塗りつぶした画像）を作ってbakcground-imageを併用する、という手があります。 仮にその背景画像をhoge_backround.gifとするなら、 #BoxA { （省略） background: url(hoge_backround.gif) repeat-y #999999; } といった感じで。
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
> "BoxC"が"BoxB"の下に回りこんでしまいます。 普通のブラウザなら出来ます。IEは8以降を標準モードで。 uuAltCSS.js を喰わせるとIE6あたりでも何とかなるという噂。
お礼
ご回答ありがとうございます。 ie8 Google Chrome FireFox3.5.1 上記のブラウザでは正しく表示されました。 display:table-cell;がie6 ie7ではサポートされていないんですね。 uuAltCSS.jsをググって試してみようと思いますが、ie7などですとjsに警告が出てしまうので、ユーザビリティ的にどうかなと...※いまだに画面に警告が出ると「ウィルスか！」と身構える人もいるかも(笑) ハックで対応できるのであれば、ハックで対応したいです。
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
div要素とp要素で書いてあるってことは、Bの段落とCの段落にこれ といった脈絡は無くてただ見栄えのみ下揃えしたいだけってことで すね。 <!-- HTML --> <div id="BoxA"> <p class="cell" id="BoxB">複数行にわたるような<br>文章を<br> だらだらと書いてみる</p> <p class="cell" id="BoxC">下にそろえたい文章</p> </div> <!-- CSS --> #BoxA { width:490px; margin: 0 auto 10px; background-color: gray; border: solid red 1px; } #BoxB { width: 300px; background-color: silver; } #BoxC { width:130px; background-color: white; } .cell { display:table-cell; vertical-align: bottom; }
お礼
grumpy_the_dwarfさん ご回答ありがとうございます。 試してみたのですが、"BoxC"が"BoxB"の下に回りこんでしまいます。 floatを掛けるとぼ"BoxC"が下揃えではなく、上揃えになってしまいますし、 <p>を<span>に変更したりと色々試してみたのですが、うまく表示されませんでした。
お礼
ご回答ありがとうございます。 【BoxC】widthの計算が間違っており、ご指摘どおり128px→127pxに変更したら希望の結果を得ることがありました。 DOCTYPE宣言のことも詳しく教えていただき感謝しております。 はじめてhtmlをいじったときの感動を味わうことができました。 ありがとうございます。