• 締切済み

inline-blockをネストすると表示がずれる

DIVタグをベタベタならべて、あとはcssでサイズや属性を指定してページをレイアウトしようとしています。しかし、inline-block指定をネストすると表示が急にずれることに気づきました。 まず３つのdivタグを並べます。inline-blockを指定することで横に並べます。 例えば次のようなものです。 ■■■▲▲▲●●● ■■■▲▲▲●●● ■■■▲▲▲●●● 後の説明の都合上、３×３の大きさで描いていますが、■/▲/●がそれぞれ一つのDIVに対応していて <DIV id="■"></DIV> <DIV id="▲"></DIV> <DIV id="●"></DIV> となっていて、cssで適当なサイズが指定されていると考えてください。 ここで、▲を縦に３つに分けるために、<DIV id="▲"></DIV>のなかにネストしたDIVタグを３つ挿入します。 <DIV id="■"></DIV> <DIV id="▲"> 　　<DIV id="□"></DIV> 　　<DIV id="△"></DIV> 　　<DIV id="○"></DIV> </DIV> <DIV id="●"></DIV> ■■■□□□●●● ■■■△△△●●● ■■■○○○●●● このように▲の中に□/△/○の３つのdivを置いて分割します。縦に並べるため、今度は□/△/○にinline-blockを指定していません。 更にこの△の部分を、今度は横に３分割することを考えます。つまり、<DIV id="△"></DIV>の中に <DIV id="◆"></DIV><DIV id="◇"></DIV><DIV id="▼"></DIV> を挿入します。今度は横並びにしたいので、◆/◇/▼はcssファイルでinline-blockを指定します。 期待している表示は、 ■■■□□□●●● ■■■◆◇▼●●● ■■■○○○●●● なのですが、実際には ■■■＿＿＿●●● ■■■□□□●●● ■■■◆◇▼●●● ＿＿＿○○○＿＿＿ （＿＿＿は空白） のように真ん中のDIVが下にずれて表示されてしまいます。 試行錯誤した結果、どうやら外側のinline-blockの底辺と、内側のinline-blockの底辺とを一致させようとするロジックが働いているように見えます。 この現象はchrome/firefox/safariのいずれでも同じでした。 ということは、この動作はhtml/cssで規定されている動作でしょうか？ それとも、たまたますべてのブラウザで同じような実装上の不具合がある、と考えるべきでしょうか？ ちょっと分かりにくいかも知れませんが、ご存じの方、コメントをよろしくお願いします。

  • CSS
  • 回答数3
  • ありがとう数3

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

＞一般論ではなく、私の質問の内容からどこがマズイのかを＜具体的に＞指摘してもらえると助かります。 　ずばり書いてあるはずです。その前提として、説明が必要でした。 　inline-blockは、画像と同じinline要素ですから、行のベースラインに合わせられます。サンプルで示したように、きちんとabsoluteやfloatで並べればよいのです。 　もう一度、回答をお読みなさい。

haniriito
質問者

お礼

たびたびコメントありがとうございます。 ようやく理解しました。 absolute属性とtop/left/width/heightを使えば任意に位置を指定できるから、inline-blockで無理に揃える必要はないということでしたか。 それならそうと最初にその一言があってその後に頂いたコメントが続けばまだ良かったのですが、いきなり「HTMLとは・・・」に始まって「CSSとは・・・」で終わっているのでは、質問に対する関連性が見えにくく不親切だと感じました。 それにやはり回答は私の質問からずれています。 私の質問は「ずれないように表示する方法を教えて下さい」ではなくて、「ずれるのは、html/cssで規定された動作なのかどうか？」「それともブラウザ実装上の不具合なのか？」という点であって、それをハッキリと書いています。 私なり方法でもずれずに表示させる方法は見つけていますが、「ずれるのが規定の動作ならばそこにある配置ルールはどうなっているのだろう？」という疑問から質問させていただきました。 そういう点では、 もう一度、私の質問をお読みなさい。 と言いたいところですが、こういう言い方をされていい気がしますでしょうか。 ご回答の内容をみれば、私なんかよりもずっと知識と経験をお持ちなのは分かりますが、 ＞もう一度、回答をお読みなさい。 という言い方もちょっと上から目線であまり気持ちいいものではないです。せめて「もう一度回答を読み直してみましょう」くらいの表現であって欲しかったのが残念です。 ともあれ、別の方法を提示していただいた点については感謝します。ありがとうございました。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

