記事内に商品プロモーションが含まれる場合があります
今回はul・ol・liで作られたリスト（箇条書き）まわりの余白を調整する方法をまとめます。1つずつ図解していくのでHTML・CSS初心者の方もご安心ください。なお、ulでもolでも余白の調整方法はまったく同じです。
1.リスト全体の上下の隙間を調整
ul, ol {
padding-top:◯◯;/*リスト上の余白*/
padding-bottom:◯◯;/*リスト下の余白*/
}
はじめにリストボックスの内側の余白を調整する方法から解説します。分かりやすくするために例ではボーダーと背景色をつけています。
こちらの図の矢印（↕）の部分を変更します。枠をつけたり、背景色を塗ったときの内側の余白ですね。上側の余白にはpadding-top、下側の余白にはpadding-bottomを使います。
例として上下の余白をそれぞれ10pxずつ空けてみます。
<ol> <li>HTMLとCSSを勉強しよう</li> <li>HTMLとCSSの基本</li> <li>WEBデザインを学ぼう</li> </ol>CSSコード
ol {
padding-top: 10px;
padding-bottom: 10px
/*背景色などのCSSは省略*/
}
箇条書きの上下にゆとりができました。これだけで随分とゆったりとした印象になりますね。
2. リストの右側の隙間を調整
ul, ol {
padding-right :~;
}
次にボックス内の右側の余白の指定方法です。この部分は長い箇条書き文が右端で折り返すときの右端の隙間にあたります。
CSSの初期設定のままだと文字が枠の右端ギリギリまで詰まってしまっています。
この部分はpadding-rightで調整します。例として10pxを指定してみます。
<ol> <li>サルワカでHTMLとCSSをゼロから勉強しよう</li> <li>サルワカを使ってHTMLとCSSの基本をゼロから学ぼう</li> <li>サルワカでWEBデザインをゼロから学ぼう</li> </ol>CSSコード
ol {
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px
/*背景色などのCSSは省略*/
}
より見やすくなりました。この部分は見落としがちですが、必ず指定しておいた方が良いでしょう。
3. 箇条書きボックス内の左側の余白
ul, ol {
padding-left:~;
}
黒ポチや番号まわりの余白の指定するときはul,ol{padding-left}を使います。
少し分かりづらいのですがpadding-leftで指定するのはこの図の矢印（↔）の部分です。
ここは何も指定していなくてもブラウザが気を利かせてある程度の余白を設定して表示してくれます。たとえばGoogle Chromeでデスクトップサイトを見る場合、CSSに何も書かなくてもpadding-left: 40pxで表示してくれます。
ちなみにul {padding-left:0}とすると、箇条書きの黒ポチや数字が枠からはみ出てしまいます。
枠内におさめるためには、余裕をもった値にしておいた方が良いでしょう。例として30pxに指定してみます。
<ol> <li>サルワカでHTMLとCSSをゼロから勉強しよう</li> <li>サルワカを使ってHTMLとCSSの基本をゼロから学ぼう</li> <li>サルワカでWEBデザインをゼロから学ぼう</li> </ol>CSSコード
ol {
padding-left: 30px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px
/*↑padding: 10px 10px 10px 30pxと
まとめて書くこともできますね。*/
/*背景色などのCSSは省略*/
}
↑BeforeはGoogle Chromeで見た場合です（指定しなくても40px）。それと比べると左端との隙間が狭くなっています。
4. 箇条書きのインデントを変える
インデントとは？
リストの黒ポチや番号から文字までの隙間をインデントと呼びます（字下げと言ったりもします）。
折り返した2行目以降も字が後ろに下がることで見やすくなるわけですね。
インデントの調整方法
ul li {
padding-left :~;
}
インデントの広さはliタグに対してpadding-leftを指定することにより調整できます。。ちなみにliタグのCSSを指定するときは基本的にul li {〜}というような書き方をします。これは「ulタグの中にあるliタグ」という意味の指定ですね。実際にやってみましょう（さきほどと例文を変えることにします）。
<ul> <li>サルワカではHTML・CSS初心者の方向けの解説記事をほぼ毎日更新しています。</li> <li>サルワカではWEB制作補助サービスも開発しています。</li> </ul>CSSコード
ul li {
padding-left: 20px
}
黒ポチと文の間に余裕ができました。インデントの調整方法もulとolで違いはありません。
5. 文と文の間隔を調整
ul li {
padding-top:~;
padding-bottom:~;
}
箇条書きの文どうしの余白を調整するには、liタグに対してpadding-topとpadding-bottomを指定します。
箇条書きの一文（li）の上下に余白が作られるというイメージです。
padding-topはliの上側を、padding-bottomはliの下側の余白を決めます。両方を同じ値にしたほうが全体的にバランスの良くなります。
試しにそれぞれの値を10pxにしてみましょう。
<ul> <li>サルワカではHTML・CSS初心者の方向けの解説記事をほぼ毎日更新しています。</li> <li>サルワカではWEB制作補助サービスも開発しています。</li> </ul>CSSコード
ul li {
padding-top:10px;
padding-bottom:10px;
}
文どうしの間隔が広くなりました。初期設定だとやや見づらいので、ここは指定しておきたいですね。
6. 箇条書きの文どうしの行間を調整する
それぞれ文章の行間を調整したいときは、paddingではなくline-heightを使います。
line-heightについてはこちらの記事が参考になるはずです。
line-heightは初期値では1となっているかと思います。例としてliに対してline-height: 2を指定してみましょう。これは「行の高さを文字の2倍に」という意味の指定になります。
<ul> <li>サルワカではHTML・CSS初心者の方向けの解説記事をほぼ毎日更新しています。</li> <li>サルワカではWEB制作補助サービスも開発しています。</li> </ul>CSSコード
ul li {
line-height: 2
}
行間が広くなりました。少し広々としすぎているようにも感じますね。実際にはline-height:1.5くらいがちょうど良いでしょう。
