In 'n' Out

リストの見た目を整える

ここでは、文字そのものの見た目を整えるためのCSSを扱います。
テキスト装飾系のプロパティは、要素の配置や並びを変えるものではなく、displayで理解した箱の中で、文字をどのように見せるかを調整するためのものです。

なお、これらのプロパティの中には、インライン要素やインラインブロック要素では、見た目に反映されないものがあります。
これはCSSが効いていないのではなく、要素の表示形式による挙動の違いです。
以降のコード例と出力例では、ブロック要素を使って確認します。

リストマーカーの種類

list-style-typeは、リストマーカーの種類を指定するプロパティです。
黒丸・白丸・数字・アルファベットなど、表示される記号を変更できます。

構文

セレクタ{
    list-style-type:値;
}

list-style-typeには複数の値がありますが、ここでは代表的なものを紹介します。

disc

構文

セレクタ{
    list-style-type:disc;
}

discはulのデフォルトの黒丸です。

コード例

<ul class="type-disc">
    <li>discを指定したリスト</li>
</ul>

.type-disc{
    list-style-type: disc;
}

出力例

ulを使用する場合、特別な理由がなければ指定する必要はありませんが、他の値からデフォルトに戻す際に使用します。

circle

構文

セレクタ{
    list-style-type:circle;
}

circleは白丸に変更します。

コード例

<ul class="type-circle">
    <li>circleを指定したリスト</li>
</ul>

.type-circle{
    list-style-type: circle;
}

出力例

デフォルトの黒丸と意図が違うリストにする際に使用します。

square

構文

セレクタ{
    list-style-type:square;
}

squareは黒四角に変更します。

コード例

<ul class="type-square">
    <li>squareを指定したリスト</li>
</ul>

.type-square{
    list-style-type: square;
}

出力例

デフォルトの黒丸では段落感が弱い際に使用します。

decimal

構文

セレクタ{
    list-style-type:decimal;
}

decimalはolのデフォルトの数字に変更します。

コード例

<ul class="type-decimal">
    <li>decimalを指定したリスト</li>
    <li>decimalを指定したリスト</li>
    <li>decimalを指定したリスト</li>
</ul>

.type-decimal{
    list-style-type: decimal;
}

出力例

数字を使う際には意味合い的にolを使う方がいいのですが、順番ではなく項目として数字を使う場合に使用します。
デフォルトでは1から始まります。

lower-alpha

構文

セレクタ{
    list-style-type:lower-alpha;
}

lower-alphaは小文字のアルファベットに変更します。

コード例

<ul class="type-lower-alpha">
    <li>lower-alphaを指定したリスト</li>
    <li>lower-alphaを指定したリスト</li>
    <li>lower-alphaを指定したリスト</li>
</ul>

.type-lower-alpha{
    list-style-type: lower-alpha;
}

出力例

項目としてアルファベットを使う場合に使用します。
なお、デフォルトではaから始まり、大文字にすることはできません。

none

構文

セレクタ{
    list-style-type:none;
}

noneはリストの頭に何も付きません。

コード例

<ul class="type-none">
    <li>noneを指定したリスト</li>
    <li>noneを指定したリスト</li>
</ul>

.type-none{
    list-style-type: none;
}

出力例

一番使用するのがこのnoneです。
また、リストにdisplayを指定すると、マーカーが表示されなくなる場合があります。
これはlist-style-typeをnoneにしたのとは理由が異なります。

このようにリストマーカーには色々な種類がありますが、liの1つ目にdisc、2つ目にnoneなど複数の種類を1つのリストには使用できません。

リストマーカーの位置

list-style-positionは、マーカーをどこに表示するかを指定します。 マーカーを「外側」に出すか、「本文の内側」に含めるかを制御します。

構文

セレクタ{
    list-style-position:値;
}

list-style-positionの値はinsideとoutsideのみです。

outside

構文

セレクタ{
    list-style-position:outside;
}

outsideはリストのデフォルトの位置にマーカーが表示されます。

コード例

<ul class="position-outside">
    <li>outsideの配置<br>
    改行を入れるとマーカーの外側の位置を基準で折り返します。</li>
</ul>

.position-outside{
    list-style-position: outside;
}

出力例

使用する際には指定する意味は特にありません。

inside

構文

セレクタ{
    list-style-position:inside;
}

insideはリストの内側にマーカーが表示されます。

コード例

<ul class="position-inside">
    <li>insideの配置<br>
    改行を入れるとマーカーの内側の位置で折り返します。</li>
</ul>

.position-inside{
    list-style-position: inside;
}

出力例

レイアウト調整が難しくなる場合があるため、リストに長文を使うのには不向きです。
マーカーも本文の一部として扱われるため、行頭が揃わなくなる点に注意が必要です。

リストの省略形（ショートハンド）

list-styleは、マーカーの種類・位置・画像指定をまとめて指定できるプロパティです。

構文

セレクタ{
    list-style:値;
}

list-styleの値にはlist-style-type、list-style-positionの他に、紹介しなかったlist-style-imageを一気に指定できます。

コード例

<ul class="list-style">
    <li>リストの値を複数指定しました</li>
    <li>リストの値を複数指定しました</li>
</ul>

.list-style{
    list-style: square inside;
}

出力例

このようにリストマーカーを四角にして、マーカーの位置を内側に指定できます。
ただし、ショートハンドで複数の値を指定することは少なく、list-style-typeだけを指定する場面が多々あるため、list-styleにtypeだけを指定することが一般的になっています。
list-style-imageを使うと画像をマーカーとして指定できますが、 位置やサイズの調整が難しく、実務では扱いにくい場合があります。
より柔軟に指定したい場合は、セレクタの疑似要素を使った方法がよく用いられます。
この方法については後の「CSSセレクタの使い分け」にて取り扱います。