要点を分かりやすく列挙する場合など、リストはWebサイトでよく使われるHTML要素です。
そして、CSSではリストに関するプロパティが用意されています。
今回は、リスト用のCSSプロパティをまとめたいと思います。
また、displayプロパティでも、リストのような表示を指定することができます。
displayプロパティでリストを作成する際の指定方法等については、CSS【 display 】2 ~ list-itemをご覧下さい。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
リスト用のCSSプロパティは、次の通りです。
list-style-type | リストマークの種類を指定 値:disc(デフォルト)、none、circle、square、decimal、lower-roman、upper-roman、他 (list-style-imageを指定する場合は無効) |
---|---|
list-style-position | リストマークの位置を指定 outside(デフォルト)、inside、hanging |
list-style-image | リストマークに画像を指定 値:none(デフォルト)、url(“画像ファイルのURL”) |
list-style | ショートハンドプロパティ 複数の値を半角スペースで区切ってまとめて指定(順不同) |
list-style-typeプロパティは、リストマークの種類を指定する際に使用するプロパティです。
li要素について、li { list-style-type : 値 } のように指定します。
list-style-typeプロパティで値を指定すると、次のようなリストマークが付きます。
none |
|
---|---|
disc |
|
circle |
|
square |
|
decimal |
|
decimal-leading-zero |
|
lower-roman |
|
upper-roman |
|
lower-greek |
|
lower-latin |
|
lower-alpha |
|
upper-latin |
|
upper-alpha |
|
hebrew |
|
armenian |
|
georgian |
|
cjk-ideographic |
|
cjk-earthly-branch |
|
cjk-heavenly-stem |
|
hiragana |
|
hiragana-iroha |
|
katakana |
|
katakana-iroha |
|
数字、アルファベット、あいうえお等のリストマークは、もともとol要素(番号付きリスト)のためのものですが、ul要素内のli要素でも指定できます。
但し、ol要素特有のstart属性やreversed属性などは、ul要素では使用できません。
list-style-positionプロパティは、リストマークの位置を指定する際に使用するプロパティです。
list-style-positionプロパティは、次の通り外側か内側かで指定します。
outside | リストマークを、li要素のボックスの左端より外側に配置(デフォルト) |
---|---|
inside | リストマークを、li要素のボックスの左端より内側に配置 |
外側と内側の違いは、次の通りです。
ソースは次の通りです。
(CSS)
ul#sample {
border:solid 1px #ccc;
padding:0;
margin:0}
ul#sample li {
padding:0;
background:#EEE;
margin:1em 1em 1em 2em}
ul#sample li:nth-child(2) {list-style-position:inside}
(HTML)
<ul id="sample">
<li>outside
<li>inside
</ul>
比較しやすいように、li要素の背景に色を付けています。
insideは、リストマークがli要素のボックス(色付け部分)の内側に表示され、outsideは、外側に表示されます。
list-style-imageプロパティは、画像をリストマークに指定できるプロパティです。
list-style-imageプロパティの値は、次の通りです。
none | 画像無し(デフォルト) |
---|---|
URL | 画像ファイルのURLを指定 |
画像がある場合とない場合を並べると、次のようになります。
ソースは次の通りです。
(CSS)
ul#sample {
border:solid 1px #ccc;
padding:0;
margin:0}
ul#sample li {
padding:0;
margin:1em;
list-style-type:circle;
list-style-position:inside}
ul#sample li:nth-child(2) {
list-style-image: url("img/mark.jpg")}
(HTML)
<ul id="sample">
<li>画像なし
<li>画像あり
</ul>
li要素全体に、list-style-typeプロパティで白丸のリストマークを指定していますが(list-style-type:circle;)、list-style-imageプロパティの指定がある場合は、そちらが優先されます。
INTERNOUS,inc. All rights reserved.