トップページ > サイト作成 > スタイルシート（CSS）の基本とプロパティの一覧 > スタイルシート（CSS）でリストタグを装飾する方法
スタイルシート（CSS）でリストタグを装飾する方法
[初回公開] 2013年05月22日
スタイルシート（CSS）はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中からリストタグの形式や配置を設定する使い方と実際に指定するプロパティを紹介する。
このページの目次
1. スタイルシート（CSS）でリストタグを装飾するメリット
スタイルシート（CSS）でリストタグに対して形式や配置を変えて装飾するメリットとしては、箇条書きの内容が分かりやすくなる。
例えば複数の項目を文章で書くよりも・などを用いて箇条書きにすると項目が分かれていることが把握しやすくなり、・の代わりに数字にすると項目がいくつあるのかも分かりやすくなる。
また、検索エンジン向けの対策（SEO）においても CSS で見た目は項番が振られていても内容には項番が反映されないので純粋に項目として取り扱われてインデックスされやすくなる。
2. スタイルシートのリストタグに関するプロパティ
スタイルシートのリストに関するプロパティは、形式と配置、そして画像の 3 つが用意されている。
2-1. リストタグの形式を変える（list-style-type）
スタイルシートでリストタグの形式を変えたい場合はプロパティ「list-style-type」を次のように利用する。
{形式} には disc といった表示内容を指定する他、none にすると・などリストのマークを非表示にすることができる。
list-style-type : {形式}
- disc ： 黒まる
- circle ： 白まる
- square ： 四角
- decimal ： 数字
- lower-roman ： ローマ数字小文字
- upper-roman ： ローマ数字大文字
- lower-alpha ： アルファベット小文字
- upper-alpha ： アルファベット大文字
- none ： マークなし
2-2. リストタグの配置を変える（list-style-position）
スタイルシートでリストタグの配置を変えたい場合はプロパティ「list-style-position」を次のように利用する。
{配置} には inside か outside の 2 種類から選択する。
list-style-type : {配置}
- inside ： リストの2行目以降を上げる
- outside ： リストの2行目以降を揃える
2-3. リストタグに画像を利用する（list-style-image）
スタイルシートでリストタグに画像を用いたい場合はプロパティ「list-style-image」を次のように利用する。
{画像パス} にはサーバにアップロードされている画像の位置を指定する。
list-style-image : url("{画像へのパス}")
関連記事
ウェブサイト作成
スタイルシート（CSS）はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中から余白や回り込みなどレイアウト設定する使い方と実際に指定するプロパティを紹介する。
ウェブサイト作成
スタイルシート（CSS）はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中から枠線の色や太さを設定する使い方と実際に指定するプロパティを紹介する。
ウェブサイト作成
スタイルシート（CSS）はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中から文字色やフォントを設定する使い方と実際に指定するプロパティを紹介する。
ウェブサイト作成
スタイルシート（CSS）はウェブサイトの装飾やレイアウトの位置付けに利用されるプログラムの一種で、その CSS でデザイン可能な中から背景色や背景画像を設定する使い方とを実際に指定するプロパティを紹介する。
Google のインデックスデータを利用してサイト内検索を設置する方法
ウェブサイト作成
サイト内検索でGoogleのサービスを利用する方法について掲載しています。
