前回は、文字装飾に関するCSSにつきまして、ご説明いたしました。
文字関連（フォント含む）につきましては、色々な指定方法がございますが、SEOの事を考慮いたしますと、しっかりとテキストで記載をおこない、読みやすいようにCSSでスタイルをおこなうことが良いように思います。
稀にデザインを重視するあまり、画像で見出しなどを作成してあるページを見かけることがありますが、細かなスタイルをCSSでおこなう事で、テキストで記載できるものも、比較的おおくなり、SEOにも有効になる事と思います。
それでは今回はッ、
上記について記載していこうと思います...。
一覧表示、ナビゲーションメニュー、説明手順etc、これらのマークアップに欠かせないul(ol)要素。
また、li要素はとても使い勝手が良い要素で、liは、その子要素としてh1要素やp要素、dl要素など多くの要素を記載することが可能です。
CSSでは、これらのul要素のようにリストを対象とした専用のプロパティがあります。
この専用プロパティをよく理解し、HTMLでマークアップする際は、リストタグを積極的に使用することをおすすめします。
list-style-positionは、リスト項目の行頭記号の表示位置を指定するプロパティになります。
| list-style-position「行頭記号の表示位置」 | |
|---|---|
| 初期値 | outside |
| 指定可能な値 | inside：行頭記号をリスト項目のボックス内の先頭に配置 |
| 指定可能な値 | outside：行頭記号をリスト項目のボックス内の外側に配置 |
| 指定可能な値 | inherit：親要素と同じ値 |
See the Pen
VwYRLrz by masakado (@kadokado354)
on CodePen.
list-style-typeは、リストに対する行頭記号の種類を指定するプロパティになります。
imageプロパティで画像が指定されている場合は、その画像が行頭記号として優先されます。便利なスタイルなので、ぜひ覚えておきましょう。
| list-style-position「行頭記号の種類」 | |
|---|---|
| 初期値 | disc |
| 指定可能な値 | none：行頭記号を消す。 |
| 指定可能な値 | disc：塗りつぶされた丸 |
| 指定可能な値 | circle：腺で書かれた丸 |
| 指定可能な値 | square：四角形 |
| 指定可能な値 | decimal：数字表記 |
| 指定可能な値 | decimal-leading-zero：先頭に0を付けた数字 |
| 指定可能な値 | lower-roman：ローマ数字の小文字 |
| 指定可能な値 | upper-roman：ローマ数字の大文字 |
| 指定可能な値 | lower-latin, lower-alpha：アルファベットの小文字 |
| 指定可能な値 | upper-latin, upper-alpha：アルファベットの大文字 |
| 指定可能な値 | inherit：親要素と同じ値 |
See the Pen GRgeorZ by masakado (@kadokado354) on CodePen.
list-style-imageは、行頭記号として表示させる画像を指定するプロパティです。これは、度々使う機会がありそうなので、しっかりと覚えておくと便利です。
| list-style-image「行頭記号として表示させる画像」 | |
|---|---|
| 初期値 | none |
| 指定可能な値 | none：行頭記号の画像を表示させない。 |
| 指定可能な値 | url()：行頭記号として表示させる画像URLを（）内指定 |
| 指定可能な値 | inherit：親要素と同じ値 |
list-styleは、リスト関連の値をまとめて設定できるプロパティになります。
list-style-position、list-style-type、list-style-imageの各値を半角スペースで区切って指定可能になります。
list-style-typeと、list-style-imageの値をあわせて指定した場合には、list-style-imageが優先されます。
今回は、リスト関連のCSSプロパティについてまとめてみました。
実際の現場では、リセットCSSにlist-style:none;と指定してあるのを良くみかけますが、ページ作成を行ううえで、必ずといってイイほど使うリストタグ、個人的には、list-style:url();で指定をおこなうのが便利でイイと思います。
また、これ以外の方法でli {background-image:;}で指定をおこない、
li {padding-left:〇〇;}で、指定をおこなっているサイトを良くみかけます。
どちらがイイのかは、一概に、どちらということは出来ませんが、CSSソースコードの記載を少しでも、少なく！短く！記載をおこなうのであれば、list-styleで指定したほうが良いように思います...。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
