CSSの実習(6) - リスト要素関連の指定。

リスト要素関連のスタイル指定で出来る事。

• <ul>要素(順不同リスト)
• <ol>要素(順序付きリスト)

では、その直下にある<li>要素(リスト項目)の冒頭にマーカと呼ばれる目印を与えます。

多くの場合、

• <ul>要素直下の<li>要素には黒丸や白丸など
• <ol>要素直下の<li>要素には数字

がマーカとして付けられます。

これを好みのものに変えたり、邪魔であれば非表示にしたり、或いは好きな画像に代える事も出来ます。

• リスト項目へのマーカを画像に代える場合、画像が読み込めない或いは読み込まない場合のために代替となるマーカの指定が必要です。

例えば、従来の HTML 4/XHTML 1 では、見出しや段落に含まれない<img>要素(埋め込み画像)は取敢えずリストとしてマークアップすると言う考えがありましたが、その場合リストのマーカが無意味に付いてしまいます。

そこで、CSSで画像リストのマーカを消してしまう事が考えられます。

• HTML 5 では<figure>要素に収めることが可能になったため、この問題は過去のものとなります。

この他、リストのマーカの配置を変える事も出来ます。具体的には

• マーカをリスト項目の外に出す
• マーカをリスト項目の中に組み込む

から撰べます。

• リスト要素に関するプロパティについての詳細は、リスト関連の主なプロパティをご覧ください。

今回やりたい事。

今回は、文書中に含まれる<ul>要素(順不同リスト)に対して、以下の事をしてみましょう。

• 文書内の<ul>要素について、以下の画像を<li>要素(リスト項目)のマーカとして使います。
  • 

  配置としては、項目の外にこのマーカが表示されるようにします。

ここでは、実習としてやりたい事を挙げておりますが、もし読者の方がここで挙げているスタイルではなく、別のスタイルにしてみたいと思うのであれば、それを実際にやってみるのが何よりの実習です。

是非挑戦してみてください。

実際のスタイル定義。

さて、これから実際に前回までのスタイル定義ファイル style.css にスタイルを追記していきましょう。

• 前回は特定の要素への背景画像の指定をしております。

ul {
    margin: 1em 0 0 4em;
    list-style-image: url("ListMarker.GIF");
    list-style-type: disc;
    list-style-position: outside;
    }

ol {
    list-style: decimal;
    …
    }

ここまででのスタイル定義ファイルの纏め。

以上のスタイルを纏めると、スタイル定義ファイル style.css は以下のようになっているでしょう。

• 読み飛ばす

@charset "shift_jis";

* {
    background-color: transparent;
    background-image: none;
    color: #000;
    margin: 0;
    padding: 0;
    border: none 0;
    background-color: #fff;
    color: #000;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    font-size: 100%;
    font-style: normal;
    text-decoration: none;
    font-weight: normal;
    text-align: left;
    line-height: 1.5em;
    text-indent: 0;
    }

html {
    background-color: #fff;
    padding: 2em 1em;
    }

h1 {
    margin-bottom: 1em;
    background-color: #ff0;
    color: #090;
    font-style: italic;
    font-weight: bold;
    font-size: 200%;
    line-height: 1.2em;
    text-align: center;
    }

h2 {
    margin: 3em 0 1em;
    border-color: #cc0;
    border-style: solid;
    border-width: 1px 2px 4px;
    background-color: #fff;
    background-image: url("Background-H2.GIF");
    background-repeat: repeat-y;
    background-position: right top;
    color: #090;
    font-size: 120%;
    line-height: 1.2em;
    }

p {
    margin: 1em 0 0 2em;
    text-indent: 1em;
    }

ul {
    margin: 1em 0 0 4em;
    list-style-image: url("ListMarker.GIF");
    list-style-type: disc;
    list-style-position: outside;
    }

figure {
    margin: 1em 0 0 2em;
    }

hr {
    margin: 3em 0 1em;
    border: 1px solid #888;
    }

a:link {
    color: #090;
    text-decoration: underline;
    }

a:visited {
    color: #000;
    text-decoration: underline;
    }

dfn {
    border-bottom: 2px solid #cc0;
    color: #090;
    }

em {
    padding-top: 4px;
    background-color: #fee;
    background-image: url("Background-EM.GIF");
    background-repeat: repeat-x;
    background-position: left top;
    color: #000;
    }

このスタイル定義ファイルを適用したHTML文書を表示させると以下のようになります。

前回までのスタイル定義の場合

今回のスタイルを適用した場合