リスト表記で先頭の文字を1行目と揃える方法（CSSで字下げ）

今回は、Q&Aなどでよく使うLiタグで、先頭のテキストを「A：」や「Q：」とした時に2行目以降が揃わなくなり気持ちが悪場合、綺麗に揃えるCSSの記述を2パターンを紹介します。

その方法は、CSSのtext-indentを使用する簡単なパターンとリストマーカーをテキストに変更する応用の効くパターンです。

インデントを下げる

リストの先頭の文字と2行目以降の文字を綺麗に揃えるなら、CSSのtext-indentプロパティを使えば可能です。
indentを使えば文字を一文字分下げたり、反対に上げたりと調整する事が出来ます。

下記のリストは通常のリストです。
これだと2行目以降の先頭の文字が「Q：」と「A：」と同じ列にあり見栄えが悪い印象です。

綺麗に揃えたい場合は、下記のCSSのようにtext-indentを追加して字下げしてあげます。

HTML

<ul>
<li>Q：テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</li>
<li>A：テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</li>
</ul>

CSS

li {
    margin-left: 1.4em;
    text-indent: -1.6em; /*インデントの調整*/
}

上記の記述でインデントを調整したリストの実際の見た目は下記です。
「Q：」と「A：」が列から飛び出して何処までがQAなのか分かりやすくなりました。

リストマーカーを「Q」と「A」にする

これまでの方法は、通常のリストに表示されているテキストを字下げして無理やり揃えていたため微調整が必ず必要になる方法でした。次で紹介する方法はリストマーカーの「・」を「Q：」と「A：」に変更して必ず揃うようにします。また「Q：」と「A：」の部分を他の文字列や記号にする事で様々な用途で使用できるやり方です。

下記のリストは、リストマーカーを「Q：」と「A：」に変更したリストの実際の見た目です。

list-style-type: none;で一度リストマーカーを削除してcontent:プロパティで「Q：」や「A：」の文字列を設定する事でそれっぽくなります。

HTMLとCSSの記述は下記です。

HTML

<ul class="Question">
  <li class="QA_Q">質問1質問1質問1？？？？質問1質問1質問1？？？？質問1質問1質問1？？？？</li>
  <li class="QA_A">解答1解答1解答1！！！！解答1解答1解答1！！！！解答1解答1解答1！！！！</li>
  <li class="QA_Q">質問2質問2質問2？？？？質問2質問2質問2？？？？質問2質問2質問2？？？？</li>
  <li class="QA_A">解答2解答2解答2！！！！解答2解答2解答2！！！！解答2解答2解答2！！！！</li>
  <li class="QA_Q">質問3質問3質問3？？？？質問3質問3質問3？？？？質問3質問3質問3？？？？</li>
</ul>

CSS

<style>
ul.Question {
    list-style-type: none; /* リストマーカーを一旦削除 */
    text-indent: -1.4em;
}
ul.Question li.QA_A:before {
    content: 'A：'; /* リストマーカーにしたい文字列を設定 */
}
ul.Question li.QA_Q:before {
    content: 'Q：'; /* リストマーカーにしたい文字列を設定 */
}
</style>

content:の部分に色を付けてあげたり、Boldやmargin-leftを付けてあげれば、下記の様にもっと見やすいQ&Aになります。

HTML

<ul class="Question">
  <li class="QA_Q">質問1質問1質問1質問1質問1質問1質問1質問1質問1質問1質問1質問1質問1質問1質問1質問1質問1質問1</li>
  <li class="QA_A">解答1解答1解答1解答1解答1解答1解答1解答1解答1解答1解答1解答1解答1解答1解答1解答1解答1解答1</li>
  <li class="QA_Q">質問2質問2質問2質問2質問2質問2質問2質問2質問2質問2質問2質問2質問2質問2質問2質問2質問2質問2</li>
  <li class="QA_A">解答2解答2解答2解答2解答2解答2解答2解答2解答2解答2解答2解答2解答2解答2解答2解答2解答2解答2</li>
  <li class="QA_Q">質問3質問3質問3質問3質問3質問3質問3質問3質問3質問3質問3質問3質問3質問3質問3質問3質問3質問3</li>
  <li class="QA_A">解答3解答3解答3解答3解答3解答3解答3解答3解答3解答3解答3解答3解答3解答3解答3解答3解答3解答3</li>
  <li class="QA_Q">質問4質問4質問4質問4質問4質問4質問4質問4質問4質問4質問4質問4質問4質問4質問4質問4質問4質問4</li>
  <li class="QA_A">解答4解答4解答4解答4解答4解答4解答4解答4解答4解答4解答4解答4解答4解答4解答4解答4解答4解答4</li>
  <li class="QA_Q">質問5質問5質問5質問5質問5質問5質問5質問5質問5質問5質問5質問5質問5質問5質問5質問5質問5質問5</li>
  <li class="QA_A">解答5解答5解答5解答5解答5解答5解答5解答5解答5解答5解答5解答5解答5解答5解答5解答5解答5解答5</li>
</ul>

CSS

<style>
ul.Question {
    list-style-type: none;
    margin-left: 14px; /* マーカーを1文字寄せた分、ULにマージンを設定*/
    text-indent: -1.45em;
}
ul.Question li.QA_A:before {
    content: 'A：'; /* リストマーカーを「A：」に設定 */
    color: red;
    font-weight: bold;
}
ul.Question li.QA_Q:before {
    content: 'Q：'; /* リストマーカーを「Q：」に設定 */
    color: blue;
    font-weight: bold;
}
li.QA_Q {
    margin-left: -14px; /* 「Q：」だけ1文字分、左に寄せる */
}
</style>

また「content: ‘A：’; 」部分の「A：」を「＊」や「■」などの特殊文字に変更すれば色んな見た目のリストを作ることが出来ます。

以上が「リスト表記で先頭の文字を1行目と揃える方法（CSSで字下げ）」でした。

制作案件では良くあるパターンなので覚えておきましょう。またindentやリストマーカーのテキスト化はQ&A以外でも様々な箇所で使えると思うのでマスターしときましょう。