- ベストアンサー
TABLE利用レイアウトからCSS利用に切り替えにあたり、DIVの上下中央実現の相談
TABLEを利用したレイアウトに性能的限界を受け、試験的にDIVを利用し同様の構成を試している際に、上下中央が巧くできない状態に陥ってしまいました。（TABLEでは出来たのに・・・） 様々な箇所で利用されるため、出来るだけシンプルに（JavaScript利用とかせず）実現したいところですが、いい案があたりませんでした。 なにか方法はあると思うのですが、手段はありませんでしょうか？ そもそも、DIVで行おうとしていること自体まずいのでしょうか？ 具体的サンプルいただけると助かります。
- gaihanbosi
- お礼率52% (12/23)
- HTML
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ANo.1-2です。 > 下記の、itemとsubtitleの高さをすべてそろえたいのですが、高さそろえると、vartical～が無効になってしまいます。 仮に、"vartical-align: middle;"を有効にしたまま、itemとsubtitleのブロックの「実質の高さ」ではなく、各ブロックの背景色が垂直方向に均等に伸びている「見た目の高さ」を揃えれば良いのでしたら、tableを使わずに済む方法がないわけでもありません。ただ、マークアップも入れ子が多くてあまりお奨めできる方法ではありませんので、あくまで一例として、参考になさるかどうかはお任せ致します。 ※質問者様の(X)HTMLの詳細がわかりませんが、inputタグが閉じてないところをみるとXHTMLではなくHTMLかと思いましたので、とりあえずHTML4.01 Strict、文字コードはShift_JISで作成したサンプルです。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <!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> <link rel="stylesheet" href="css/sample.css" type="text/css" media="all"> </head> <body> <ul class="hoge1"> <li><span class="subtitle">サブタイトル1長目折り返し</span><span class="item"><input type="text" size="15" value="1234567890"></span></li> <li><span class="subtitle">サブタイトル2</span><span class="item"><input type="text" size="15" value="1234567890"></span></li> </ul> <ul class="hoge1"> <li><span class="subtitle">サブタイトル3</span><span class="item"><input type="text" size="15" value="1234567890"></span></li> <li><span class="subtitle">サブタイトル4長目折り返し</span><span class="item"><input type="text" size="15" value="1234567890"></span></li> </ul> （以下同様。2アイテムづつのulでマークアップ） </body> </html> ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- body { margin: 0; padding: 0; background: #fff; font-size: 12px; } input { font-size: 12px; } ul.hoge1 { width: 500px; list-style: none; margin: 0; padding: 0; background: #eee; } ul.hoge1 li { display: table-cell; _display: inline; _zoom: 1; width: 250px; vertical-align: middle; margin: 0; padding: 5px 0; background: url(../images/back.gif) repeat-y; } /* IE 7 hack */ *:first-child+html ul.hoge1 li { display: inline; zoom: 1; } ul.hoge1 li span { display: table-cell; _display: inline; _zoom: 1; vertical-align: middle; } /* IE 7 hack */ *:first-child+html ul.hoge1 li span { display: inline; zoom: 1; } ul.hoge1 li span.subtitle { width: 90px; } /* IE 7 hack */ *:first-child+html ul.hoge1 li span.subtitle { display: inline; zoom: 1; } ul.hoge1 li span.item { width: 160px; } /* IE 7 hack */ *:first-child+html ul.hoge1 li span.item { display: inline; zoom: 1; } ul.hoge1 li span.item input { width: 95%; } ---------------------------------------------------------------------- 上記の対処で、（OSはWindows XP）IE6/7、Safari2/3、Opera9.52、Sfari3、上でほぼ同様に表示されています。 divではなく、ulをメインとしたマークアップにします。この方がまだ「リスト」ですのでdivよりは論理的意味の上で多少はましになるかと思います。 上記の考え方の大枠は、以下の様なものです。 (1)liをまず"display: table-cell;"（IE用には"display: inline;"と"zoom: 1"を各ハックにてIE6/7に適用。以下同様。）で2アイテムづつ並べて"vertical-align: middle;"を適用する。また、親ブロックの幅にliを2つづつ均等に並べる為、幅は親ブロック（500px）の半分（250px）で指定。また、次の行との間に余白を持たせる為に、上下方向のみpaddingを適量指定（左右はNGです）。 (2)liの子要素となる「subtitle」と「item」をそれぞれspan（spanでマークアップしておけばcssを外した状態でもサブタイトルとアイテムが横並びになり視覚的に違和感がないので）でマークアップしclassセレクタで設定。 (3)span.subtitleとspan.itemもli同様に"display: table-cell;"で横並びにし、vertical-align: middle;"を適用。この段階でサブタイトルの文章量にかかわらず、（見た目の）一行に表示される4つの要素が全て垂直方向にセンタリングとなる。 (4)各spanの幅を固定する為、それぞれに90px、160pxを指定（合計250px）。 (5)アイテムの入力フィールド（input）の幅を一律にする為、指定。ただし環境によりinputの方がはみ出てしまわない様に親要素のspan.itemの幅よりも若干少な目になる様に指定。 (6)高さが揃っている様に見せる為、サブタイトルとアイテムの背景として使用したい2色をひとまとめにしたGIF画像（幅は250px、高さは適当）を作成し、親要素であるliに縦方向にのみリピートさせる。 (6)をする事で、サブタイトルとアイテムの背景に切れ目無く2色に別れた色がレンダリングされる為、あたかもその2要素の領域の高さが揃っているかの様に見える、という効果が得られます。 もし一行に並べたいサブタイトルとアイテムのセットが3つづつなら、liの幅をulの1/3にしてそれぞれの子要素の幅も合う様に変更した上で、liを3つ並べるだけで対応できます。4つなら（以下同様）…という感じでカスタマイズが可能です。 長文にて失礼しました。
その他の回答 (3)
- abril
- ベストアンサー率69% (388/560)
すみません、ANo.3にタイポがありましたので訂正しておきます。 【誤】（OSはWindows XP）IE6/7、Safari2/3、Opera9.52、Sfari3、上でほぼ同様に表示されています。 【正】（OSはWindows XP）IE6/7、Firefox2/3、Opera9.52、Safari3、上でほぼ同様に表示されています。
- abril
- ベストアンサー率69% (388/560)
ANo.1へのレスを見ました。その上での素朴な疑問であり、解決策ではないのでご容赦下さい。 実現されたい内容は、今ここに（不完全ながら）表示されている様な、左側に「入力項目名」右側に「入力フィールド」のセットが2つづつが1行に入っているという、tableであれば4列×任意の行数、という構成でしょうか？ もしそうであるなら、これは内容的にもtableで構わない様に思えるのですが… <table> <tr> <th>入力1</th> <td><input type="text" size="15" value="123456789012"></td> <th>入力2</th> <td><input type="text" size="15" value="123456789012"></td> </tr> （以下同様） </table> これではだめ、という理由は何でしょう？全部div（div自体は論理的意味を持たないブロック要素ですので）にしてしまう方がむしろマークアップとしては適切ではなくなってしまう様に思えるのですが…
補足
掲示した物は、サンプルです。実際のところ、7000行近くのHTMLファイル内に、TABLEがレイアウトのために入れ子になっていくつも存在しており、画面表示速度の低下が発生しています。 TABLEよりDIVの方が、性能（体感速度も）改善されるような記載がWeb上に見受けられ、試験的にDIVへの変更を行っている状況です。 （表示性能がTABLEが原因ではないかもしれませんが、一つの推測として試験的に、DIV化しているところです。）
- abril
- ベストアンサー率69% (388/560)
> TABLEを利用したレイアウトに性能的限界を受け、試験的にDIVを利用し同様の構成を試している際に、上下中央が巧くできない状態に陥ってしまいました。（TABLEでは出来たのに・・・） > そもそも、DIVで行おうとしていること自体まずいのでしょうか？ tableではtdやthに対してvertical-alignプロパティが指定できるので、垂直方向の中央揃えがそれだけで可能ですが、divの様なブロック要素はvertical-alignの適用対象となりません。なので、divによるレイアウトの場合で同様の事がしたければそれ相応の工夫が必要になります。 実はdisplayプロパティの値にtable-cell、というのが用意されているのですが、これをdivに適用すると表示形式の性質がその名の通り「表のセル要素」に変更されるので、vertical-alignも適用される様になります。これだとtdやthと同じ感覚でdivにスタイルを与えていけるので楽なのですが、非常に不自由な事にIEがこれを未だに実装しておりません。なので、替わりにIE6/7にはdisplayプロパティにinline-blockという値を与えて調整する合わせ技などがあります。ヨモツネットさんのサイトなどがサンプルとしてはわかりやすいのではと思います。 【参考】http://www.yomotsu.net/wp/?p=387
お礼
ご回答ありがとうございます。 参考URLが大変参考になりました。 試しに作成してみました。背景の高さをそろえようとheightを指定すると、display:inlineの効果が消えてしまい、目的の物まで後一歩なのですが、手段が思いつかず行き詰まってしまいました。 下記の、itemとsubtitleの高さをすべてそろえたいのですが、高さそろえると、vartical～が無効になってしまいます。 （URLでも、少々話題になっていたようですが、こちらは3つ以上のセル（？）なので流用できませんでした。） 何か回避策ありませんでしょうか。 <html> <head> <style type="text/css"> /* 分かりやすいように色づけ */ div.line { background:silver; } /* 上下中央指定実現 */ div.line div{ display:inline; } /* 小見出し */ div.subtitle{ width: 90px; background:tan; color:maroon; font-weight:bold; vertical-align:middle; } div.item { width:160px; height:25px; background:lemonchiffon; vertical-align:middle; } </style> </head> <body> <div class="line"> <div class="subtitle"> 入力１ </div> <div class="item"> <input type="text" size="15" value="123456789012"> </div> <div class="subtitle"> 入力２<br>入力２ </div> <div class="item"> <input type="text" size="15" value="123456789012"> </div> <div class="subtitle"> 入力３ </div> <div class="item" style="width:300px;"> <input type="text" size="15" value="123456789012"> </div> </div> </body> </html>
お礼
具体的に、記載いただきありがとうございました。 記載いただいた物をベースに、適用してみようと思います。 （対象は、HTMLです。わかりにくくすみませんでした） 大変助かりました。