CSS
スタイルをリストする

構文

• リストスタイル：リストスタイル|リストスタイルの位置|リストスタイルのイメージ|最初の|継承する;

パラメーター

備考

箇条書きまたは段落番号の種類

順序付けられていないリスト（ <ul> ）内の<li>タグに固有：

list-style: disc;                /* A filled circle (default) */
list-style: circle;              /* A hollow circle */
list-style: square;              /* A filled square */
list-style: '-';                 /* any string */

順序付きリスト（ <ol> ）内の<li>タグ固有：

list-style: decimal;             /* Decimal numbers beginning with 1 (default) */
list-style: decimal-leading-zero;/* Decimal numbers padded by initial zeros (01, 02, 03, … 10) */
list-style: lower-roman;         /* Lowercase roman numerals (i., ii., iii., iv., ...) */
list-style: upper-roman;         /* Uppercase roman numerals (I., II., III., IV., ...) */
list-style-type: lower-greek;    /* Lowercase roman letters (α., β., γ., δ., ...) */
list-style-type: lower-alpha;    /* Lowercase letters (a., b., c., d., ...) */
list-style-type: lower-latin;    /* Lowercase letters (a., b., c., d., ...) */
list-style-type: upper-alpha;    /* Uppercase letters (A., B., C., D., ...) */
list-style-type: upper-latin;    /* Uppercase letters (A., B., C., D., ...) */

非特定：

list-style: none;                /* No visible list marker */
list-style: inherit;             /* Inherits from parent */

弾丸の位置

リストは<li>含まれる要素（ <ul>または<ol> ）内の要素で構成されます。リストアイテムとコンテナの両方には、ドキュメント内のリストアイテムコンテンツの正確な位置に影響を与える余白とパディングがあります。マージンとパディングのデフォルト値は、ブラウザごとに異なる場合があります。クロスブラウザと同じレイアウトを得るためには、これらを具体的に設定する必要があります。

各リスト項目は、マーカーマーカーを含む 'マーカーボックス'を取得します。このボックスは、リストアイテムボックスの内側または外側に配置できます。

list-style-position: inside;

<li>要素内に箇条書きを配置し、コンテンツを必要に応じて右に押します。

list-style-position: outside;

<li>要素の左に箇条書きを置きます。包含要素のパディングに十分なスペースがない場合、マーカボックスはページからはみ出しても左に伸びます。

insideとoutside結果を表示する： jsfiddle

箇条書き/番号の削除

場合によっては、リストには箇条書きや数字は表示されません。その場合は、マージンとパディングを必ず指定してください。

<ul>
    <li>first item</li>
    <li>second item</li>
</ul>

CSS

ul {
    list-style-type: none;
}
li {
    margin: 0;
    padding: 0;
}