HTMLの基本から・・ HTMLは、文書構造をマークアップするもので、デザインを元にマークアップするとダメです。 「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 たとえば、 <body> ＿<div class="header"> ＿＿<h1>見出し</h1> ＿</div> ＿<div class="section"> ＿＿<div class="section"> ＿＿＿<h2>見出しa</h2> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2>見出しb</h2> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2>見出しc</h2> ＿＿</div> ＿</div> ＿<div class="footer"> ＿</div> </div> 　とかになるはずです。 ★class名は、3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )を参考にしました。 　その上で、CSSでデザインしていきますが、どの要素にスタイルを適用させるかは、セレクタを使って指定していきます。 ★5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) 　そうすることで、将来的にデザインをまったく変える時でもHTMLは触らなくて済みます。--スタイルシートを使うことでデザインを一新できる-- div.section{position:relative;height:400px; } div.section div.section{ position:absolute;width:30%;top:0;left:0; background-color:yellow; } div.section div.section+div.section{ left:33%;height:100%; background-color:aqua; } div.section div.section+div.section+div.section{ left:66%; background-color:green; } とかね。 　そしてスタイルシートにCSSを使う場合は、その名のとおり「6.4 カスケード処理（The cascade） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascade )」を使わないと意味がありません。

haniriito
質問者

お礼

ご意見はありがたいのですが、質問の本質とはずれてしまっている気がします。 おっしゃりたいのは、「HTMLでは文書構造を、CSSではデザインやスタイルを定義するのが望ましい」ということでしょうか？ いちおうそういう方向性があること自体は理解していてそれに近づくようにしているつもりですが、私はWEB技術は専門ではありませんので、一般論ではなく、私の質問の内容からどこがマズイのかを＜具体的に＞指摘してもらえると助かります。 いまは良い解説がWEB上にゴロゴロ転がっていますから、私の質問内容や例示した例とは関係のない一般論を論じられるのでしたら、ここでいろいろ書いていただくお手数のことを考えると、URLを挙げていただくだけで十分ではないかと思います。 もし、私の質問に対する回答やヒントをお持ちでしたら、よろしくお願いします。

  • dscripty
  • ベストアンサー率51% (166/325)
回答No.1

ちょっとわかりにくいんだけど、vertical-align:baseline の正しい動きだよ。 http://www.w3.org/TR/CSS2/visudet.html#line-height

haniriito
質問者

お礼

