list-style-positionプロパティを設定するとリストのマーカーの位置を変えることができます。liタグを使うときに設定をしますが、
という方がいるでしょう。list-style-positionプロパティを設定するには、リストの記述方法も知る必要があります。
そこで今回は、list-style-positionプロパティの
・リストの作成に必要なタグ
について説明していきます。
目次
list-style-positionプロパティとは
list-style-positionプロパティの読み方
list-style-positionの読み方は、「リスト-スタイル-ポジション」です。
リストを作成したときに使える設定です。
list-style-positionプロパティの説明
list-style-positionプロパティは、
際に使います。
list-style-positionプロパティの値によって、マーカーの位置が決まります。
ですが、マーカーを表示させるためのタグなど、list-style-positionプロパティを設定するために必要な要素がいくつかあります。
list-style-positionプロパティで利用できる値
list-style-positionプロパティでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| inside | insideを指定するとマーカーをリスト領域の内側に表示できます。 |
| outside | outsideは、マーカーをリスト領域の外側に表示させたいときに指定する値です。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
list-style-positionプロパティの基本的な使い方
list-style-positionプロパティの使い方
リストのマーカーの位置を調整するlist-style-positionプロパティの使い方が分かるように、コードを以下に記述していきます。
See the Pen
list-style-positionプロパティの使い方 by 吉井大輝 (@DaiW)
on CodePen.
上記のlist-style-positionプロパティの値は、outsideを指定しています。
outsideによって、箇条書きの文章の外側にマーカーが配置されます。
リストを作成するためのタグ
リストを作成するために以下のタグを使います。
・olタグ：liタグを囲うときに使うタグで、マーカーを番号にできます。
・liタグ：リストとなる項目を記述するときに使います。
リストの記述は以下の2通りあります。
|
1 2 3 4 5 6 |
<ul> <li></li> <li></li> <li></li> <li></li> </ul> |
|
1 2 3 4 5 6 |
<ol> <li></li> <li></li> <li></li> <li></li> </ol> |
HTMLで上記の記述がなければ、リストやマーカー自体もないため、list-style-positionプロパティを使うことができません。
list-style-positionプロパティの設定をする場合、まずHTMLにリストに必要なタグを書き忘れることがないようにしましょう。
list-style-positionプロパティを設定するところ
list-style-positionプロパティの設定は、以下のようにulタグに対して行うことで、効果が反映されます。
|
1 2 3 |
ul{ list-style-position: outside; } |
ですが、olタグやliタグにlist-style-positionプロパティを設定しても同様に反映されます。
設定先は、コーディングする側や仕様などで変わってきます。
つまり、状況に合わせて設定先を決めるということです。
list-style-positionプロパティでリストのマーカーを内側にする
list-style-positionプロパティでリストのマーカーを内側にするコード
リストのマーカーを内側にするとどうなるのか、実際に見ていきましょう。
See the Pen
list-style-positionプロパティでリストのマーカーを内側にするコード by 吉井大輝 (@DaiW)
on CodePen.
リストのマーカーが外側の場合は、改行した文章よりマーカーが外にありました。
ですが、リストのマーカーを内側にする値、insideを指定するとマーカーと改行した文章の頭の位置が同じになります。
リストのマーカーを番号にする
リストのマーカーを番号にしたコードが以下になります。
See the Pen
リストのマーカーを番号にする by 吉井大輝 (@DaiW)
on CodePen.
「リストを作成するためのタグ」で説明した通り、ulタグをolタグにすることで、マーカーを番号にできます。
list-style-positionプロパティで設定する位置だけでなく、番号や中点などマーカーの種類によってリストの見やすさが違います。
list-style-positionプロパティを使う際、気を付けてみてください。
まとめ
いかがでしたでしょうか？
今回、list-style-positionプロパティでマーカーの位置を調整する方法やリストの作成で必要になるタグについてご紹介しました。
実際にlist-style-positionプロパティを使ったコードを記述しているので、参考にすれば設定することができるでしょう。
リストに関して勉強している方のためになれば幸いです。
参考文献：MDN web docs｜ list-style-position プロパティ: リストアイテムに対する ::marker の位置を指定します。
