display:inlineとinline-blockで横並びにする

（更新 ）

要素を横並びにするCSSには、inlineやinline-block、float、flexなどがありますが、現在ではdisplay:flex;が使用されることが多いです。そのため、今となってはdisplay:inlineやinline-blockはあまり使われなくなりました。

これまでの経緯でいいますと、以下のように変遷してきました。

  • display: inline;
    （1990年代～2000年代前半）
    当初はdisplay:inlineで横並びにしていましたが、inlineはテキスト扱いのため、幅や高さのwidthやheigthが効かない問題がありました。

  • display: inline-block;
    （2005年前後～）
    その後、widthやheightが効くようになったのが、display:inline-blockです。ただ、この場合でも横並びにした際に隙間が空く問題がありました。

  • display: flex;
    （2015年頃～現在）
    上記の問題を解決したのが、display:flex;になります。display:flex;は親要素に設定し、子要素の横並びを一括して管理する方法になります。

そのほか、画像の回り込みや、テンプレートの2カラムなどで横並びにするfloatもありますが、この場合でも高さが認識されないなどの弱点があります。

そのため、現在はdislpay:flex;を使うことをおすすめしますが、ここでは従来のdisplay:inlineとinline-blockで横並びにする方法についてご紹介します。

display: inline;で横並びにする方法

リストタグの「li」はブロック要素のため、その前後に改行が入り、デフォルトの状態では縦に並ぶことになります。

例えば、フッターの箇所で以下のように記述したとします。

<ul>
  <li>運営会社</li>
  <li>連絡先</li>
  <li>個人情報保護</li>
</ul>

すると、このリストタグはブロック要素のため縦に並びます。

  • 運営会社
  • 連絡先
  • 個人情報保護

これを横並びにする場合、子要素の「li」に「display: inline;」を指定してインライン化しますが、親要素の「ul」に指定しても機能しないので注意しましょう。

li {
  display: inline;
}

するとこのように横並びに表示されます。

  • 運営会社
  • 連絡先
  • 個人情報保護

この「display: inline;」は<div>などのブロック要素などでも使用されますが、主にナビゲーションやフッターなどのリストタグ「li」を横並びにする際に使用されることが多いです。

リストタグ「li」はリストアイテムごとに改行され、上から下へと縦に並んでいきます。

■リストマーカーの非表示

デフォルトの状態では省略されてはいるものの、リストタグにはli {display: list-item;}が設定されており、この場合にlist-style-typeのマーカーなどが表示される仕組みとなっています。

このリストタグをdisplay: inline;で横並びにした場合、displayの値がlist-itemからinlineに上書きされ、マーカーを出す仕組み（display: list-item）が無効化されるため、黒丸のリストマーカーは表示されなくなります。

li {
  display: list-item;（デフォルト）
  display: inline-block;（上書き）
}

そのため、display: inline;の横並びでマーカーを非表示にしたい場合には、あえてlist-style-type:none;などと書く必要はありません。

ただし、display:flex;の場合には、displayを設定するのは親要素になるため、子要素のliにはデフォルトのdisplay:list-itemが設定されたままとなり、リストマーカーは表示されます。そのため、あえて横並びでもマーカーを表示したい場合には、display:flex;を使用するとよいでしょう。

■特定の箇所だけ横並びにする

上記のように、単に「li」にだけdisiplay:inline;を指定した場合、サイドバーなどのリストタグまで全て横並びになってしまいます。そのため、フッターなどの特定の箇所のリストタグのみを横並びにしたい場合、「ul」にclass属性などを指定して以下のように記述するとよいでしょう。

<ul class="sample">
  <li>運営会社</li>
  <li>連絡先</li>
  <li>個人情報保護</li>
</ul>
.sample li {
  display: inline;
}

あるいは、ulに直接class属性などを指定せず、全体にdivをかませる場合は以下のようになります。

<div class="sample">
<ul>
  <li>運営会社</li>
  <li>連絡先</li>
  <li>個人情報保護</li>
</ul>
</div>
.sample ul li {
  display: inline;
}

「.sample li」や「.sample ul li」など微妙に違いがあるので注意しましょう。いずれにしましても、display: inline;は子要素に設定する形となります。

リストの横並びで生じる隙間を回避する方法

注意したい点は、display: inline;やdisplay: inline-block;でリストタグを横並びにする場合、リスト間に隙間が生じてしまうことです。

  • 運営会社
  • 連絡先
  • 個人情報保護

リストを画像で設定している場合や背景色を指定している場合、この隙間はけっこう目立ちます。

この場合、HTMLソースで「liタグ」を改行せずに記述することで隙間を回避できます。

<ul>
<li>会社概要</li><li>ニュース</li><li>求人案内</li>
</ul>

こうすることで隙間が表示されません。

  • 運営会社
  • 連絡先
  • 個人情報保護

