リスト関連のCSSプロパティ「CSS実践編：CSSの基本step.8」

前回は、文字装飾に関するCSSにつきまして、ご説明いたしました。

文字関連（フォント含む）につきましては、
色々な指定方法がございますが、SEOの事を考慮いたしますと、
しっかりとテキストで記載をおこない、読みやすいようにCSSでスタイルを
おこなうことが良いように思います。

稀にデザインを重視するあまり、画像で見出しなどを作成してあるページを
見かけることがありますが、細かなスタイルをCSSでおこなう事で、
テキストで記載できるものも、比較的おおくなり、SEOにも有効になる事と思います。

それでは今回はッ、

上記について、記載していきます…。

一覧表示、ナビゲーションメニュー、説明手順etc、
これらのマークアップに欠かせないul(ol)要素。

また、li要素はとても使い勝手が良い要素で、liは、その子要素としてh1要素やp要素、
dl要素など多くの要素を記載することが可能です。

CSSでは、これらのul要素のようにリストを対象とした専用のプロパティがあります。
この専用プロパティをよく理解し、HTMLでマークアップする際は、
リストタグを積極的に使用することをおすすめします。

list-style-positionは、リスト項目の行頭記号の表示位置を指定するプロパティになります。

See the Pen
VwYRLrz by masakado (@kadokado354)
on CodePen.

list-style-typeは、リストに対する行頭記号の種類を指定するプロパティになります。

imageプロパティで画像が指定されている場合は、その画像が行頭記号として優先されます。
便利なスタイルなので、ぜひ覚えておきましょう。

See the Pen
GRgeorZ by masakado (@kadokado354)
on CodePen.

list-style-imageは、行頭記号として表示させる画像を指定するプロパティです。
これは、度々使う機会がありそうなので、しっかりと覚えておくと便利です。

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で指定したほうが良いように思います…。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。