[CSS]リスト要素を左寄せぴったりに配置するスタイルシートのテクニック

中黒のような黒丸、四角、数字など、リストの先頭につくマークを左寄せに揃えるスタイルシートのテクニックを紹介します。

対応ブラウザはIE8+で、ネガティブマージンは使用しません。

Align Lists Flush Left

ブラウザごとに異なるサイズのマークでも、数字のリストで1桁から2, 3桁と増えても全てに対応できるテクニックです。

まずは、マークアップから。

HTML

ulもolもシンプルな実装です。

<h3>Unordered List</h3>
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
</ul>
<h3>Single Digit List</h3>
<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
</ol>

リストのアイテムが少なければチカラ技で対応できますが、ここで紹介するテクニックは違います。

左：デフォルト、右：左寄せ

左寄せしている方は、ブルーの矩形にテキストもリストもツラが揃っています。

まずは、ulのスタイルから。

CSS

ビュレットは一旦「none」で非表示にし、「display:table;」で左寄せに配置し、ビュレットは「content: "•";」で配置します。

.ul_flush {
  list-style: none;
  padding-left: 0;
  display: table;
}
.ul_flush li:after {
  content: "";
  display: block;
  margin-bottom: 0.5em;
}

.ul_flush li {
  display: table-row;
}
.ul_flush li:before {
  content: "•";
  display: table-cell;
  padding-right: 0.4em;
}

li {
  margin-bottom: 0.5em;
}

この方法だと、数字が1桁から3桁と増えても対応できます。

左：デフォルト、右：左寄せ

デフォルトは1-9の1桁をいい感じにすると、2桁からはみ出し気味になります。

左：デフォルト、右：左寄せ

デフォルトは、3桁になると完全にはみ出します。

CSS

ol要素の数字を再表示するには、「content: counter(table-ol) ".";」を使用します。
数字も左に揃えたい場合は「text-align: right;」を削除します。

.ol_flush {
  list-style: none;
  padding-left: 0;
  display: table;
}
.ol_flush li:after {
  content: "";
  display: block;
  margin-bottom: 0.5em;
}

.ol_flush li {
  display: table-row;
  counter-increment: table-ol;
}
.ol_flush li:before {
  content: counter(table-ol) ".";
  display: table-cell;
  padding-right: 0.4em;
  text-align: right;
}

li {
  margin-bottom: 0.5em;
}

実際の動作は下記ページで確認できます。

デモページ

参考までに、ul要素のみ限定でネガティブなインデントを使う方法は下記のように実装します。

Taming Lists

CSS

ul {
 list-style: none;
 margin-left: 0;
 padding-left: 1em;
 text-indent: -1em;
 }