【HTML/CSS】Word原稿の通りの箇条書きや説明リストにする方法（ul、ol、dl）

2022 3/16

2022-03-16 2022-03-16

箇条書きにインデントをつけたい！

　告知投稿やページを制作するときに箇条書きが必要になることは多いと思います。

　WordでもWebページでも、箇条書きはインデントをつけた（行頭から１文字下げた）スタイルが読みやすくなります。

１.例えばこのように
２.インデントをつけない箇条書きよりも

　１.このようにインデントをつけた箇条書きの方が
　２.読みやすいと感じるでしょう。
　３.ただし、このように単純に「スペース」＋「箇条書き」と文字入力してしまうと、閲覧ユーザーのデバイスの幅が多様なWebページでは、長文では折り返した２段目以降の行頭が、箇条書きの前に出てしまいます。

　そこで、箇条書きの行頭を美しく揃えるために＜ul＞や＜ol＞タグを使うことになります。

方法

　テーマやエディターによって箇条書きの挿入方法は異なりますので、具体的な操作方法ではなく、ul、olタグの表示のされ方で説明していきます。

箇条書きの種類（ul、ol）

　ulは・や○、■などの記号、olは1.2.3.、A.B.C.などの連番になります。

　ul、olタグの記号の種類の変更方法は、HTMLのtype属性で指定する方法と、CSSのlist-style-typeで指定する方法がありますが、type属性はHTML5から外されましたので、CSSのlist-style-typeの使用をお勧めします。

ulタグの種類

list-style-type: disc;　デフォルトの黒点　タイプ指定省略でコレ
項目２
項目３

list-style-type: circle;　白丸
項目２
項目３

list-style-type: square;　黒四角
項目２
項目３

list-style-type: none;　装飾なし
項目２
項目３

olタグの種類

list-style-type: decimal;　デフォルトの算用数字　タイプ指定省略でコレ
項目２
項目３

list-style-type: decimal-leading-zero;　先頭に０がつく算用数字
項目２
項目３

list-style-type: lower-latin;　小文字のアルファベット
項目２
項目３

list-style-type: lower-alpha;　小文字のアルファベット
項目２
項目３

list-style-type: upper-latin;　大文字のアルファベット
項目２
項目３

list-style-type: upper-alpha;　大文字のアルファベット
項目２
項目３

list-style-type: cjk-ideographic;　漢数字
項目２
項目３

list-style-type: hiragana;　ひらがなのあいうえお順
項目２
項目３

list-style-type: katakana;　カタカナのアイウエオ順
項目２
項目３

list-style-type: hiragana-iroha;　ひらがなのいろはにほへと順
項目２
項目３

list-style-type: katakana-iroha;　カタカナのイロハニホヘト順
項目２
項目３

list-style-type: lower-roman;　小文字のローマ数字
項目２
項目３

list-style-type: upper-roman;　大文字のローマ数字
項目２
項目３

list-style-type: lower-greek;　小文字のギリシャ文字
項目２
項目３

　他に「hebrew　ヘブライ文字」、「armenian　アルメニア文字」、「georgian　グルジア文字」もありますが、あまり一般的では無いので割愛。

　HTMLのtype属性よりも種類が増えてますね。いろは順ってなんですか！？

　箇条書きを何種類も欲しがるのは日本人だけなんでしょうかね？

　以前はtype=“none”に文字入力していたリストが、list-style-typeで指定できるのですよ。便利便利。

ulタグの種類
<ul style="list-style-type: disc;">
<li>list-style-type: disc;　デフォルトの黒点　タイプ指定省略でコレ</li>
<li>項目２</li>
<li>項目３</li>
</ul>
<ul style="list-style-type: circle;">
<li>list-style-type: circle;　白丸</li>
<li>項目２</li>
<li>項目３</li>
</ul>
<ul style="list-style-type: square;">
<li>list-style-type: square;　黒四角</li>
<li>項目２</li>
<li>項目３</li>
</ul>
<ul style="list-style-type: none;">
<li>list-style-type: none;　装飾なし</li>
<li>項目２</li>
<li>項目３</li>
</ul>