ありがとうございます。 まず、vertial-alignがデフォルトでbaselineになっていることは承知しています。 その上で、ご呈示いただいたURLをちょっと読んでみました。 今回例示したケースでは、ネストした<DIV>タグの外側のvertical-alignと内側のvertical-alignまで同一の位置に合わせようとしている（ように見える）のが、ちょっと不可解です。 <DIV>hoge</DIV><DIV>foo</DIV><DIV>bar</DIV> と描いた３つのDIVにdisplay:inline-block;を指定すればbaselineが揃って横並びになるのは当たり前です。 真ん中の<DIV>foo</DIV>のfooの代わりに、<DIV></DIV>を入れ子にして何個か入れたとき、入れ子にした<DIV>をinline-blockにすると、外側の<DIV>hoge</DIV>とかと同じ垂直位置に合わせられるのが仕様なのかどうか、先のURLを読んでみてもまだはっきりしません（というか理解しづらい）。 おそらく「行」（というか「インライン要素」）の厳密な定義が理解できていないのが原因だと思います。もう少し調べてみますが、何かおわかりでしたら引き続きよろしくお願いします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • ”inline-block”について

    コンテンツを<div id=wrapper>で入れ子にし、 wrapperのbackground-imgを”display：inline-block；”で設定することにより、 コンテンツの量に合わせて、背景がコンテンツ全体を覆うようにしています。 ※なぜかdisplay：inline-blockにしないと背景がうまく表示されなかったので、そのような設定にしました。 そこで、小さな問題点が2点ございます。 1点目は、ヘッダーとwrapperの間に20pxほどの空白（隙間）ができてしまいました。 display：inline-blockを解除すると隙間は消えました。 2点目は、これはgooglechromeのみでの不具合ですが、 フッター”以下”に空間ができてしまい、スクロールがフッターまでで止まらず、フッターの下までスクロールするようになってしまいました。 （1000pxほどスクロールすると止まります） これらの不具合の原因は何で、どのようにすれば解消できますでしょうか？ ぜひお知恵を貸していただきたいと思います。

  • inline-blockを上下中央揃えにする方法

    以下のhtmlで、内容に合わせてブロックの大きさが変わる状態での 上下の中央揃えができず悩んでいます。 html ------------------------------------------------------------------------------------------ <div id="box1"> <div id="box2"> <div id="box3"> <div>あああああああああああああああああああああああ</div> <div>いいいいいいいいいいいいいいいいいいいいいいい</div> <div>ううううううううううううううううううううううう</div> <div>えええええええええええええええええええええええ</div> <div>おおおおおおおおおおおおおおおおおおおおおおお</div> </div> </div> </div> ------------------------------------------------------------------------------------------ css ------------------------------------------------------------------------------------------ body { text-align:center; } #box1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width:700px; height:400px; background:#666666; } #box2 { position: absolute; left: 0; right: 0; margin: auto; width:500px; height: 300px; background:#FFF; } #box3 { display: inline-block; text-align: left; vertical-align: middle; background:#CCCCCC; } ------------------------------------------------------------------------------------------ #box2に対して#box3の内容が、縦に伸びても短くなっても常に上下が中央に配置されるようにしたいのですが、どうにもうまくいきません。 ブロック内のテキスト自体は左揃えで、ブロックそのものが中央です。 どなたか、ご教授お願い致します。 inline-blockを上下中央揃えにする方法

    • 締切済み
    • CSS
  • ie7,8でのtdタグ(inline-block)

    下記のhtmlで表示されるのは 縦4×横4のテーブルになります。 <table> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr> <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr> <tr><td>13</td><td>14</td><td>15</td><td>16</td></tr> </table> このhtmlを変えずに縦16×横1に変更するcssを作成しています。 今の所cssは <style> table td{ width:50px; display: -moz-inline-stack; 　 display: inline-block; 　 zoom: 1; 　 *display: inline; } </style> この様に記載しています。 この場合だとchromeとfirefoxでは「縦16×横1」で表示されます。 ただIE7,8だと「縦4×横4」で表示されてしまいます。 どなたかIE7,8に対応できるcssが分かる方いませんでしょうか？ よろしくお願いします。

    • ベストアンサー
    • HTML
  • ●半角英数字だとblock表示できない？？？

    こんばんは☆CSSの勉強中です☆ どうしてもわからないのでご質問させてください！ ●html <div class="block"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> <div class="block"> あああああああああああああああああああああああああああああ </div> ●css .block{width:150px;} このように入れたとき、ひらがなの”あ”は ああああああ ああああああ ああああああ 上記のように四角に？表示されるのですが、 aはまっすぐ、そのまま表示されます。。。 ちなみにIE７とモジラで確認しています。 これはなぜでしょうか？？ ちなみにdisplay:block;と入れても同じでした。。 aaaaaaaaaをああああのように表示するにはどうしたらよいでしょうか？？ どなたかぜひ、教えてください！

    • ベストアンサー
    • HTML
  • divインラインボックスの改行を制御する方法

    皆さん、こんにちは。ちょっと質問させてください。 HTML+CSSでWEBページを作っています。DIVタグで作ったブロックをdisplay:inline-blockでインライン化して表示させているのですが、ウィンドウを小さくするにともなってネストしたインラインボックスが改行されるとき、先に改行されるインラインボックスを強制したいのですが、方法はありますでしょうか？ ちょっと分かりにくいので図を書きました。 ブロックAとブロックBがインラインブロック化されて同じ行に配置されているとします。 更に、そのブロックB内にブロックB1とB2がネストしてインライン化されています。 ここでブラウザのウィンドウを小さくしたとき、chromeではまずブロックAとブロックBのインライン表示部分で改行されて、右下の図のようになりました。 期待しているのはそうではなくて、左下の図のように改行して欲しいのです。 これを強制する記述はありますでしょうか？ よろしくお願いします。

    • ベストアンサー
    • HTML
  • FireFoxでのブロック表示・非表示制御

    DIVタグで囲んだ各ブロックの表示・非表示をJavascriptで動的に制御したく、下記のソースの通りJavascriptで表示の切り替え処理を記述したところ、IE6.0では動作しましたが、FireFox2.0では切り替えリンクをクリックしても無反応の状態となってしまいました。 FireFoxのJavascript互換について経験不足のため原因がつかめず困っております。 FireFoxでも動作可能となるには、どのような記述をすればよろしいでしょうか。もしご存知の方がおられましたら宜しくお願い致します。 *** Javascriptソース ****************** function showArea(areaId){ A.style.display="none"; B.style.display="none"; C.style.display="none"; areaId.style.display="block"; } *** ブロック切り替え用リンク ****************** <a href="javascript:showArea(A)">Ａブロック</a> <a href="javascript:showArea(B)">Ｂブロック</a> <a href="javascript:showArea(C)">Ｃブロック</a> *** 表示用ブロック ****************** <div id="A"> Ａブロックの記述内容 </div> <div id="B"> Ｂブロックの記述内容 </div> <div id="C"> Ｃブロックの記述内容 </div>

  • ブロックしても表示されます

    OKWAVE IDを指定するとブロックの機能があり表示されなくなるはずですが ブロックしても表示されることが頻繁にあります。 設定してないかと思いIDをクリックすると正しくブロックされています。 どうしたらよろしいでしょうか

  • [CSS]Firefox2では横表示・IE6では縦表示

    CSSについて質問させてください。 contentsというDIVの中に、con-leftというDIVとcon-rightというDIVを横に並べて表示したい場合に、以下のタグを書きました。 [CSS] #contents { width:910px; padding:20px; } #contents #con-left , #contents #con-right { width:453px; float:left; border:solid 1px red; } [HTML] <div id="contents"> <div id="con-left"></div> <div id="con-right"></div> </div> 理論上では、con-left及びcon-rightの横幅は453px+ボーダーの2pxで、合計455px、それが二つで910pxで、横に表示されるはず。 しかしIEでは縦に並んで表示されてしまいます。 この解釈の違いがよく分かりません…。 分かる方は教えていただけませんか？

    • ベストアンサー
    • HTML
  • tableタグをdisplay:blockで表示

    webdesigningという雑誌の12月号でcssで棒グラフを実現させるという話題のなかで、tableタグをcssでdisplay:blockを使って表示（デザイン）しています。trタグも同じようにdisplay:blockを使って表示しているのですがposition: relativeやabsoluteも同時に使って位置を移動しています。positionを使って位置をしていするのにdisplay:blockは必要なんでしょうか？cssファイルでdisplay:blockを削除しても表示には変化はありませんでした。ちなみにtableを使って棒グラフを実現するという内容です。 わかる方教えてください宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • イメージをセンタリングさせてかつ改行させない

    　イメージをセンタリングさせるために <img ...> を <div> で囲んで <div> に対して「text-align: center; 」か「display: block; margin-left: auto; margin-right: auto;」を指定すると中央に表示されますが、前後に改行がはいってしまいます。 　イメージの前後で改行させないように「display: inline-block; _display: inline;」を指定すると今度は端によってしまいます。 　中央に表示してかつ前後に改行をいれないような指定方法はあるのでしょうか？

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する