記事内に商品プロモーションが含まれる場合があります
今回はul・ol・liで作られたリスト（箇条書き）まわりの余白を調整する方法をまとめます。1つずつ図解していくのでHTML・CSS初心者の方もご安心ください。なお、ulでもolでも余白の基本的な調整方法は同じです。この記事は横書き・左から右へ読む文章と、list-style-position:outsideのリストを前提にします。掲載コードと図の文章は、公開当時の例文です。
予備知識
① marginとpaddingについての最低限の知識があった方が理解がスムーズかと思います。
CSSのmarginとは？paddingとは？余白の指定方法まとめ② ul・ol・liの基本
【HTMLで箇条書き】ul・ol・liタグの使い方まとめ1.リスト全体の上下の隙間を調整
ul, ol {
padding-top: 10px; /*リスト上の余白*/
padding-bottom: 10px; /*リスト下の余白*/
}はじめにリストボックスの内側の余白を調整する方法から解説します。分かりやすくするために例ではボーダーと背景色をつけています。
こちらの図の矢印（↕）の部分を変更します。枠をつけたり、背景色を塗ったときの内側の余白ですね。上側の余白にはpadding-top、下側の余白にはpadding-bottomを使います。
例として上下の余白をそれぞれ10pxずつ空けてみます。
<ol>
<li>HTMLとCSSを勉強しよう</li>
<li>HTMLとCSSの基本</li>
<li>WEBデザインを学ぼう</li>
</ol>ol {
padding-top: 10px;
padding-bottom: 10px;
/*背景色などのCSSは省略*/
}
箇条書きの上下にゆとりができました。これだけで随分とゆったりとした印象になりますね。
2. リストの右側の隙間を調整
ul, ol {
padding-right: 10px;
}次にボックス内の右側の余白の指定方法です。この部分は長い箇条書き文が右端で折り返すときの右端の隙間にあたります。
この図では右側のpaddingを指定していないため、文字が枠の右端近くまで詰まっています。ブラウザの既定スタイルやサイトのCSSによって余白は異なります。
この部分はpadding-rightで調整します。例として10pxを指定してみます。
<ol>
<li>サルワカでHTMLとCSSをゼロから勉強しよう</li>
<li>サルワカを使ってHTMLとCSSの基本をゼロから学ぼう</li>
<li>サルワカでWEBデザインをゼロから学ぼう</li>
</ol>ol {
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
/*背景色などのCSSは省略*/
}
より見やすくなりました。この部分も、文字の折り返しや枠との間隔を見て調整するとよいでしょう。
3. 箇条書きボックス内の左側の余白
ul, ol {
padding-left: 30px;
}黒ポチや番号まわりの余白を指定するときは、ulやolのpadding-leftを調整します。
padding-leftで指定するのは図の矢印（↔）の部分です。図中のulという表記は、番号リストの例ではolと読み替えてください。
ここは何も指定していなくてもブラウザが気を利かせてある程度の余白を設定して表示してくれます。旧図は左側に40pxの余白がある環境の例です。ブラウザの既定スタイルではpadding-inline-startなどが使われることもあり、値は環境やリセットCSSによって異なります。
この番号リストの図中もulではなくolの例です。ol {padding-left:0}にすると、outsideの番号が枠の外へ出る場合があります。ulの黒ポチでも同様です。
枠内におさめるためには、余裕をもった値にしておいた方が良いでしょう。例として30pxに指定してみます。
<ol>
<li>サルワカでHTMLとCSSをゼロから勉強しよう</li>
<li>サルワカを使ってHTMLとCSSの基本をゼロから学ぼう</li>
<li>サルワカでWEBデザインをゼロから学ぼう</li>
</ol>ol {
padding-left: 30px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
/*↑padding: 10px 10px 10px 30pxと
まとめて書くこともできますね。*/
/*背景色などのCSSは省略*/
}
↑Beforeは公開当時に左側40pxで表示された例です。この図では30pxへ変更したため、左端との隙間が狭くなっています。
4. 箇条書きのインデントを変える
インデントとは？
インデントは字下げのことです。この記事では、list-style-position:outsideのリストで、マーカーと本文の間隔を調整する方法を扱います。insideではマーカーの配置と折り返し方が異なります。
折り返した2行目以降も字が後ろに下がることで見やすくなるわけですね。
インデントの調整方法
ul li {
padding-left: 20px;
}インデントの広さはliタグに対してpadding-leftを指定することにより調整できます。ul liはulの子孫にあるliを選択します。olの項目にはol liを使います。直下の項目だけならul > liのように限定できます。実際にやってみましょう（さきほどと例文を変えることにします）。
<ul>
<li>サルワカではHTML・CSS初心者の方向けの解説記事をほぼ毎日更新しています。</li>
<li>サルワカではWEB制作補助サービスも開発しています。</li>
</ul>ul li {
padding-left: 20px;
}
黒ポチと文の間に余裕ができました。olでも、セレクタをol liへ変えて同様に調整できます。
5. 文と文の間隔を調整
ul li {
padding-top: 10px;
padding-bottom: 10px;
}
箇条書きの文どうしの余白を調整するには、liタグに対してpadding-topとpadding-bottomを指定します。
箇条書きの一文（li）の上下に余白が作られるというイメージです。
padding-topはliの上側を、padding-bottomはliの下側の余白を決めます。両方を同じ値にする方法もあります。各liの上下を10pxにすると、隣接する項目間には下10pxと上10pxの合計20pxのpaddingが入ります。paddingは相殺されません。
試しにそれぞれの値を10pxにしてみましょう。
<ul>
<li>サルワカではHTML・CSS初心者の方向けの解説記事をほぼ毎日更新しています。</li>
<li>サルワカではWEB制作補助サービスも開発しています。</li>
</ul>ul li {
padding-top:10px;
padding-bottom:10px;
}
文どうしの間隔が広くなりました。文字サイズや行数に合わせて、項目のまとまりが分かる間隔に調整しましょう。
6. 箇条書きの文どうしの行間を調整する
それぞれ文章の行間を調整したいときは、paddingではなくline-heightを使います。
line-heightについてはこちらの記事が参考になるはずです。
【CSS】line-heightで行間を調整する方法：おすすめの値は？line-heightの初期値はnormalで、フォントなどに応じた行高になります。親要素の指定を継承している場合もあります。例としてliに対してline-height: 2を指定してみましょう。単位なしの2は、各liのfont-sizeの2倍の行高を指定する値です。見える字形の高さが2倍になる意味ではありません。
<ul>
<li>サルワカではHTML・CSS初心者の方向けの解説記事をほぼ毎日更新しています。</li>
<li>サルワカではWEB制作補助サービスも開発しています。</li>
</ul>ul li {
line-height: 2;
}
行間が広くなりました。少し広々としすぎているようにも感じますね。line-height:1.5なども試し、フォントや行の長さに合わせて調整しましょう。
7. ボックス外の余白を指定する
ボックスの外側の余白、言い換えると「前後の要素とのスペース」を指定するときにはulやolに対してmarginを指定します。通常フローでは上下marginが隣接要素や親子間で相殺される場合があるため、指定値が単純に足されるとは限りません。これはdivでもpでもh1〜h6でも同じですね。よく分からないという方はこちらの記事を読んでみてください。