HTMLの箇条書き(ul・liタグ)の行間・インデントを調整する方法!

HTMLの箇条書きのインデントや行間・余白の調整方法をサンプルコードを交えて紹介していきます。調整するべき余白の種類が多い箇条書きについてぜひ余白の調整方法をマスターしましょう!

コンテンツ [表示]

  1. 1HTMLの箇条書き(ul・liタグ)の行間・インデントを調整したい
  2. 2HTMLの箇条書き(ul・liタグ)のインデントを調整する方法
  3. 3HTMLの箇条書き(ul・liタグ)の余白を調整する方法
  4. 3.1箇条書きの「●」の左側の余白
  5. 3.2箇条書きのアイテム間の余白の調整
  6. 3.3箇条書きの行間の調整
  7. 4まとめ

HTMLの箇条書き(ul・liタグ)の行間・インデントを調整したい

HTMLで箇条書きを表示させるulタグliタグですが、その余白の調整や行間・インデントの調整をして揃えたいときがあります。

箇条書きの余白
例えば、箇条書きの1行目と2行目の余白、「●」とテキスト間の余白、左側の余白など箇条書きでは考慮すべき余白の数が多く、その分調整が必要なCSSのプロパティの種類も複数あります。

今回はHTMLの箇条書きの余白の調整方法について紹介していきます。

HTMLの箇条書き(ul・liタグ)のインデントを調整する方法

まずは箇条書きのインデントを調整してきます。段落などのテキストのインデントの調整方法(text-indentを使う場合)とは少し異なります。

箇条書きのインデント
ちなみに今回箇条書きのインデントは「●」からテキストまでの字下げ部分の余白として調整していきます。

箇条書きのインデントを調整するにはCSSの内部的な余白を調整することができるpaddingを使っていきます。

箇条書きのアイテムのliに対して左側のpaddingであるpadding-leftを設定しています。すると「●」とテキスト部分までの余白が調整することが出来ます。

このようにliタグに対してのpaddingで箇条書きのインデントを調整していきます。

HTMLの箇条書き(ul・liタグ)の余白を調整する方法

それではインデント以外のulliタグでよく出てくる余白の調整方法を紹介していきます。

箇条書きの「●」の左側の余白

箇条書きの「●」の左側の余白
箇条書きの「●」の左側の余白はこちらの図の余白のことです。

上記の余白を調整するにはpaddingulタグ自体に左側の余白をつけるようにします。

上記例ではulタグの左側に60pxの余白をもうけています。

箇条書きのアイテム間の余白の調整

箇条書きのアイテム間の余白
箇条書きのアイテム間の余白とは、こちらの図の余白のことです。箇条書きのアイテム間の間隔を調整してきます。

アイテム間の間隔の調整にはliタグに対して上下の余白を設けます。

上記の例ではliタグの上下にそれぞれ20pxの余白を入れています。このようにliタグに対しての上下の余白調整でアイテム間の間隔調整をしていきましょう。

箇条書きの行間の調整

最後は箇条書きの行間の調整です。

箇条書きの行間
箇条書きの行間は1つのアイテムが複数行の場合の行の間の隙間の余白です。(箇条書きのアイテム自体の余白とは別)

行間の隙間の余白調整は、通常のテキストと同じくline-heightを利用します。

あわせて読みたい
line-height
CSSのline-heightプロパティは行ボックスの高さ、つまり1行あたりの高さを設定するプロパティです。line-heightプロパティの使い方についてサンプルコード付きで解説します。

まとめ

いかがでしたでしょうか。箇条書きでは調整すべき余白の種類が多く「どのタグに適用するのか?」「marginだっけ?paddingだっけ」となる事が初心者のなれないうちは多いです。

ぜひ今回の記事を参考に箇条書きののインデント・余白の調整をしていきましょう!

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次