画像リンクを横に並べる方法

深夜に友人とメッセで、画像のバナーを margin や padding 指定がキッチリできるよう横に並べることはできないかな？っていう話になったので、少し考えてみた。

1. imgタグにそのままリンクを貼る

多分、最も簡単な方法。imgタグをアンカータグで直接リンクを貼る。

<p id="banner">
  <a href="./" title="page1"><img src="gazo1.gif" width="80" height="19" alt="gazo1" /></a>
  <a href="./" title="page2"><img src="gazo2.gif" width="80" height="19" alt="gazo2" /></a>
  <a href="./" title="page3"><img src="gazo3.gif" width="80" height="19" alt="gazo3" /></a>
</p>

CSSは以下のとおり。

p#banner {
  margin: 50px 0 0 50px; 
  /* 見易くするため */
  padding: 0;
}

p#banner a {
  margin: 0;
  padding: 0;
}

p#banner a img {
  margin: 0;
  padding: 0;
  border: 0;
}

サンプル１を見てもらうと分かるが、marginとpaddingをすべて0にしたにも関わらず、画像の間にスペースがある。これはなぜかというと、pタグとアンカータグの階層関係を表そうとインデントした結果、pタグ中にある改行とスペース（またはタブ）が認識されてしまったというもの。

スペースがダメなら無くしてしまえばいいじゃないか！ということで取り除いてみると、

<p id="banner"><a href="./" title="page1"><img src="gazo1.gif" width="80" height="19" alt="gazo1" /></a><a href="./" title="page2"><img src="gazo2.gif" width="80" height="19" alt="gazo2" /></a><a href="./" title="page3"><img src="gazo3.gif" width="80" height="19" alt="gazo3" /></a></p>

サンプル２の様になり画像はキッチリ並ぶが、これだとメンテナンスしやすさに欠ける。

2. list を利用する（inline）

今度はpタグを使わずにリストで各要素を定義し、CSSで制御してみる。

<ul id="banner">
  <li><a href="./" title="page1"><img src="gazo1.gif" width="80" height="19" alt="gazo1" /></a></li>
  <li><a href="./" title="page2"><img src="gazo2.gif" width="80" height="19" alt="gazo2" /></a></li>
  <li><a href="./" title="page3"><img src="gazo3.gif" width="80" height="19" alt="gazo3" /></a></li>
</ul>

list を要素を横に並べる最も簡単な方法は、li のdisplay を inline にすること。

ul#banner {
  margin: 50px 0 0 50px;
  padding: 0;
}

ul#banner li {
  display: inline;
  margin: 0;
  padding: 0;
}

ul#banner li a {
  margin: 0;
  padding: 0;
}

ul#banner li a img {
  margin: 0;
  padding: 0;
  border: 0;
}

結果はサンプル３。サンプル２と同様にインデント用に改行＆スペース（タブ）を入れているために、意図しないスペースが空いてしまっているようだ。こちらも、先程と同じように改行とスペースを取り除くとちゃんと表示された。

3. list と clearfix を利用する

li 要素を float で回り込ませることで横に並べる。この float を使うにあたって注意すべきなのは、エージェント（ブラウザ）によってレイアウトが崩れるものがあるということ。これに対処するため、世の中には clearfix という便利なものがある。clearfixは、float での回り込みをその親要素などで clear してやることでレイアウトの崩れを解消できることを利用し、更にクロスブラウザに対応させたもの。詳細については下記サイトにて紹介されているので、今回は省略する。

• 俗に言う clearfix と言われるコードのバリエーション色々（Lucky bug::blog）
• clearfixの決定版を作る －モダンブラウザ編－（norisfactory）
• clearfixはちゃんと考えられてた（3ping.org）

サンプル３のHTMLに以下のCSSを適用する。

ul#banner {
  margin: 50px 0 0 50px; /* 見易くするため */
  padding: 0;
}

ul#banner:after {
  height: 0;
  visibility: hidden;
  content: ".";
  display: block;
  clear: both;
}

/* for MacIE5 \*/
ul#banner{
  height: auto;
  overflow: hidden;
}
/* for MacIE5 */

ul#banner li {
  margin: 0;
  padding: 0;
  float: left;
  width: 80px;
  height: 19px;
  list-style-type : none;
}

ul#banner li a img {
  border: 0;
}

結果はサンプル４の様になり、無駄なスペースも無くキッチリ並べることができた。これをベースにして、上のCSS中にある li 要素の margin や padding を指定してやると意図した通りに配置できるはずだ。

今回検証したブラウザは、Firefox 2、IE 6、Safari 3.02 Beta(Windows版)、Opera 9あたり。すべてWindows環境での検証だが、Macユーザの友人がちゃんと見えると言っていたので、多分Macでも大丈夫だと思う（予想）。