list-styleまとめ

list-styleについて。
①ナビゲーションなどを作るときにはlist-style-type:none;を使用することで、行頭文字を消すことが出来ます。
②コンテンツを要約して、表示することでユーザーに記事の内容を的確に伝える役目もあります。また、検索エンジンに対してもサイト内の重要な項目であると伝える効果もあります。




行頭番号を白丸に設定

行頭番号を白丸に設定

値	機能
none	指定なし。ナビゲーションを作るときに使用することが多い。
disk	●にする。
circle	○にする。
aquare	■にする。
decimal	アラビア文字にする。
lower-roman	小文字のローマ数字にする。
upper-roman	大文字のローマ数字にする。
lower-alpha	小文字のアルファベットにする。
upper-alpha	大文字のアルファベットにする。

list-style-position

リストの行頭番号や記号の位置を指定する
行頭番号を内側か外側のどちらかの設定をすることができます。




行頭番号を内側に設定
行頭番号がリスト内の文章の内側になります。

行頭番号を内側に設定
行頭番号がリスト内の文章の内側になります。

値	機能
outside	行頭番号・記号をリスト文章の外側に表示する。（デフォルト値）何も指定しなければ、これになります。
inside	行頭番号・記号をリスト文章の内側に表示する。

list-style-image

行頭画像にチェックマークを設定してみます。この方法が一番簡単ですが、画像の大きさによっては微妙にずれが発生してしまいます。ずれない行頭画像を作るには下記のページをご覧ください。

ずれないリスト画像を設定する方法





行頭番号にチェックマークの画像を設定
行頭番号にチェックマークの画像を設定

行頭番号にチェックマークの画像を設定
行頭番号にチェックマークの画像を設定

list-styleをまとめて指定する

list-styleの指定をまとめてすることができます。値の間は半角スペースを空ける。
行頭番号（記号）とイメージを同時に指定した場合イメージが優先されます。
下の例ではlist-style-imageとlist-style-positionを同時に指定しています。





行頭番号を内側に設定し
行頭に矢印の画像を設定しました。
行頭番号を内側に設定し
行頭に矢印の画像を設定しました。