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

締切済

質問者：haniriito
質問日時：2011/12/14 13:17
回答数：3件

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で規定されている動作でしょうか？
それとも、たまたますべてのブラウザで同じような実装上の不具合がある、と考えるべきでしょうか？

ちょっと分かりにくいかも知れませんが、ご存じの方、コメントをよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2011/12/16 18:42

＞一般論ではなく、私の質問の内容からどこがマズイのかを＜具体的に＞指摘してもらえると助かります。

　ずばり書いてあるはずです。その前提として、説明が必要でした。

　inline-blockは、画像と同じinline要素ですから、行のベースラインに合わせられます。サンプルで示したように、きちんとabsoluteやfloatで並べればよいのです。
　もう一度、回答をお読みなさい。

- 0
- 件

通報する

この回答へのお礼

たびたびコメントありがとうございます。

ようやく理解しました。
absolute属性とtop/left/width/heightを使えば任意に位置を指定できるから、inline-blockで無理に揃える必要はないということでしたか。

それならそうと最初にその一言があってその後に頂いたコメントが続けばまだ良かったのですが、いきなり「HTMLとは・・・」に始まって「CSSとは・・・」で終わっているのでは、質問に対する関連性が見えにくく不親切だと感じました。

それにやはり回答は私の質問からずれています。
私の質問は「ずれないように表示する方法を教えて下さい」ではなくて、「ずれるのは、html/cssで規定された動作なのかどうか？」「それともブラウザ実装上の不具合なのか？」という点であって、それをハッキリと書いています。
私なり方法でもずれずに表示させる方法は見つけていますが、「ずれるのが規定の動作ならばそこにある配置ルールはどうなっているのだろう？」という疑問から質問させていただきました。

そういう点では、

もう一度、私の質問をお読みなさい。

と言いたいところですが、こういう言い方をされていい気がしますでしょうか。
ご回答の内容をみれば、私なんかよりもずっと知識と経験をお持ちなのは分かりますが、

＞もう一度、回答をお読みなさい。

という言い方もちょっと上から目線であまり気持ちいいものではないです。せめて「もう一度回答を読み直してみましょう」くらいの表現であって欲しかったのが残念です。

ともあれ、別の方法を提示していただいた点については感謝します。ありがとうございました。

通報する

お礼日時：2011/12/19 12:56

No.2

回答者： ORUKA1951
回答日時：2011/12/14 16:13

HTMLの基本から・・

HTMLは、文書構造をマークアップするもので、デザインを元にマークアップするとダメです。
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」

たとえば、
<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/h … )を参考にしました。

　その上で、CSSでデザインしていきますが、どの要素にスタイルを適用させるかは、セレクタを使って指定していきます。
★5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

　そうすることで、将来的にデザインをまったく変える時でも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 … )」を使わないと意味がありません。

- 0
- 件

通報する

この回答へのお礼

ご意見はありがたいのですが、質問の本質とはずれてしまっている気がします。
おっしゃりたいのは、「HTMLでは文書構造を、CSSではデザインやスタイルを定義するのが望ましい」ということでしょうか？

いちおうそういう方向性があること自体は理解していてそれに近づくようにしているつもりですが、私はWEB技術は専門ではありませんので、一般論ではなく、私の質問の内容からどこがマズイのかを＜具体的に＞指摘してもらえると助かります。
いまは良い解説がWEB上にゴロゴロ転がっていますから、私の質問内容や例示した例とは関係のない一般論を論じられるのでしたら、ここでいろいろ書いていただくお手数のことを考えると、URLを挙げていただくだけで十分ではないかと思います。

もし、私の質問に対する回答やヒントをお持ちでしたら、よろしくお願いします。

通報する

お礼日時：2011/12/16 17:28

No.1

回答者： dscripty
回答日時：2011/12/14 16:11

ちょっとわかりにくいんだけど、vertical-align:baseline の正しい動きだよ。

http://www.w3.org/TR/CSS2/visudet.html#line-height

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
まず、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を読んでみてもまだはっきりしません（というか理解しづらい）。

おそらく「行」（というか「インライン要素」）の厳密な定義が理解できていないのが原因だと思います。もう少し調べてみますが、何かおわかりでしたら引き続きよろしくお願いします。

通報する

お礼日時：2011/12/16 17:14

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！