リストのやりかた

list-style

リストマーカーの 「種類」、「位置」、「画像] を一括指定するプロパティです。
それぞれの値は半角スペースで区切って記述します。

リストマーカーの種類指定

ul{ list-style-type : マーカー種類; }

初期値は黒丸になります。

circle 白丸　square 黒四角

外部リンク参考サイトさんリストマーカー種類 リストマーカー表示位置 外側か内側

ul{ list-style-position : outsideまたは、inside; }

外部リンク参考サイトさんリストマーカー位置について

マーカーなし（CSSでの指定）

ul { list-style-type: none; }

数字のマーカー（olタグ）

数字のマーカーの場合、HTMLで[ulタグ]の代わりに[olタグ]を使う。

項目名は<li>、</li>で囲むことは同じ。　<ol>　　</ol>

マーカー「白丸」または「黒四角」

<UL type="circleまたは、square"></UL>

HTMLでULにtype属性を使う。　外部リンク参考サイトさん HTMLでのマーカーの種類

太字にする { font-weight: bold; }
　外部リンク参考サイトさん HTMLでのマーカーの種類

サンプル
<UL>
<li>リスト１</li>
<UL>
<li>リスト1-1</li>
<li> リスト1-2</li>
</UL>
<li> リスト2</li>
<UL>
<li>リスト2-1 </li>
<li>リスト2-2 </li>
</UL>
</UL>
表示

• リスト１
• リスト1-1
• リスト1-2
• リスト2
• リスト2-1
• リスト2-2

下の余白　 li {margin-bottom:数値 px;}

右横の余白　 li {margin-right: 数値px;}

リスト間隔は子孫セレクタを使い、ulの中にあるliに適用する。
liの前に半角スペースを入れる。

・CSS側

ul.クラス名 li{ }

・HTML側

<ul class="クラス名">

li要素にプロパティをdisplayにして、値をinlineにする

li {display: inline;}

項目の間隔を広げたい場合は、水平方向のマージンを設定します。
（主に右方向） li {display: inline;margin-right: 　px;}

htmlには、classなどでulに付ける。