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

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

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

CSSの使い方を実用サンプルで学ぶ: XHTMLとCSSの基礎から学び、Web標準のホームページを作成。正しいマークアップや効率的な運用方法も。; XHTML & 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を利用したブレットだと文字ときれいにそろう