制作者の活動(PR)。

<ol class="withExplanation">
    <li>
        <em>先ず、題名を。</em>
        どんな文書にも必ず題名が付いている筈です。
        このため、HTMLに於いて、&lt;title&gt;要素は最も重要な要素とされており、唯一の必須要素となっております。
        </li>

    <li>
        <em>続いて、見出しと段落をマークアップします。</em>
        <p>見出しは&lt;h○&gt;要素、段落は&lt;p&gt;要素としてそれぞれマークアップしていきます。</p>
        <p>注意すべき事として、&lt;h○&gt;要素の○に入る数字は、見出しの等級であり、決して見出しの表示サイズではないと言う事です。</p>
        </li>

    <li>
        <em>必要に応じてアンカーを降ろします。</em>
        <p>ハイパーリンクはWWWにとって最も重要な概念ですが、これを実現するのが&lt;a&gt;要素です。</p>
        <p>href属性値にリンク先のURLを指定しますと、当該要素の内容となるテキストがそのURLをつながりを持つ事となります。</p>
        </li>
    </ol>

サンプルHTML文書はここまで

ご覧のように、各<li>要素の内容の冒頭には、要素としてマークアップされたテキストがあり、それはテーブル(表)の形式で表示させるとすれば恐らく左側の見出しコマのように表示させるところでしょう。

そして、残りのテキストを右側の通常のコマのように表示させようと言う訳です。

ここで、要素(強調テキスト)を無闇に使っているところに疑念を感じる方もいるかも知れませんが、テーブル形式でなかったとしても、各項目の強調されるべき箇所となる筈です。

実際のCSSでのスタイル。

▲記事先頭
△前項目
▽次項目

いろいろな方法があると思いますが、ここでは最も単純なフローティングを用いて行いたいと思います。

現行のウェブブラウザ(インターネットエクスプローラの場合は 8.0以降)であれば、本当にテーブル形式で表示させる事も可能ですが、インターネットエクスプローラ 7.0まででは不可能である事と、余り綺麗な見栄えにならない事からこの方法に関しては後ほどおまけとして解説致します。

ここでは、見出しコマとなる要素の幅は九文字以内と仮定しております。

実際のCSSでのスタイルを読み飛ばす

ol.withExplanation {
    margin: 1em 0 1em 1em;
    padding: 0;
    border: #aca 1px solid;
    border-width: 1px 2px 2px;
    background: #f8fff8;
    counter-reset: ctr;
    }

ol.withExplanation li {
    display: block;
    list-style-type: none;
    margin: 0 0 0 10em;
    padding: 0.5em;
    border: #aca 1px solid;
    border-width: 1px 0 0 1px;
    background: #ffffff;
    position: relative;
    top: 0;
    left: 0;
    }

ol.withExplanation li em {
    display: block;
    width: 9em;
    margin: -1px 0 0;
    padding: 0.5em;
    position: absolute;
    top: 0;
    left: -10em;
    font-style: normal;
    border-top: #aca 1px solid;
    font-weight: normal;
    }

ol.withExplanation li em:before {
    display: inline;
    content: counter(ctr) ". ";
    counter-increment: ctr;
    }

ol.withExplanation li em+* {
    margin-top: 0;
    }

ol.withExplanation li * {
    margin-bottom: 0;
    }

/* IE 6.0 対策。*/
* html ol.withExplanation li em {
    margin-left: -0.5em;
    top: 1px;
    }

* html ol.withExplanation li p {
    position: relative;
    top: -2em;
    }

/* IE 7.0 対策。*/
*+html ol.withExplanation li p {
    position: relative;
    top: -1em;
    }

実際のCSSでのスタイルはここまで

本頁の目次

ここで、全体のスタイルとして、ボーダの組み合わせと背景色について解説しておきましょう。

ボーダの扱い

ボーダは、<ol>要素全体の枠線としては幅 2ピクセルズとしておりますが、実際には<ol>要素には上は 1ピクセルしか与えておりません。

これは、実際に各項目には上に 1ピクセルの幅の枠線を引く事で区切りとしているからです。
そして、<li>要素については、左側の見出しコマに相当する部分についてパディングを含めた幅の余白を取り、更に左に 1ピクセルの幅の枠線を引いて区切りとします。
そうすると、見出しに相当する要素の部分(すなわち左側のコマ)の上の枠線が引かれないため、これは要素にて指定します。
- 当然、要素は display: block プロパティでブロックレヴェル要素風に表示させます。

背景色の扱い