WEB ページ作成基準リスト (箇条書き)

タイトル付き

箇条書きの先頭にタイトルが必要なとき，次のようにします．

リストのタイトルの書き方

<li><span class="title">タイトル</span>文章を記述．</li>

番号付き

括弧なし

段階を追って説明をするときに使う，番号付きリストは以下のようにして作成します．私のCSSでは，入れ子は二段までスタイルを指定しています．

番号付きリストの書き方

<ol class="enumerate">
  <li>1番目の文章</li>
  <li>2番目の文章
  <ol>
    <li>2.a番目の文章</li>
    <li>2.b番目の文章</li>
  </ol></li>
  <li>3番目の文章</li>
  <li>4番目の文章
  <ol>
    <li>4.a番目の文章</li>
    <li>4.b番目の文章</li>
  </ol></li>
</ol>

括弧あり

リストの番号に括弧を付けたい場合，「<ol class="クラス名"> — </ol>」とします．

リストが第二階層以降の場合は，「<ol class="クラス名" style="margin-left:幅px"> — </ol>」とします．第二階層の場合は，15px が適切です．第三階層以降は，左マージン (margin-left) を調整し，良い値を見つけます．

記号付き

順序のない時の箇条書きに使います.私のCSSでは，入れ子は二段までスタイルを指定しています．

記号付きリストの書き方

<ul class="itemize">
<li>文章</li>
<li>文章
    <ul>
      <li>文章</li>
      <li>文章</li>
    </ul></li>
<li>文章</li>
<li>文章
    <ul>
      <li>文章</li>
      <li>文章</li>
    </ul></li>
<ul>

定義付きの長い説明

定義の名前が短く，その説明が長い時に使います(具体例)．名前と説明で二段になります．入れ子にはしません．

定義付きリストの書き方

<dl class="diff">
  <dt>定義1</dt>
  <dd>定義1の説明</dd>

  <dt>定義2</dt>
  <dd>定義2の説明</dd>
</dl>

定義付きの短い説明

名前と説明が同じ行の短い説明に使います(具体例)．タブ(tab)の代わりにも使えますし，2列以上も可能です．入れ子にはしません．

定義付きの短い説明用のリストの書き方

<table class="explanation">
  <col style="width:幅(整数)px"><col style="width:幅(整数)px">

  <tr>
    <td>定義など</td>
    <td>左の定義などを記述します．</td>
  </tr>

  <tr>
    <td>Google</td>
    <td>創業者はラリー・ペイジとセルゲイ・ブリンです．</td>
  </tr>
</table>

上の HTML 文をブラウザで表示すると以下のように表示されます．

コマンド説明

複数のコマンドを説明するときのリストは，次のように記述します(具体例)．

コマンド説明用リストの書き方

<dl class="discription_of_command">
  <dt>コマンド1<span class="op">オプション</span><span class="arg">引数</span><span class="arg2">引数2</span><span class="org">(コマンドの語源)</span></dt>
  <dd>コマンド1の説明を記述します．コマンド引数は，「<span class="arg">引数1</span>や<span class="arg2">引数2</span>」とします．</dd>

  <dt>コマンド2<span class="arg">引数</span><span class="org">(コマンドの語源)</span></dt>
  <dd>コマンド2の説明．<span class="key">キー</dd>

  <dt>オプション<span class="description">オプションについて説明</span><span class="default">デフォルトの値</span></dt>
  <dd>オプションの説明とかに便利です．</dd>
</dl>

上の HTML をブラウズで見ると，以下のようになります．

コマンド1オプション引数引数2(コマンドの語源)

コマンド1の説明を記述します．コマンド引数は，「引数1や引数2」とします．

コマンド2引数(コマンドの語源)

コマンド2の説明．キー

オプションオプションについて説明デフォルトの値

オプションの説明とかに便利です．

コマンド説明のクラス <dl class="discription_of_command"> — <span> の間で使える <span> のクラスは以下のとおりです．

ページ作成情報

参考資料

更新履歴

last update:2020/08/09 00:00:49