【CSS】liの点を位置を調整する方法

ul liは箇条書きで使うhtmlタグです。

liごとに自動で点がついています。

「でも、点の位置が気にくわない！少しずらしたい！」

liの点を位置を調整する方法を解説します。

点の色や大きさを変えるにはこちら↓

通常状態のul li

下記はCSSをあてていない状態のul liです。

• テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
• テキスト
• テキスト

<ul>
    <li><span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</span></li>
    <li>テキスト</li>
    <li>テキスト</li>
</ul>

二行になったときどうなるのか確認できるようにわざと長文を入れています。

これをベースに点の位置を動かしてみましょう。

【外側との横位置調整】ulにpadding-left

テキストと点の位置はそのままに、全体的に左右に動かすにはulにpadding-leftを指定します。

• テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
• テキスト
• テキスト

<style>

.example{
    padding-left: 20px;
}
</style>
<ul class="example">
    <li><span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</span></li>
    <li>テキスト</li>
    <li>テキスト</li>
</ul>

ulにはブラウザの初期値としてpadding-left:40pxが入っています。

これは点の分の空間を確保するために指定されています。

padding-leftの値を変えることで左右に動かすことができます。

ただし値を0にすると点が左の要素にかぶったり、隠れて見えなくなってしまいます。

【テキストと点を離す】liにpadding-left

テキストと点を離すにはliにpadding-leftを指定します。

• テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
• テキスト
• テキスト

<style>
.example2 li{
    padding-left: 20px;
}
</style>
<ul class="example2">
    <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
</ul>

点はliの枠の外側にあります。

よってliにpadding-leftを指定することでテキスト位置が左にずれ、テント離れるというわけです。

【テキストと点を縮める】liにtext-indent

テキストと点を縮めるにはliにtext-indentを指定します。

• テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
• テキスト
• テキスト

<style>
.example3 li{
    text-indent: -10px;
}
</style>
<ul class="example3">
    <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
</ul>

先述したpadding-leftでは広げることはできても縮めることはできません。

paddingにはマイナスを指定できないためです。

marginにはマイナスを指定できますが、テキストと点の距離は変わりません。

text-indentは一行目の文字の横位置をずらすCSSです。

プラスの値だと右に、マイナスの値だと左にずれます。

これでテキストを左にずらすことでテキストと点の距離を縮めることができます。

ただし、text-indentは一行目の文字しかずれません。

2行目以降は頭の位置がおかしくなります。

1行で済む場合はこの方法を、2行以上になる場合は後述する「点の位置を自由に指定する方法」にしましょう。

【点を縦にずらす】spanにvertical-align

点を縦にずらしたいときはliのテキストをspanで囲み、そのspanにvertical-alignを指定します。

• テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
• テキスト
• テキスト

<style>
.example4 li{
    line-height: 0.5;
}
.example4 li span{
    vertical-align: -0.5em;
}
</style>
<ul class="example4">
    <li><span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</span></li>
    <li><span>テキスト</span></li>
    <li><span>テキスト</span></li>
</ul>

vertical-alignは文字を縦にずらすCSSです。

しかし、ブロック要素には効かないためテキストをspanで囲み、そのspanにvertical-alignを指定します。

プラスの値だと上に、マイナスの値だと下にずれます。

vertical-alignを指定すると行間が大きく空いてしまいます。

行間を調整するにはline-heightを使います。

vertical-alignの値を打ち消すために小さめの値を指定しましょう。

【点の位置を自由に指定】position:absolute

liのbeforeで点を作り、それをposition:absoluteで位置調整します。

• テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
• テキスト
• テキスト

<style>
.example5 li{
    position: relative;
    list-style: none;
    line-height: 1.5;
}
.example5 li::before{
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    left: -10px;
    top: calc(0.75em - 3px);
}
</style>
<ul class="example5">
    <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
</ul>

::beforeおよび::afterは疑似要素と呼ばれるもので、本来要素の前後にテキストを追加するために使うものです。

これをうまく使うと要素にhtmlタグを追加することなくアイコンのようにすることができます。

上記はbeforeを元の点と同じに見えるようにデザインしています。

もちろんお好みで色や大きさを変えることもできます。

この点を元の点の代わりに設置するというものです。

よって元の点はliまたはulに「list-style:none」を指定して消します。

position:absoluteの使い方はこちらを参照してください。

位置調整はleftとtopで指定します。

topは気を使わないと文字サイズを変えられると位置がずれてしまいます。

topは(line-heightの半分)から(点の高さの半分)を引いた値にしましょう。

【まとめ】liの点を位置を調整する方法

【外側との横位置調整】
ulにpadding-left

【テキストと点を離す】
liにpadding-left

【テキストと点を縮める】
liにtext-indent（1行まで）

【点を縦にずらす】
liのテキストをspanで囲みそれにvertical-align

【点の位置を自由に指定】
beforeで点を作りposition:absoluteで位置調整

以上、liの点を位置を調整する方法でした。