minablog

hugo/github/wordpress/プログラミング言語/美容/ビジネス/マーケティングなど、ミレニアム世代やZ世代に有益な情報を共有するブログ。

小学生でもわかるHTML/CSSタグ講座 リストマーカー変更編【CSS】

皆さんこんにちは!minablog管理人のみなです。

 

今日は小学生でもわかるHTML/CSSタグ講座として、リストマーカーの変更をするためのCSSの説明をします。

 

実際のウェブページを作るうえでリストタグをつかうことはよくありますし、知っているとワンランク上のデザインも作れるようになります

 

ぜひマスターしましょう。

 

今までの小学生でもわかるHTML/CSSタグ講座シリーズはこちら。

www.mkmkblog.site

 

そして、HTMLのリストタグはこちらからどうぞ。

www.mkmkblog.site

 

目次

 

list-style-type

list-style-typeではリスト先頭(デフォルトは黒点・)を数字にしたりカタカナにしたり、さまざまな表現ができます

f:id:mkmkblog:20191224111905p:plain

 

全タイプのリストに有効

list-style-type: none ;

これは先頭の黒点や数字を消すCSSです。

f:id:mkmkblog:20200113140944p:plain

 

<ul>に有効

list-style-type: disc ;

リスト先頭を点・にします。

一番最初の画像と同様の表示です。

list-style-type: circle ;

リスト先頭を白丸〇にします。

f:id:mkmkblog:20200113141423p:plain

list-style-type: square;

リスト先頭を四角■にします。

f:id:mkmkblog:20200113141753p:plain

 

<ol>に有効

list-style-type: decimal;

リスト先頭を数字1,2,3にします。

f:id:mkmkblog:20200113142845p:plain

list-style-type: decimal-leading-zero;

リスト先頭を01,02,03にします。

f:id:mkmkblog:20200113143527p:plain

list-style-type: lower-roman;

リスト先頭を小文字のローマ数字ⅰ,ⅱ,ⅲにします。

f:id:mkmkblog:20200113144550p:plain

list-style-type: upper-roman;

リスト先頭を大文字のローマ字Ⅰ,Ⅱ,Ⅲにします。

f:id:mkmkblog:20200113151132p:plain

list-style-type: cjk-ideographic;

リスト先頭を漢数字の一,二,三にします。

f:id:mkmkblog:20200113151424p:plain

list-style-type: lower-latin;

 リスト先頭を小文字のアルファベットにします。

リスト先頭を大文字のローマ字Ⅰ,Ⅱ,Ⅲにします。

f:id:mkmkblog:20200113151739p:plain

list-style-type: upper-latin;

リスト先頭を大文字のアルファベットにします。

リスト先頭を大文字のローマ字Ⅰ,Ⅱ,Ⅲにします。

f:id:mkmkblog:20200113151749p:plain

list-style-position

リストマーカーの表示位置を指定する際に使用します。

 

list-style-position: inside;

マーカーがリストの内側に表示され、マーカーとマーカー以外の高さが揃う。

list-style-position: outside;

マーカーがリストの外側に表示され、マーカー以外の部分が字下げされる。

f:id:mkmkblog:20200113152534p:plain

 

list-style-image

list-style-image: 画像url;

リスト先頭に画像を配置することが可能となります

 

一括指定プロパティ

 list-styleには一括指定プロパティがあります。

 

《復習》

一括指定プロパティとは、一つのプロパティに対して複数の値を指定することが可能なプロパティのことです。

 

《書き方》

ul{

    list-style: [type] [position] [image]

   }

 

まとめ

いかがでしたか?

 

リストマーカー変更編としてlist-styleの書き方についてご紹介しました。

 

種類は多くて難しそうに感じますが、簡単に変更できますのでぜひ実践してみてください。

 

リストは状況に応じて適切な書き方をすることでさらに見やすさアップすることができるので、頑張りましょう。

 

今回もお付き合いいただいてありがとうございました。

 

〇今までのタグ講座まとめはこちら

www.mkmkblog.site

 

f:id:mkmkblog:20191226170302j:plain