のはこごと

モノヅクリノハコの中の人の雑記です

【HTMLとCSSの基礎の基礎講座】その21:リストに対するCSS

21日目です。本日の内容は【リストマーク(行頭記号)の設定】です。

HTMLで<ol>や<ul>というのが出てきた事は覚えていますでしょうか?箇条書きする際に使ったり、ナビゲーションに使ったりと用途は様々。

 

list-style-type:値;

この値を色々変えていきます。

disk→●

circle→○

square→■

decimal→1.2.3.

lower-roman→ⅰ.ⅱ.ⅲ.

upper-roman→Ⅰ.Ⅱ.Ⅲ.

lower-alpha→a.b.c.

upper-alpha→A.B.C.

none→非表示

 

この中だと、list-style-type:none;を使う機会が恐らく一番多いかと思います。

実際webサイトを作るようになるとそのあたり「ああぁ!確かに!」ってなるかなぁと。(文章で伝えるの難しい)

では、なんとなく例を見てみましょうか。

img1

これだとA.B.C.表記されれば成功です。

さあ、どうでしょ?

img2

このように表示されました。成功ですね。

 

スタイルは画像にすることも出来ます。

list-style-image:url(相対パス);

これで、リストマーク(●)が指定した画像になります。

また、list-style-positionにして値を指定してあげると、

outside(外側に)

inside(内側に)

出来たりします。

 

箇条書きにする機会って、ブログを書く上でも、webサイトを作る上でも使用するので、しっかり覚えていきましょう。