の まとめ

デジタルガジェットレビュー、Mac ・ iPhone・ WordPressのコード、食レポなどをまとめて比較してお届けします。

ulタグ、liタグを使った横並びメニューの作成方法

      2015/01/15

はじめに

ヘッダーなどに使う横並びのメニュー。

HTMLの構造的にもulタグ、liタグ(リストタグ)を使うのが好ましいのですが、横並びにするのにはちょっとした工夫が必要です。

ここではul、liを使ってメニュー表記に適した横並びにさせる方法をご紹介します。

方法比較

ul , liをメニューとして横並びにする代表的な手法は次の2つです。

  • float:left;
  • display:inline-block;

floatは、それぞの要素を細かく指定できますが、次のタグでfloatをclearしなくてはなりません。

inline-blockは、clearが必要ありません。メニュー以外にも写真のサムネイルを並べるなどの応用も可能です。一方、liタグの隙間を改行と判断するため、普通に記述するとli間に隙間ができてしまいます。対処法は後述します。

サンプル

ul_li_listmenu2

ソース

上記サンプルのソースを説明します。

CSSのソースは次の通りです。
赤枠は.floatnavi、青枠は.inlineboxnaviというクラス名で指定しています。
特記事項はコメントで補足しています。

<style type="text/css">
.floatnavi {
	overflow: hidden;/* 高さの指定をするために必要 */
	border : 1px solid #f00;
	margin : 10px;
	padding: 10px;
}
.floatnavi li {
	float: left;
	background-color: #FFC;
	padding: 10px;
	list-style-type:none;/**/
}
.clear {
	clear: left;
	float: none;
}
.inlineboxnavi {
	border : 1px solid #00f;
	margin : 10px;
	padding: 10px;
}
.inlineboxnavi li {
	display: inline-block;
	background-color:#9CC;
	padding: 10px;
}
/* ハックでIE6,7のみに適用 */
html*.inlineboxnavi li {
	display: inline;
	zoom: 1;
}
</style>

HTMLのソースです。

<h1>floatとinline-blockの比較</h1>
<div class="floatnavi">
  <ul>
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
    <li>menu4</li>
    <li>menu5</li>
  </ul>
</div>
<p class="clear">ここから次のパラグラフ。このパラグラフでfloatをclearする必要がある。</p>
<div class="inlineboxnavi">
  <ul>
   <li>menu1</li><!--
--><li>menu2</li><!--
--><li>menu3</li><!--
--><li>menu4</li><!--
--><li>menu5</li>
  </ul>
</div>
<p>ここから次のパラグラフ。ソースの改行を隙間と判断するため、&lt;/li&gt;と次の&lt;li&gt;の間をコメントアウトする必要がある。</p>
<div class="inlineboxnavi">
  <ul>
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
    <li>menu4</li>
    <li>menu5</li>
  </ul>
</div>

まとめ

ここではulタグとliタグを使って横並びのメニューを作成する方法を2通り紹介しました。

個人的には、clearが使える場面が少ないのでinline-blockを使うことが多いです。
ただ、隙間を無くすためのコメントアウトでソースが見づらくなることが多いのでコーディングは気をつけています。

なおfloatの場合は、clearfixという手法もあります。ここでは長くなるので割愛しますが、案件に応じて使い分けてもいいかもしれません。

以上、ulとliを使った横並びメニューの作成方法をご紹介しました。

 - JS,PHP,CSS , , , ,

336-280

  関連記事

【初心者向け】簡単・おすすめ「jQuery」と「bxslider」によるスライドショーの設定方法

JavaScriptで簡単にスライドショーを実装するなら「jQuery」と「bx …

【CSS】CSSで作るプルダウン/ドロップダウンメニュー

CSS初心者でも簡単に実装できるプルダウン/ドロップダウンメニューをご紹介します …

CSSボタンデザイン
CSSで実装する見た目もコードもシンプルなボタンサンプル【決定版】

シンプルで、飽きずに、フラットデザインっぽくても、アフォードする、そんなボタンを …

【JavaScript】範囲を決めてランダムな値を1つ表示する方法

ここではJavaScriptでランダムな値を生成する方法を紹介します。 用途 1 …

【Webアプリ】iPhoneの画面に合わせて表示したい|画面サイズに合わせてコンテンツを表示する方法

PC向けにつくったWebページを、iPhoneなどのスマホで見たときに画面サイズ …