【CSS】番号付きリストとかをテキストで作った時の頭揃えの方法

おはこんばんちわ、やのっぱです(´・ω・｀)

ulやolでリストを作った時、list-styleだと具合が悪いことありますよね。

そんな時は、画像をbackgroundで表示して。。。って方法をよく使うのですが、

今回はテキストとして打った時、改行された文字の頭を文頭に揃える方法をやってみます。

まずはHTMLを用意！

<div class="listTest">
<ul>
	<li>&spades;サンプルテキストサンプルテキストサンプルテキスト</li>
	<li>&clubs;サンプルテキストサンプルテキストサンプルテキスト</li>
	<li>&hearts;サンプルテキストサンプルテキストサンプルテキスト</li>
	<li>&diams;サンプルテキストサンプルテキストサンプルテキスト</li>
</ul>
</div>

CSSはこんなかんじにしておきます。

<style>
*{
  margin:0;
  padding:0;
}
.listTest {
  width:200px;
  padding:8px;
  background:#DDF8E3;
  border:1px solid #225012;
}
.listTest ul {
  list-style:none;
}
.listTest ul li {
  margin-bottom:8px;
}

</style>

表示はこんなかんじです。

テキストで入力するとこのように改行された次のテキストの頭が文頭に揃ってません。

これをたった二行CSSを書くことで解決します。

<style>
*{
  margin:0;
  padding:0;
}
.listTest {
  width:200px;
  padding:8px;
  background:#DDF8E3;
  border:1px solid #225012;
}
.listTest ul {
  list-style:none;
}
.listTest ul li {
  margin-bottom:8px;
  /*ここから追加*/
  text-indent:-1em;
  padding-left:1em;
}
</style>

するとこんなふうに揃ってきます。

text-indentをフォントサイズ分マイナスにして、paddingで全体を戻す。
意外と使えるので覚えておくと応用が効きますよ！

画像を置いた時もこれでリストっぽくすることができます！

それでわ、よきコーディングライフを～(・ω<)ﾉｼ