2.8.4 インラインブロック
インラインブロックは、基本的にはブロック要素なのだが、その取扱いはインライン要素のようになる。 インライン要素の中にブロック要素を記述することも可能になる。
それではまず、<div>を使って以下のように記述してみることにする。
<div class="ib">
div1
</div>
および
<div class="ib">
div2
</div>
は、インラインブロックです。
.ib {
display:inline-block;
background-color:#6c3;
}
と記述すると、
これら
と表示され、通常の文章のようになった。
改行は１文字分の半角スペースと見做されるので、
のように連続して書くと、
これら
と表示され、間の空白が無くなり、インラインであることがよりわかり易い。
これを<p>タグ要素の中に記述すると、
これら
となり、最初の<div>タグに出会ったとき</p>の省略形と見做され、pモードが強制終了される。後続の文章はpタグモードから外され通常表示されている。
p要素だけは例外であり、インラインブロックにしてもしなくてもdiv要素を中に含めることはできない。
インライン要素の中にブロック要素は記述不可だが、以下の
<p>div1</p>
</div>
<div class="ib">
<h2>div2</h2>
</div>
は、ブロック要素を含むインラインブロックです。
のように、インラインブロックの中では、文字列をpやh2などのブロック要素にすることが可能になり、
div1
div2
と、ブロック要素をインライン化することができるようになる。
ここで注意する点は、通常のdiv要素（border省略時、16.1.2節を参）とは異なり、上下の空白行がブロック内に取り込まれて表示されていることである。
ところで、以下のように、div要素間の改行を消し、
<p>div1</p>
</div><div class="ib">
<h2>div2</h2>
</div>は、ブロック要素を含むインラインブロックです。
とすると、
div1
div2
のように、隙間が無くなる。
【注記】div要素間の改行は無視されないが、div要素内の最初と最後の改行は無視される。 文章中の文字列そのものはインライン要素とも言える。 インラインブロックであるdiv要素間の改行は、インライン要素間の改行になり、html文法により半角スペース1個が挿入されて表示されることになる。 div要素内の改行はブロック要素内の規則に従い、最初と最後の改行は無視されることになる。と考えれば、容易に理解できる。
インラインブロック要素は、インライン要素の中に記述可能かどうかも見てみることにする。
<div class="ib">
<p>div1</p>
</div>
<div class="ib">
<h2>div2</h2>
</div>
</i></b>
とすると、
div1
div2
のように、インライン要素の中に記述しても属性は継承され、目的通りに表示されている。
【余談】私の使っているeclipseエディターでは、残念ながら、インライン要素の中にブロック要素があるぞ！とワーニングを表示する。htmlだけの解析では、inline-blockとなっているdiv要素を識別できないのが原因のようだ。しかし、内部組み込みのWebブラウザ表示は正常に動作している。
まとめると、
- インラインブロック要素は、通常のインライン要素と同じように取り扱われる。
- インラインブロック要素はインライン要素の中にも記述できる。
- インラインブロック要素の中に、ブロック要素も記述できる。
- <p>タグの場合は例外で、元々ブロック要素と見做されている要素をたとえインラインブロック化しても入れることはできない。
横並びのメニューを出したい場合、上記の方法でも可能だが、慣例として以下の記述がよく使われている。
<li>menu1<br>まとめ</li>
<li>menu2<br>概要<br>詳細</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
.yoko_menu {
padding:0;
margin:0;
list-style:none;
text-align:center;
}
.yoko_menu > li {
display:inline-block;
color:green;
background-color:silver;
vertical-align:top;
width:100px;
}
のように、ulタグを使って記述すると、htmlソースコードを見たとき結構わかり易い。Web上では、
のように表示される。
間に隙間があるが、li要素間の改行コードが空白と見なされるためである。<li>以下を横並びに詰めて記述すると、隙間は無くなるが、少しコードが見にくくなる。
【参考資料】
インラインブロックについての解説は、Samurai Blogの「「CSSで横並びレイアウトを実現簡単にするinline-blockとは？」がわかり易かった。
隙間をなくす方法についても、ここで詳細に述べてある。
少し奇妙な書き方であるが、
<li>menu1<br>まとめ
</li><li>menu2<br>概要<br>詳細
</li><li>menu3
</li><li>menu4
</li><li>menu5</li>
</ul>
のように記述すると、
のように表示され、隙間が無くなる。
2.8.5 display:none
display:noneは、PC用に作成したhtmlをスマホ用に修正をかける場合などに使える。 htmlを変更せずに、CSS側でdisplay:noneとすれば、指定された要素のその部分だけ非表示になる。 htmlソースを見れば残っているが、その部分のhtmlコードが削除されたかのように表示される。
visibility:hiddenの場合は、その部分のhtmlコードがあるかのように振舞い、表示時に表示されないだけなので、残骸が残るという点が異なる。 この場合、Web上ではその空間領域がポッカリ空いているような状況になる。 そこにコマーシャルを入れる予定だが全体のレイアウトを壊したくない、などのケースが考えられる。
今のところ、display:noneの使い道は、レスポンシブウェブデザイン対策しか思いつかないが、いろいろと使い道はありそう。 コマーシャルを入れていたが、料金未納なのでdisplay:noneで非表示にして残骸の確保領域も消去、料金が入り次第復活というのもあるかな？
プルダウンメニューをCSSで実現する場合、display:noneを使って非表示にしておき、マウスが上に来た時display:blockに切り替える方法がある。この場合、position:absoluteにして以降の本文の上に上書き表示させるのがミソである。親要素はposition:relativeにしておく。そうすると、マウスが乗るとプルダウンメニューが現れ、マウスが離れるとプルダウンメニューが消え、下の本文が見えるようになる。absolute指定した要素の縦サイズは無視され、以降の要素が表示されることは以前勉強した。こうすることで、全体の配置を変えないでメニューの表示・非表示の切り替えができるようになる。
次は、display:flexについて記述することにする。CSSの基礎について パート８である。