CSSスキル - 第5章 Lesson7

リストのアイコンスタイルを変更する方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

リストのアイコンのスタイルを変更する、list-styleプロパティの書き方を、初心者向けに解説しています。



この動画で学べること

・リストのスタイルを変更する方法



リストのスタイルを変更する方法

リストのスタイルを変更する方法を見ていきましょう。
ブラウザの初期状態で、<ul>のリストは順番に意味を持たないので「・」、<ol>は順番に意味をもつので数字が最初につくように設定されています。
その部分のデザインを変更するために使うのは、 list-style-typeというプロパティです。
値にはリストアイコンの種類を入力しますが、どんなものがあるかをご紹介します。






たくさんの種類がありますが、実際に3つのアイコンを試してみたいと思います。

・circleは白抜きの丸
・squareは四角
・noneはリストスタイルなし

では、CSSを書いてみましょう。



ul#listimage {
list-style-type: circle;
}
ol#defalt {
list-style-type: square;
}
ul#background-img {
list-style-type: none;
}



保存してブラウザで見てみましょう。
リストのアイコンが、指定した形に変わりました。