CSSでリストをデザインするテーブルレイアウトを卒業しようこのページに掲載されている内容は、2010年に作成されたものです。CSS(スタイルシート)の色々なテクニックや知識を紹介します。スタイルシートの書き方から使い方、ブラウザーごとの動きの差まで、ページレイアウト手法を習得します。数分でできる「ちょっとした工夫」がメインテーマです。大きな違いがでたりするものです。知ってる人にとっては定番テクニックも初心者の人には役に立つかも?ということであまりネタの選別にこだわらず、幅広く紹介していきます。今回のテーマ:CSSでリストをデザインするリスト、<ul>は箇条書きのための要素です。大きな特徴として、各リスト項目の前にブレット(マーク)がつきます。今回はこのブレットをデザインしていきます!CSSでは、このブレットを画像にできるプロパティが用意されています。それが、list-style-imageです。}この例では、各ブラウザーのデフォルトのブレットがlist.gifに置き換わります。この方法、何の間違いもない普通の方法なのですが、ちょっと不便な点があります。リスト項目の中身の文字サイズなどによっては、表示がずれてしまうことがあるのです。そこで、list-style-imageではなく、background-imageを使っちゃおう!というのが今回のポイントです。background-imageであれば、background-positionとpaddingで自由に位置が調整できます。わかりづらいサンプルになってしまいましたが、中心線の位置とリストの画像の位置が先ほどよりそろっているのがわかると思います。小技ですが、知ってるとリストがぐっと扱いやすくなるハズです。)XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。Twitter大切にします個人情報m-Schoolは、お客さまのプライバシーを守ります。3分コーディングCSSでリストをデザインする。