【list-style-position】の使い方
リストマークの位置も外部CSSで指定することで、HTMLソースがスッキリして、SEO内部対策として検索エンジン最適化に有効です。
SEO初心者でも簡単に検索エンジン上位表示ができるようにHTMLとCSSのソースサンプルを幾つかご紹介しますので、アクセスアップにお役立て下さい。
【list-style-position】の書式
list-style-position: 値;
- リストマークの位置を指定する時は、キーワードで指定する。
※実際の表示や見え方は、ブラウザや使用環境に依存します。
また、SEO対策に不要と思われる値やキーワードは、独断で掲載していませんので予めご了承下さい。
【list-style-position】のキーワード（値）
| キーワード名（値） | 見え方 |
|---|---|
| outside | リスト項目の表示外に表示（デフォルト） |
| inside | リスト項目の表示内に表示 |
【list-style-position】の使用例
「セレクタ名」と「値」は、お好みで指定して下さい。
リストマークの位置を<ul>で「inside」に指定
▼ 表示
▼ HTML
<ul class="sample01"> <li>リストマークの位置は、キーワードで指定します。リストマークの位置も外部CSS指定すると、アクセスアップに役立ちます。</li> </ul>
▼ CSS
.sample01 {
list-style-position: inside;
}
リストマークの位置を<ol>で「inside」に指定
▼ 表示
▼ HTML
<ol class="sample02"> <li>リストマークの位置は、キーワードで指定します。リストマークの位置も外部CSS指定すると、アクセスアップに役立ちます。</li> </ol>
▼ CSS
.sample02 {
list-style-position: inside;
}