XHTML/CSS・トップ | CSSプロパティ・目次

●リストマークをまとめて指定する

 list-styleは、リスト関係のプロパティをまとめて指定するプロパティです。list-style-type、list-style-position、list-style-imageの各プロパティで指定できる値を半角スペースで区切り、並べて指定します。順序は問いませんが、最低限ひとつ指定します。(指定できる値については関連ページを参照にしてください。)

■サンプル↓


【CSS】↓

.sample {
 list-style: square outside url("./design/p01.gif");
}
li {
 margin-bottom: 1em;
}

■補足↑↓

 実際に指定しているソースと同じように記載しました。ここでは"sample"のクラス名を使っています。ここのWebページと同じディレクトリに designのフォルダがあり、その中に"p01.gif"のリストマーク用の画像ファイルが収まっています。文書と画像ファイルが同じディレクトリであれば、URL指定は url("p01.gif") となります。なお、./ とドットがひとつの場合は ./ を省略することができます。引用符のダブルクォーテーション( " )は、HTML 4.01の場合、条件によっては省略できますが、省略しないようにしましょう。XHTMLではどんな場合でも属性値を引用符で囲う必要があります。(ページソースに画像ファイルを囲う引用符が入っていないのは作成ソフトの影響です。)

※引用符として、シングルクォーテーション( ' )も使えます。(正確に書きますと、左シングルクォーテーション、右シングルクォーテーションです。)

 ユーザーによっては画像を表示させないブラウザの設定にしていることもありますので、なんらかのリストのマーカーも同時に指定しておくと良いでしょう。ここでは四角形のマーカーを画像が表示されないときの補佐として指定しています。


【HTML】↓

<ul class="sample">
 <li>→ square の値を指定し、四角形のリストマークを指定
 <li>→ outside のポジションを指定
 <li>→ p01.gif の画像ファイルをリストマークに指定
</ul>

■関連ページ↓

■総括↓

 リスト項目とリスト項目の行間は適度にあったほうが見やすいかと思います。ここでは例として、 li { margin-bottom: 1em; } の下マージンを 1em 指定しています。(使うときは実数値を調整してみてください。ほかの単位も使えます。)

XHTML/CSS・目次 | リスト・目次

Copyright (C) 2005-2007 http://www.xml.vc/