自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。基本インドアです!InstagramTwitterContactサーバーとドメインの同時取得で.jpが無料シュウ今回は、「【CSS】list-styleプロパティについて!」の講座になります。こんな方に読んでほしいCSSを学び始めた方へリストに対してCSSをどのように記述方法が分からない方へlist-styleプロパティについて初めて学ぶ方へ今回は「ul、ol、liタグ」に対してlist-styleプロパティを適応させる解説になります。[記事の内容]list-styleプロパティについてlist-style-typeでマーカーの表示を変える方法についてulリストで使える「list-style-type」についてolリストで使える「list-style-type」についてマーカーを消す方法「list-style-type」についてlist-style-positionでマーカーの位置を指定する方法についてoutsideでマーカーを外側に表示させる方法insideでマーカーを内側に表示させる方法list-style-imageでマーカーの画像を指定する方法についてlist-styleでショートハンドで記述する方法についてまとめlist-styleプロパティについてlist-styleプロパティについて簡単にご説明いたします。list-styleプロパティlist-style-typeリスト項目のマーカーの表示を変える方法list-style-positionリスト項目のマーカーの位置を指定する方法list-style-imageリスト項目のマーカーの画像を指定する方法list-styleリスト項目のマーカーをまとめて指定する方法list-style-typeでマーカーの表示を変える方法についてulの黒丸、olの番号付きリストの表示を変更することは可能です。その際にはCSSlist-style-typeを使用します。表示できるマーカーはブラウザによって異なります。HTMLファイル<ul><li>HTML</li><li>CSS</li><li>jQuery</li><li>PHP</li></ul>ulリストで使える「list-style-type」についてdiscを指定したリスト(デフォルト)になります。ulとliの箇条書きではこの黒丸が初期値です。disc;}circleを指定したリスト(白丸)になります。circle;}squareを指定したリスト(黒い四角)になります。none;}list-style-typeについてlist-style-typeはマーカーの表示を変えるプロパティーと覚えておきましょう。マーカーの種類が多いですがSEOには関係ありません。マーカーを消す際にはnoneを使用します。list-style-positionでマーカーの位置を指定する方法についてlist-style-positionプロパティでは、リスト項目のマーカーの位置を指定します。外側、内側の指定がおこなえます。#f1f1f1;}list-style-typeについてlist-style-positionはマーカーの位置を変えるプロパティーと覚えておきましょう。outside(初期値)は外側の指定になります。insideは内側の指定になります。list-style-imageでマーカーの画像を指定する方法についてlist-style-imageプロパティでは、リスト項目のマーカーの画像を指定します。noneが初期値(画像を表示しない)になっておりますので、今回はnoneは紹介いたしません。擬似クラス「上からn番目の要素にスタイルを適用する方法」:nth-child(番号)でも可能です。【CSS】初心者向け擬似要素、擬似クラスについて理解しましょう!【CSS】初心者向け擬似要素、擬似クラスについて解説しております。現場でよく使用されるbefore、afterなどの計11個の紹介しております、これをマスターすれば現場で問題ないでしょう。url(画像パス);}list-style-imageについてlist-style-imageはマーカーの画像を変えるプロパティーと覚えておきましょう。url画像パスを間違えないように入力しましょう。liタグに各クラス名や擬似クラスを指定し違う画像も入れることもできます。list-styleでショートハンドで記述する方法についてlist-styleプロパティではリスト項目をまとめて指定ができます。値を指定するに際には半角スペースで区切り、type、position、imageの順で指定をおこないます。url(画像パス);}list-styleについてlist-styleはマーカーのショートハンドプロパティーと覚えておきましょう。list-styleはマーカーのリスト項目をまとめて指定できます。値を指定するに際には半角スペースを忘れないようにしましょう。type、position、imageの順で指定をおこないます。前回の記事はHTMLについて解説しております。「【HTML】ul、ol、liタグの使い方について!初心者の向け講座」をご確認ください。【HTML】ul、ol、liタグの使い方について!記事を書いております。初心者の向けに分かりやすく、ul、ol要素の違いや入れ子にする方法、改行のしたかについて書いております。ここではHTMLの記述の仕方について学びましょう。まとめ今回はこれで以上です。前回の記事と合わせて読んでもらえるとさらに理解が深まるとおもいます。POINTlist-style-typeはマーカーの表示を変えるプロパティーと覚えておきましょう。list-style-positionはマーカーの位置を変えるプロパティーと覚えておきましょう。list-style-imageはマーカーの画像を変えるプロパティーと覚えておきましょう。list-styleはマーカーのショートハンドプロパティーと覚えておきましょう。list-styleはマーカーのリスト項目をまとめて指定できます。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。