箇条書きにインデントをつけたい!
告知投稿やページを制作するときに箇条書きが必要になることは多いと思います。
WordでもWebページでも、箇条書きはインデントをつけた(行頭から1文字下げた)スタイルが読みやすくなります。
1.例えばこのように
2.インデントをつけない箇条書きよりも
1.このようにインデントをつけた箇条書きの方が
2.読みやすいと感じるでしょう。
3.ただし、このように単純に「スペース」+「箇条書き」と文字入力してしまうと、閲覧ユーザーのデバイスの幅が多様なWebページでは、長文では折り返した2段目以降の行頭が、箇条書きの前に出てしまいます。
そこで、箇条書きの行頭を美しく揃えるために<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; デフォルトの黒点 タイプ指定省略でコレ
- 項目2
- 項目3
- list-style-type: circle; 白丸
- 項目2
- 項目3
- list-style-type: square; 黒四角
- 項目2
- 項目3
- list-style-type: none; 装飾なし
- 項目2
- 項目3
- list-style-type: decimal; デフォルトの算用数字 タイプ指定省略でコレ
- 項目2
- 項目3
- list-style-type: decimal-leading-zero; 先頭に0がつく算用数字
- 項目2
- 項目3
- list-style-type: lower-latin; 小文字のアルファベット
- 項目2
- 項目3
- list-style-type: lower-alpha; 小文字のアルファベット
- 項目2
- 項目3
- list-style-type: upper-latin; 大文字のアルファベット
- 項目2
- 項目3
- list-style-type: upper-alpha; 大文字のアルファベット
- 項目2
- 項目3
- list-style-type: cjk-ideographic; 漢数字
- 項目2
- 項目3
- list-style-type: hiragana; ひらがなのあいうえお順
- 項目2
- 項目3
- list-style-type: katakana; カタカナのアイウエオ順
- 項目2
- 項目3
- list-style-type: hiragana-iroha; ひらがなのいろはにほへと順
- 項目2
- 項目3
- list-style-type: katakana-iroha; カタカナのイロハニホヘト順
- 項目2
- 項目3
- list-style-type: lower-roman; 小文字のローマ数字
- 項目2
- 項目3
- list-style-type: upper-roman; 大文字のローマ数字
- 項目2
- 項目3
- list-style-type: lower-greek; 小文字のギリシャ文字
- 項目2
- 項目3
他に「hebrew ヘブライ文字」、「armenian アルメニア文字」、「georgian グルジア文字」もありますが、あまり一般的では無いので割愛。
HTMLのtype属性よりも種類が増えてますね。いろは順ってなんですか!?
箇条書きを何種類も欲しがるのは日本人だけなんでしょうかね?
以前はtype=“none”に文字入力していたリストが、list-style-typeで指定できるのですよ。便利便利。
ulタグの種類
<ul style="list-style-type: disc;">
<li>list-style-type: disc; デフォルトの黒点 タイプ指定省略でコレ</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<ul style="list-style-type: circle;">
<li>list-style-type: circle; 白丸</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<ul style="list-style-type: square;">
<li>list-style-type: square; 黒四角</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<ul style="list-style-type: none;">
<li>list-style-type: none; 装飾なし</li>
<li>項目2</li>
<li>項目3</li>
</ul>
olタグの種類
<ol style="list-style-type: decimal;">
<li>list-style-type: decimal; デフォルトの算用数字 タイプ指定省略でコレ</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ol style="list-style-type: decimal-leading-zero;">
<li>list-style-type: decimal-leading-zero; 先頭に0がつく算用数字</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ol style="list-style-type: lower-latin;">
<li>list-style-type: lower-latin; 小文字のアルファベット</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ol style="list-style-type: lower-alpha;">
<li>list-style-type: lower-alpha; 小文字のアルファベット</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ol style="list-style-type: upper-latin;">
<li>list-style-type: upper-latin; 大文字のアルファベット</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ol style="list-style-type: upper-alpha;">
<li>list-style-type: upper-alpha; 大文字のアルファベット</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ol style="list-style-type: cjk-ideographic;">
<li>list-style-type: cjk-ideographic; 漢数字</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ol style="list-style-type: hiragana;">
<li>list-style-type: hiragana; ひらがなのあいうえお順</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ol style="list-style-type: katakana;">
<li>list-style-type: katakana; カタカナのアイウエオ順</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ol style="list-style-type: hiragana-iroha;">
<li>list-style-type: hiragana-iroha; ひらがなのいろはにほへと順</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ol style="list-style-type: katakana-iroha;">
<li>list-style-type: katakana-iroha; カタカナのイロハニホヘト順</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ol style="list-style-type: lower-roman;">
<li>list-style-type: lower-roman; 小文字のローマ数字</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ol style="list-style-type: upper-roman;">
<li>list-style-type: upper-roman; 大文字のローマ数字</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ol style="list-style-type: lower-greek;">
<li>list-style-type: lower-greek; 小文字のギリシャ文字</li>
<li>項目2</li>
<li>項目3</li>
</ol>
箇条書きの行頭揃え
- 記事やリーフレットには欠かせないインデント。長文になると折り返し位置がどうなるか?任意の位置に折り返しの行頭が来るようにするにはどうしたら良いのか?
- 1のように、<li></li>で囲まれた文章の折り返し2段目は、1段目の行頭と同じになります。
- また、リスト内にリストを入れなければならない場合も多々あるでしょう。
・まずは単純に<br>で折り返す方法。先頭の中黒「・」は文字入力なので、長文になると折り返した2段目の行頭が中黒と同じ位置になります。 - そこで<li></li>の中に<ul><li></li></li></ul>を入れる方法。
- 先頭の■はインデントされているので、長文になっても折り返した2段目の行頭は1段目の先頭文字の位置と同じになります。
- さらには、箇条書きを小見出しとして扱い、その下に説明文を入れるときは
- リストのマークが邪魔になるので、<li style=”list-style-type: none;”>とすれば、改行されるような長文でも問題なくインデントされます。
- 項目1
- 説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明。
- 項目2
- 説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明。
<ol>
<li>項目1
<ul>
<li>説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明。</li>
</ul>
</li>
<li>項目2
<ul>
<li style="list-style-type: none;">説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明。</li>
</ul>
</li>
</ol>
記述リスト(dl dt dd)
入子レイアウトには記述リストを使う方法もあります。
- 記述タイトル1
- 説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明。
- 記述タイトル2
- 説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明。
これを<ol>と組み合わせてみましょう。
-
- 項目1(記述タイトル1)
- <ol>の<li></li>の間に<dl><dt></dt><dd></dd></dl>を挿入しました。
- <dt>記述タイトル</dt>を連番項目にしたパターンです。
- 項目2
- 記述タイトル2
- こちらは、<li>と<dl>の間に項目名を入れたパターン。
- どちらも<dd>のインデント位置が同じになることがわかります。
<ol>
<li>
<dl>
<dt>項目1(記述タイトル1)</dt>
<dd>説明文</dd>
<dd>説明文</dd>
</dl></li>
<li>項目2<dl>
<dt>記述タイトル2</dt>
<dd>説明文</dd>
<dd>説明文</dd>
</dl></li>
</ol>
まとめ
いかがでしょうか?
普段何気なく使っているリストですが、Word原稿のインデント位置を再現しなければならない場合にうまくいかないことが多いものです。
クライアントが標準的なリストレイアウトや連番記号で納得していただける場合は問題ないですが、Word(紙媒体)原稿のレイアウトに拘りがあった場合には、何かと苦労をすることがあります。<div>の入子で再現することもありますが、時代はレスポンシブ。スマホ対応の工数を減らすためにも、インデントリストは使いこなせた方が良いと思います。