2006年07月29日(土) 05時14分07秒

CSSのメモ帳 ‐CSS(スタイルシート)で画像とリストの隙間を消す‐

テーマ:CSS メモ

今回は画像をリストタグでマークアップするときの
CSS(スタイルシート)の使用方法を軽く見てみましょう。

前回の、画像を見出しタグでマークアップするのと同じように、
画像をリストタグでマークアップしてみましょう。

これもIEだったかな?
リスト間の余白を0にしているはずなのに、
なぜか隙間が開いてしまうという現象。

困ったものです。

CSS(スタイルシート)でリストの画像間の隙間を消すには

これが起こる理由は、htmlのソース上における改行なのです。

<ul>
<li><img src="--------" /></li>
<li><img src="--------" /></li>
<li><img src="--------" /></li>
</ul>

という具合に箇条書きにする人が大半でしょう。

しかし、それが予想もしなかった溝を生み出すのです。

ではどうやってこの隙間を消すかですが、
やはりあらかじめCSS(スタイルシート)で、余白を0にしておきます。

次に今回の主役のコメントアウトのこれ『<!-- -->』
こいつが出てきます。

使い方は簡単。以下の通り。

<ul><!--
--><li><img src="--------" /></li><!--
--><li><img src="--------" /></li><!--
--><li><img src="--------" /></li><!--
--></ul>

これで画像の下の隙間が消えるはずです。
IEでは前回説明した、画像のマークアップの方法と合わせてお使いください。

これはテーブルのセル間の隙間などにも使えます。確か…

今回はCSS(スタイルシート)をあまり使いませんでした。

では

AD
いいね!した人  |  コメント(0)  |  リブログ(0)

コメント

[コメントをする]

コメント投稿

AD

Ameba人気のブログ

Amebaトピックス

      ランキング

      • 総合
      • 新登場
      • 急上昇
      • トレンド

      ブログをはじめる

      たくさんの芸能人・有名人が
      書いているAmebaブログを
      無料で簡単にはじめることができます。

      公式トップブロガーへ応募

      多くの方にご紹介したいブログを
      執筆する方を「公式トップブロガー」
      として認定しております。

      芸能人・有名人ブログを開設

      Amebaブログでは、芸能人・有名人ブログを
      ご希望される著名人の方/事務所様を
      随時募集しております。