HOME / WEB関連知識のスキルアップ / HTMLクイック･リファレンス /  ウェブ制作チュートリアル / 第5章 リスト要素でメニューを作る：リストマーカーを消す

第5章　リスト要素でメニューを作る

| リストマーカーを消す
リスト項目の前に付けられた先頭記号（ ● ）は、リストマーカーと呼びます。 リストマーカーは、初期値では黒丸（ ● ）になっていますが、CSSのlist-style-typeプロパティで、円、四角、マーカー無しなどの種類を指定することが可能です。
サンプルサイトでは、最終的にメニュー項目を横に並べて水平メニューとしてスタイリングしていくので、リストマーカーを消してしまいましょう。 base.cssに以下の記述を追加してください。

HTMLソース（index.html）

@charset "utf-8";
body {
	font-size:95%;		/* フォントサイズを95%にする */
	font-family: "ＭＳ ゴシック",sans-serif;	/* フォントの種類をゴシック系にする */
	line-height:1.5;	/* 行の高さを1.5倍にする */
	color:#333333;		/* 文字色を濃い目のグレーにする */
}
li {
	list-style-type:none;		/*リストマーカー無しにする*/
}
保存をしたらブラウザで表示してみましょう。リストマーカーが消えていれば成功です。
▶︎ 変更前を確認する
上記のCSSソースでは、list-style-typeプロパティの値にnoneを指定することで、リストマーカー無しに指定しました。

| list-style-typeプロパティの値
list-style-typeプロパティには、none以外にも、circle（円）、square（四角）などの値を指定することができます。 list-style-typeプロパティの初期値はdisc（黒丸）です。
  • none …… マーカーなし
  • disc …… 黒丸（初期値）
  • circle …… 円
  • square …… 四角
  • lower-roman …… 小文字のローマ数字
  • upper-roman …… 大文字のローマ数字
  • lower-greek …… 小文字のギリシャ文字
  • decimal …… 算用数字
  • decimal-leading-zero …… 先頭に0をつけた算用数字
  • lower-latin …… 小文字のアルファベット
  • lower-alpha …… 小文字のアルファベット
  • upper-latin …… 大文字のアルファベット
  • upper-alpha …… 大文字のアルファベット
  • cjk-ideographic …… 漢数字
  • hiragana …… ひらがなのあいうえお順
  • katakana …… カタカナのアイウエオ順
  • hiragana-iroha …… ひらがなのいろはにほへと順
  • katakana-iroha …… カタカナのイロハニホヘト順
  • hebrew …… ヘブライ数字
  • armenian …… アルメニア数字
  • georgian …… グルジア数字
まとめ
  1. リストマーカーの種類は、list-style-typeプロパティで指定する
  2. list-style-type:none; は、リストマーカー無しにする
  3. list-style-typeプロパティの値には、none以外にも、circle（円）、square（四角）などがある