olタグの種類
<ol style="list-style-type: decimal;">
<li>list-style-type: decimal;　デフォルトの算用数字　タイプ指定省略でコレ</li>
<li>項目２</li>
<li>項目３</li>
</ol>
<ol style="list-style-type: decimal-leading-zero;">
<li>list-style-type: decimal-leading-zero;　先頭に０がつく算用数字</li>
<li>項目２</li>
<li>項目３</li>
</ol>
<ol style="list-style-type: lower-latin;">
<li>list-style-type: lower-latin;　小文字のアルファベット</li>
<li>項目２</li>
<li>項目３</li>
</ol>
<ol style="list-style-type: lower-alpha;">
<li>list-style-type: lower-alpha;　小文字のアルファベット</li>
<li>項目２</li>
<li>項目３</li>
</ol>
<ol style="list-style-type: upper-latin;">
<li>list-style-type: upper-latin;　大文字のアルファベット</li>
<li>項目２</li>
<li>項目３</li>
</ol>
<ol style="list-style-type: upper-alpha;">
<li>list-style-type: upper-alpha;　大文字のアルファベット</li>
<li>項目２</li>
<li>項目３</li>
</ol>
<ol style="list-style-type: cjk-ideographic;">
<li>list-style-type: cjk-ideographic;　 漢数字</li>
<li>項目２</li>
<li>項目３</li>
</ol>
<ol style="list-style-type: hiragana;">
<li>list-style-type: hiragana;　ひらがなのあいうえお順</li>
<li>項目２</li>
<li>項目３</li>
</ol>
<ol style="list-style-type: katakana;">
<li>list-style-type: katakana;　カタカナのアイウエオ順</li>
<li>項目２</li>
<li>項目３</li>
</ol>
<ol style="list-style-type: hiragana-iroha;">
<li>list-style-type: hiragana-iroha;　ひらがなのいろはにほへと順</li>
<li>項目２</li>
<li>項目３</li>
</ol>
<ol style="list-style-type: katakana-iroha;">
<li>list-style-type: katakana-iroha;　カタカナのイロハニホヘト順</li>
<li>項目２</li>
<li>項目３</li>
</ol>
<ol style="list-style-type: lower-roman;">
<li>list-style-type: lower-roman;　小文字のローマ数字</li>
<li>項目２</li>
<li>項目３</li>
</ol>
<ol style="list-style-type: upper-roman;">
<li>list-style-type: upper-roman;　大文字のローマ数字</li>
<li>項目２</li>
<li>項目３</li>
</ol>
<ol style="list-style-type: lower-greek;">
<li>list-style-type: lower-greek;　小文字のギリシャ文字</li>
<li>項目２</li>
<li>項目３</li>
</ol>

箇条書きの行頭揃え

記事やリーフレットには欠かせないインデント。長文になると折り返し位置がどうなるか？任意の位置に折り返しの行頭が来るようにするにはどうしたら良いのか？
1のように、＜li＞＜/li＞で囲まれた文章の折り返し２段目は、１段目の行頭と同じになります。
また、リスト内にリストを入れなければならない場合も多々あるでしょう。
・まずは単純に＜br＞で折り返す方法。先頭の中黒「・」は文字入力なので、長文になると折り返した２段目の行頭が中黒と同じ位置になります。
そこで＜li＞＜/li＞の中に＜ul＞＜li＞＜/li＞＜/li＞＜/ul＞を入れる方法。
- 先頭の■はインデントされているので、長文になっても折り返した２段目の行頭は１段目の先頭文字の位置と同じになります。
さらには、箇条書きを小見出しとして扱い、その下に説明文を入れるときは
- リストのマークが邪魔になるので、＜li style=”list-style-type: none;”＞とすれば、改行されるような長文でも問題なくインデントされます。

項目１
- 説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明。
項目２
- 説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明。

<ol>
<li>項目１
<ul>
<li>説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明。</li>
</ul>
</li>
<li>項目２
<ul>
<li style="list-style-type: none;">説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明。</li>
</ul>
</li>
</ol>

記述リスト（dl dt dd）

　入子レイアウトには記述リストを使う方法もあります。

記述タイトル１: 説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明。
記述タイトル２: 説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明。

これを＜ol＞と組み合わせてみましょう。

項目１（記述タイトル１）

＜ol＞の＜li＞＜/li＞の間に＜dl＞＜dt＞＜/dt＞＜dd＞＜/dd＞＜/dl＞を挿入しました。

＜dt＞記述タイトル＜/dt＞を連番項目にしたパターンです。
項目２

記述タイトル２

こちらは、＜li＞と＜dl＞の間に項目名を入れたパターン。

どちらも＜dd＞のインデント位置が同じになることがわかります。

<ol>
<li>
<dl>
<dt>項目１（記述タイトル１）</dt>
<dd>説明文</dd>
<dd>説明文</dd>
</dl></li>
<li>項目２<dl>
<dt>記述タイトル２</dt>
<dd>説明文</dd>
<dd>説明文</dd>
</dl></li>
</ol>

まとめ

いかがでしょうか？

普段何気なく使っているリストですが、Word原稿のインデント位置を再現しなければならない場合にうまくいかないことが多いものです。

クライアントが標準的なリストレイアウトや連番記号で納得していただける場合は問題ないですが、Word（紙媒体）原稿のレイアウトに拘りがあった場合には、何かと苦労をすることがあります。＜div＞の入子で再現することもありますが、時代はレスポンシブ。スマホ対応の工数を減らすためにも、インデントリストは使いこなせた方が良いと思います。