第3回 CSSでリストをデザインするテーブルレイアウトを卒業しよう

CSS(スタイルシート)の色々なテクニックや知識を紹介します。

CSSでリストをデザインする

数分でできる「ちょっとした工夫」がメインテーマです。

たかが「ちょっとした工夫」でも、知っているといないとでは効率やクオリティ にも大きな違いがでたりするものです。

また、知ってる人にとっては定番テクニックも初心者の人には役に立つかも?ということであまりネタの選別にこだわらず、幅広く紹介していきます。 はじまりはじまり。

今回のテーマ:CSSでリストをデザインする

リスト、<ul>は箇条書きのための要素です。大きな特徴として、各リスト項目の前にブレット(マーク)がつきます。今回はこのブレットをデザインしていきます!

CSSでは、このブレットを画像にできるプロパティが用意されています。それが、list-style-imageです。 こんな風に使います。

ul li{ 	
    list-style-image: url(../list.gif); 
}

この例では、各ブラウザーのデフォルトのブレットがlist.gifに置き換わります。この方法、何の間違いもない普通の方法なのですが、ちょっと不便な点があります。リスト項目の中身の文字サイズなどによっては、表示がずれてしまうことがあるのです。

フォントサイズを大きくするとブレットの位置がずれる

そこで、list-style-imageではなく、background-imageを使っちゃおう!というのが今回のポイントです。background-imageであれば、background-positionとpaddingで自由に位置が調整できます。

ul li{ 	
    /*ブレットは邪魔なので消す*/
    list-style-type: none;  


    /*背景画像で指定する*/
    background-image: url(../list.gif);
    background-positon: left center;
    background-repeat: no-repeat;
    padding-left: 20px; 
}

background-imageを利用したブレットだと文字ときれいにそろう

結果こんな感じ。 ちょっとわかりづらいサンプルになってしまいましたが、中心線の位置とリストの画像の位置が先ほどよりそろっているのがわかると思います。

小技ですが、知ってるとリストがぐっと扱いやすくなるハズです。(こう鈴木 航 (すずきこう)

次のページは…
CSSでリストを横並びのメニューにする
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読