リストタグを横並びにする display:inline;

「display: block;」や「display: inline;」は、指定した箇所をブロック要素として表示したり、インライン要素として表示する際に使用します。特に、「display: inline;」については、フッターやナビゲーションのリストタグ「li」を横並びにする際に使用されることが多いです。

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

このブロック要素とインライン要素の違いについてですが、ブロック要素にはその前後で改行が入るのに対し、インライン要素には改行が入りません。

ブロック要素にはリストアイテムの「li」のほか、段落の「pタグ」や「div」、あるいは「h1」などが該当します。一方、インライン要素はコンテンツの文中でワンポイント的に使用されるような、bタグやspanタグ、あるいはリンクのaタグなどが該当します。

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

特に、リストタグの「li」はブロック要素であるため、前後に改行が入ってしまい、デフォルトでは縦に並ぶことになります。これをCSSに「display: inline;」を指定することで強制的にインライン化することにより、横並びにすることができます。

CSSにdisplay: inline;を指定してリストを横並びにする

リストタグはリストアイテムごとに改行されつつ、上から下へと縦に並んでいきますが、フッターの箇所などでは横並びに使用されているケースが多いです。

例えば、以下のように記述したとします。

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

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

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

これを横並びにする場合、CSSで「li」側に「display: inline;」を指定してインライン化します。「ul」側に指定しても反応しませんのでご注意ください。

li {
display: inline;
}

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

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

リストマーカーの非表示

リストタグを横並びにした場合、デフォルトで上記のようにリストスタイルの黒丸マーカーは表示されなくなりますが、念のため「ul」か「li」にはlist-style-type: none;を付けておきます。

「ul」側に「list-style-type: none;」と記載しておけば「li」にも継承されますので、どちらでもよいのですが、どちらかというと「li」側につけておく方がより確実だと思います。ただ、仕様では「ul」側に付けることが推奨されていますので、「ul」に「list-style-type: none;」記載しておくことをおすすめします。

ul {
list-style-type: none;
}

リストマークを画像で設定している場合、list-style-image: none;なども指定しておくとよいでしょう。

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

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

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

.sample li {
display: inline;
}

この場合、「ol」で<ol class="sample">と指定している箇所があれば、「ol」の「li」にも適用されてしまうため、ulを追加して以下のように書いておく方がより確実です。

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;
}

「ul.sample li」や「.sample ul li」など微妙に違いますので注意しましょう。

リストを横並びにした際に生じる隙間

注意したい点としましては、グローバルナビゲーションの部分などでリストタグを横並びにする場合、リスト間に隙間が生じてしまうことです。

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

この場合、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: inline-block;で幅と高さを付ける

この「li」はもともとブロック要素ですので、「display: inline;」などを何も指定していないデフォルトの状態では幅や高さを指定することができます。

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

デフォルトの状態

li {
width: 100px;
height: 50px;
}

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

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

例えば、上記の例の「li」にdisplay: inline;を指定して横並びにし、これに幅や高さを指定しても何も反応しません。

display: inline;を指定した状態

li {
display: inline;
width:100px;
height:50px;
}

幅の値を200px、高さを200pxなどと変更しても反応しません。

li {
display: inline;
width: 200px;
height: 200px;
}

この場合、「display: inline-block;」を指定すると、インラインで横並びにしつつも、幅や高さを指定することができるようになります。

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

li {
display: inline-block;
width: 100px;
height: 50px;
}

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

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

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