 |
【中古】1冊ですべて身につくHTML＆CSSとWebデザイン入門講座 /SBクリエイティブ/Mana（単行本） 価格:747円 |
前回はCSSを使用して要素に線を引く方法を紹介しました。
今回はCSSを使用してリストの装飾について紹介したいと思います。
リストの紹介とHTMLでのリストの作成については下リンクの『<ul>タグのセットで使用する<li></li>』を参考にしてください。
リストマーカーを決める『list-style-typeプロパティ』
リストマーカーとは項目の先頭に表示されるマークのことを言います。下画像で一部のマークの種類を紹介するので参考にしてください。
リストマーカーの種類
何も指定していない箇条書きのリストでは黒丸（disc）で、番号が付いてるリストは数字（decimal）で自動で表示されます。
なのでリストを見やすくし、オシャレにするには『list-style-typeプロパティ』で変更することが重要になってきます。
リストマーカーの表示位置を変える『list-style-positionプロパティ』
『list-style-positionプロパティ』では2つの値を使用します。下の画像を見てください。
リストマーカーの位置変更
画像の通り、outsideの値を使用するとリストマーカーが外側にinsideの値を使用するとリストマーカーが内側に指定されます。
このプロパティあまり違いがないように見えますが箱の背景に背景色を使用したり、線を引いたりする時に使用するとリストマーカーの背景色が変わるため、見栄えに関わってきます。
リストマーカーを画像にする『list-style-imageプロパティ』
『list-style-typeプロパティ』で指定して表示されるマークは簡素なものが多いです。デザインをする上でもう少しオシャレなリストマーカーにしたいときは『list-style-imageプロパティ』を使用します。
リストマーカー種類
上画像のようなマークを使用したい場合は下記の通り、使用するマークのurlを指定する必要があります。
また複雑なマークを使用するとコンテンツを邪魔してしますためマークの選択には細心の注意を払いましょう。
リストマーカーをまとめて装飾する『list-styleプロパティ』
「HTML(14)余白を調整について」、「HTML(15)線を引いてみよう」と同様に『list-styleプロパティ』においてもまとめてリストマーカーの値を指定することができます。下に例を表示します。
値の指定方法については好きな順番に値間をスペースで区切って指定します。
また、『list-style-typeプロパティ』と『list-style-imageプロパティ』を両方指定してしまった場合は『list-style-imageプロパティ』が優先されます。
以上がリストの装飾についてです。
次回はこれもまた難しいクラスとIDの使い分けについて紹介したいと思います。