また、HTMLソースが横に長くなってしまう場合、コメントタグを使って改行するのもよいでしょう。

コメントタグを挿入する場合はこのようになります。

<ul>
<li></li><!--  --><li></li><!--  --><li></li>
</ul>

この状態にて、コメントタグ内で改行しておくと横に長くなるのを回避できます。

<ul>
<li></li><!--  
--><li></li><!--
  --><li></li>
</ul>

このコメント内の記述は無視されますので、実質的には改行を入れずに、ぴったりくっつけて記述するのと同じことになります。

ブロック要素とインライン要素の違い

ブロック要素（display:block;）とインライン要素（display:inline;）の違いについてですが、ブロック要素は前後で改行されて縦に積み重なるのに対し、インライン要素は前後で改行されずに横に並びます。

また、ブロック要素は幅が親要素いっぱいにまで広がり、段落や見出しなどの「ひとまとまりの領域」を作るために使われます。代表的なブロック要素には、「pタグ」や「divタグ」、「h1タグ」などがあります。

一方、インライン要素は文中で使用される「spanタグ」や「bタグ」、「aタグ」などが該当します。これらは前後で改行がされず、文字列の一部として扱われます。

例えば、当サイトのタイトル部分は「h1タグ」で記述していますが、こちらは前後で改行されるブロック要素になります。一方、文中で使用している「spanタグ」は前後で改行されないため、インライン要素になります。

ブロック要素とインライン要素の例

■リストタグ「li」はブロック要素ではない

リストタグの「li」は、ブロック要素（display:block;）ではなく、display:list-item;というリスト項目を表示するための要素です。このlist-itemはブロック要素と同じように縦に積まれますが、黒丸（disc）などのリストマーカーを描画するための特別な表示形式となっています。

そのため、デフォルトのlist-itemのままでは横並びになりませんが、liにdisplay:inlineやdisplay:inline-blockを指定することで、横並びにすることができます。

display: inline-block;で幅と高さを付ける

この「li」はブロック要素とほぼ同じ働きをするlist-item要素のため、デフォルトの状態では幅や高さを指定することができます。

例えば、上記の例に幅100px、高さ50pxを指定すると以下のように表示されます。

■デフォルトの状態

li {
  width: 100px;
  height: 50px;
  background-color:#f2f2f2;
}
  • 運営会社
  • 連絡先
  • 個人情報保護

この状態では、指定した幅と高さが正常に反映されています。

しかしながら、これを横並びにする場合、display: inline;を指定することでインライン要素となり、list-item要素ではなくなってしまうため、幅や高さを指定しても反応しなくなります。

■display: inline;を指定した状態

li {
  display: inline;
  width:100px;
  height:50px;
}
  • 運営会社
  • 連絡先
  • 個人情報保護

この場合、インライン要素でありながらブロック要素的に機能する「display: inline-block;」を指定することで、横並びにしつつも、幅や高さを指定することができるようになります。

■display: inline-block;を指定した状態

li {
  display: inline-block;
  width: 100px;
  height: 50px;
}
  • 運営会社
  • 連絡先
  • 個人情報保護

つまり、「li」はもともとはブロック要素の性質を持つlist-item要素ですが、「display: inline;」を指定することでインライン化されて幅と高さを指定することができなくなり、ブロック要素の機能が消失してしまいます。

これを回避するには、「display: inline-block;」を指定することで、インライン要素でありながらブロック要素的な機能をつけることができます。

グローバルナビゲーションなどの部分で幅や高さを指定したい場合、この「display: inline-block;」を指定するとよいでしょう。

display: inline-block;で高さがずれる場合の対処方法

リストタグなどで「display: inline-block;」を指定して横並びにした際、vertical-alignを何も設定しないデフォルトの状態では「vertical-align: baseline;」になります。そのため、文字サイズがバラバラの状態だと高さがずれてしまうことがあります。

このvertical-alignはブロック要素には影響しませんが、インライン要素でありながらブロック要素的な扱いになる「display: inline-block;」の場合は影響してくるため、これが原因で高さがずれてしまうことになります。

例えば、以下のような場合、文字がbaselineで揃うため、文字サイズが小さいパイナップルの箇所が下にずれてしまっています。

この場合、liに「vertical-align: top;」を設定すると、文字のベースラインではなく、要素の上端でそろうため、高さを揃えることができます。

li {
  display: inline-block;
  vertical-align: top;
}

display: inline-block;で高さがずれる場合はvertical-align: top;を指定することをおすすめします。

あるいは、最近の横並びトレンドでは、display:flex;を使用するケースが多いです。display:flex;を使用すれば、高さがズレることはないため、簡単に横並びの配置を実現することができておすすめです。

トップページ　⁄　CSSの一覧　⁄　display:inline;
関連ページ