Home > html/css > 画像リンクを横に並べる方法

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

  • Posted by: non
  • 2007年7月 4日 05:22
  • html/css

深夜に友人とメッセで、画像のバナーを 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;
}

サンプル1を見てもらうと分かるが、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の様になり画像はキッチリ並ぶが、これだとメンテナンスしやすさに欠ける。

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。サンプル2と同様にインデント用に改行&スペース(タブ)を入れているために、意図しないスペースが空いてしまっているようだ。こちらも、先程と同じように改行とスペースを取り除くとちゃんと表示された。

3. list と clearfix を利用する

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

サンプル3の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;
}

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

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

heteml banner

Home > html/css > 画像リンクを横に並べる方法

Return to page top