【CSS】list-styleは何ができるプロパティ？リストマーカーを画像にする方法も解説
Webサイトのメニューリストなどで、HTMLのリストを使うことがあるかと思います。
リストを使うと、先頭に●のリストマーカーが自動でつきますよね。
このマークは、CSSプロパティのlist-styleを使うと変更することができます。
今回は、CSSのlist-styleの使い方を解説していきます。
ぜひ最後まで読んでくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
list-styleを指定するには？
list-styleはリストマーカーを一括で指定できるプロパティです。
具体的には以下のように記述します。
.list {
list-style: square inside;
}list-styleは、以下の3つのCSSプロパティをまとめて指定したものです。
- list-style-type
- list-style-image
- list-style-position
それぞれのプロパティについて、どのようなものなのか解説していきましょう。
list-style-typeについて
list-style-typeは、リストマーカーの種類を指定するプロパティです。
以下に選べるマーカーを一部紹介します。
list-style-type: circle; /* 白丸 */
list-style-type: square; /* 黒四角 */
list-style-type: decimal; /* 数字*/デフォルトのリストマーカーを別のものに変更したいときに使いますね。
list-style-imageについて
list-style-imageは、リストマーカーに画像ファイルを使用したいときに指定するプロパティです。
list-style-image: url("画像のパス");上記のように、url()の中に画像までのパスを書きます。
list-style-typeとlist-style-imageの両方が指定されていた場合、画像が優先され、画像が読み込めないときに、list-style-typeで設定した表示になります。
list-style-positionについて
list-style-positionは、リストマーカーの表示位置を指定するプロパティです。
値はoutsideとinsideの2つのみで、初期値のoutsideでは要素の外側に表示され、insideで内側に表示されます。
list-style-position: inside; /* 要素の内側に表示される */まとめ：CSSのlist-styleを使いこなそう
今回は、CSSのlist-styleを使ったリストマーカーの設定方法を解説してきました。
マーカーに画像ファイルが使えることを知らなかった、という方もいたのではないでしょうか？
ぜひ活用してみてくださいね。今回の記事が参考になれば幸いです。
