カテゴリー

キーワード

 
> 【CSS】display:inline-block...

【CSS】display:inline-block;で要素を横並びにする方法(前半はHTML5におけるボックスの話)


2015 年 4 月 16 日 投稿    view: 168807
タグ:
このエントリーをはてなブックマークに追加

CSS inline-block

こんにちは、WEBマーケティング部の杉尾です。


今回はCSSで要素を横並びにする方法の第三回目として、


『display: inline-block; 』を使う方法を紹介します。


参考ソースだけ見たい方はコチラ


前回はコチラ
【CSS】floatとclearfixで要素を横並びにする方法を紹介します(前半はfloatの説明)


CSSで横並び 第三回目


HTML5ではブロック要素、インライン要素という分け方はない

displayプロパティの説明に入る前に外せないのが、この話です。


HTML5以前(HTML4.1、XHTML1.0)では、HTMLにブロック(レベル)要素、インライン(レベル)要素という分け方がありました。


下表をご覧ください。


  ブロック要素 インライン要素
説明 見出しや段落、リスト、フォームといった、それ一つで機能としてまとまった単位と捉えることのできるもの ブロック要素の中身として使われるもので、テキストの一部として扱われるもの
構造 改行を伴う(次の要素は下にくる) 改行を伴わない(横に並ぶ)
要素例 div,p,table,form,h1~h6 span,a,strong

現在、(HTMLにおいては)ブロック要素、インライン要素という分け方がなくなりました
では、どうなったかというと、その考え方はCSSに引き継がれています。


ブロック要素、インライン要素というHTMLの話ではなくて、
その要素の、CSSにおける初期設定がブロック扱いなのかインライン扱いなのか』という分け方になっているわけです。


つまり、ブロック要素、インライン要素という分け方は廃止されたものの、ブロック扱い、インライン扱いという見た目の指定に関する考え方は残っているということです。


HTML4.1やXHTML1.0までは、HTMLの『ブロック要素、インライン要素という考え方』とCSSの『displayプロパティ』が混在していたので、HTML5では、それを整理したんですね。


見た目の話に限ると、『ブロック要素、インライン要素』が『コンテンツのカテゴリーやコンテンツモデル』に引き継がれたということとは無関係なわけです。


コンテンツのカテゴリーはコチラを
HTML5要素のカテゴリーを押さえましょう


コンテンツモデルに関してはコチラをご覧ください
HTML5のコンテンツモデルって何?という方にオススメの記事です


ブロックボックスとインラインボックス

CSSには、ボックスという考え方があります。
W3C仕様書の邦訳記事では『包含ブロック』という名前で紹介されています。


ブロック扱いとインライン扱いについて理解するには、この考え方を知る必要があります。
それぞれをブロックボックス、インラインボックスと呼びます。


ブロックの概念図は以下です。


CSSにおけるボックスの概念図


marginとpaddingに関してはコチラをご覧ください。
【CSS】margin paddingの違いと使い方を紹介


ブロックボックス

ボックス全体のサイズは、内容領域・padding・border・marginの合計です。


幅と高さの指定ができます。
ボックスの内容にvertical-alignを指定できません。


インラインボックス

インラインボックスも全体のサイズを内容領域・padding・border・marginの合計で表しますが、注意しないといけないのは、上下のmarginを指定しても画面上で反映されないということです。


同じく、上下のpaddingも画面上では反映されません。
(上下の要素にかぶります。line-heightプロパティで高さを十分にとれば見えるようになりますが、必要以上に間が空くおかしなレイアウトになりますのであまり使われません)


幅は指定できますが、高さの指定はできません。


displayプロパティ

CSSの【displayプロパティ】で、HTMLで書いたタグ要素を、ブロックボックスとインラインボックスのどちらにするのか指定できます。


displayプロパティの値のうち、よく使うものは


inlineblockinline-blocktabletable-cellがあります。


inline・・・インラインボックスを生成する
block・・・ブロックボックスを生成する
inline-block・・・表示はインラインボックスだが、ブロックボックスのように高さや横幅、margin、paddingを指定できる。
table・・・table要素のような表示になる
table-cell・・・td要素のような表示になる


今回はこのうち、inline-blockを使って、要素を横並びにします。


inline-blockの説明に『表示はインラインボックス』とあります。
つまり、これを指定すれば要素が横並びになるということです。


display: inline-block;の参考ソース

display: inline-block;の使いどころとしてはグローバルメニューが考えられます。
Webページには欠かせないパーツですよね。


では、参考ソースをどうぞ。
わかりやすいように、htmlタグやbodyタグを省いています。


HTML

<ul class="global_menu">
    <li>
        <a href="#">HOME</a>
    </li>
    <li>
        <a href="#">ページ1</a>
    </li>
    <li>
        <a href="#">ページ2</a>
    </li>
    <li>
        <a href="#">ページ3</a>
    </li>
    <li>
        <a href="#">ページ4</a>
    </li>
</ul>

CSS

ul.global_menu {
    width:600px;
    border:1px solid red;
    padding:0;
    font-size:0px;
}
ul.global_menu li {
    width:150px;
    border:1px solid black;
    display: inline-block;
    font-size:16px;
}
ul.global_menu li:first-child {
    height:60px;
}
ul.global_menu li a {
    display: block;
}

inline-block説明画像1


解説
li要素のCSSにおける初期値はブロックボックスですので、本来は縦に並ぶはずです。
それをdisplay: inline-block;を指定することで、横に並べています。


CSSの5行目と11行目、こう指定することで、li要素の間に生まれる隙間をなくします。

13行目、first-child という擬似クラスを使用して、最初のli要素の高さを変えてみました。
display: inline-block;で、ブロックボックスと同じ指定ができますから、高さを変えることも可能です。


擬似クラスについてはコチラ
【CSS】CSSのセレクタとは? 覚えておきたいセレクタ21選


16行目、中のa要素にdisplay: block;を指定してテキスト以外の部分もクリックできるようにしています。


更に、これに垂直方向の位置揃えもつけてみましょう。


CSS

ul.global_menu li {
    vertical-align:bottom;
}

inline-blockの説明画像2


このように垂直方向の位置を揃えることができます。


display:inline-block;の問題点と解消方法

いいことずくめのように見えるdisplay:inline-block;にも一つだけ問題点があります。
というより、ありましたと言うべきでしょうか。


それはIE7以下で、CSSの初期値がブロックボックスの要素は横並びができないということです。
つまり、IE7以下ではdivやp、それから上で挙げたliもdisplay:inline-block;で横並びになりません。


とはいえ、IE7以下の国内ブラウザシェアはかなり低くなっています。
個人的には無視してもいいと思いますが、そういうわけにはいかないという方もいらっしゃるかもしれません。
ですので、対応方法を紹介します。


と言っても、先ほどまでのソースに以下を書き足すだけです。


CSS

/* ハックでIE6,7のみに適用 */
.ul.global_menu li {
    display: inline;
    zoom: 1;
}

この指定で、IE7でもレイアウトが崩れることはなくなります。



まとめ

しっかり理解すれば、display:inline-block;も色々なところに使えると思います。


状況に合わせて、floatと使い分けをしてください。


最後までお読みいただき、ありがとうございました。



よろしければコチラもどうぞ

【CSS】floatとclearfixで要素を横並びにする方法を紹介します(前半はfloatの説明)

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事