• Facebook
  • Twitter
  • RSS

月別

コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン

2014/06/30

書いた人:
yanoppa!
カテゴリ:
CSS   HTML
25,852 views

CSSでの番号付きリストとかをテキストで作った時の頭揃えの方法を紹介します。インデントがうまくいかない方、ぜひCSSを調整して試してください。

【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で全体を戻す。
意外と使えるので覚えておくと応用が効きますよ!

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

それでわ、よきコーディングライフを~(・ω<)ノシ


この記事を読んだ人はこんな記事も読んでいます

<

>