【CSS】olとulにはマージンとパディングどっち？リストのデザインに最適なCSS

ヤッホー！
アンドエイチエーのコーディング部です。

皆さん、HTMLの<ul>や<ol>などのリストのデザインをCSSで作るのは少し面倒と感じることはないですか？

私は<ul>や<ol>を使ったリストを作るたびに、いつも混乱します。

• 「どうやってマーカー部分とテキスト部分を分離しようか？」
• 「なぜマーカー部分（ドットや数字）は動かず、テキスト部分だけ動くのか？」
• 「リストに対して使うマージンとパディングの違いが分からない…」

以上のことを、本記事のテーマとして解説します！

<ul>と<ol>に対してのmarginとpadding

<ul>と<ol>は、同じ内容を繰り返す場合に便利です。

これらの、paddingとmarginを変更した場合、以下２つの結果となります。赤く囲った部分に注目してみてください。

See the Pen fixed + sticky by bibomato (@bibomato) on CodePen.

まず、<ul><ol>の初期値として、マーカー部分（ドット部分）は左側にズレて表示されます。

そこで、<ul><ol>の左側に対してmarginを指定すると、<ul><ol>が右側に移動します。ただ、コンテンツ自体は赤枠で囲った部分となり、マーカー部分はそのままくっついてきたような感じとなります。

また、<ul><ol>の左側に対してpaddingを指定すると、<ul><ol>のコンテンツ自体（マーカーとテキスト）そのものが右側に移動します。なので、マーカー部分も一緒に右側に移動した感じになります。

<li>に対してのmarginとpadding

次に、<li>に対してmarginとpaddingを付与してみます。

<li>にmarginやpaddingを付与する場合、先ほどの<ul>タグに対してのmarginとpaddingとは異なる動作となります。

See the Pen fixed + sticky by bibomato (@bibomato) on CodePen.

<li>に対して「margin」を付与した場合は、<ul>に対してpaddingを付与した場合と結果に変更はありません。しかし、<li>に対してpaddingを付与した場合は、下記が画像のように、マーカーとテキストの間にスペースがでてきます。

list-style-position

list-style-positionは、マーカーが<ul>の内側に置くか外側に置くかを変更する便利なCSSプロパティです。
list-style-positionでは、outsideとinsideの指定が可能です。以下違いを見てみましょう。

See the Pen fixed + sticky by bibomato (@bibomato) on CodePen.

list-style-position:insideがあれば、マージンを付与した際の変化と比べると、テキスト部分の挙動が異なります。

なお、長い文書で改行となる場合は、マーカーの直下から行が始まります。

list-style-positionのブラウザ間の違い

ところで、ブラウザによって、マーカーとテキストの間の幅が異なります。また、Chromeの場合、指定しているマージンの3倍になるバグもあるため、注意が必要ですね。

主に、下記のようなズレがあります。

まとめ

フロントエンドにおけるリストのスタイル付与は、コーダーとユーザーエクスペリエンスにとって重要な要素です。リストをより深く理解し、コーディングに取り入れていただければ幸いです。

それではまた！