トップページ  > ウェブ制作チュートリアル  > リストマーカーを消す
第5章 リスト要素でメニューを作る

★リストマーカーを消す

リストマーカーを消す

リスト項目の前に付けられた先頭記号( ● )は、リストマーカーと呼びます。 リストマーカーは、初期値では黒丸( ● )になっていますが、CSSのlist-style-typeプロパティで、円、四角、マーカー無しなどの種類を指定することが可能です。

サンプルサイトでは、最終的にメニュー項目を横に並べて水平メニューとしてスタイリングしていくので、リストマーカーを消してしまいましょう。 base.cssに以下の記述を追加してください。

CSSソース(base.css)

@charset "utf-8";
body {
	font-size:95%;		/* フォントサイズを95%にする */
	font-family: "MS ゴシック",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(黒丸)です。

まとめ
  1. リストマーカーの種類は、list-style-typeプロパティで指定する
  2. list-style-type:none; は、リストマーカー無しにする
  3. list-style-typeプロパティの値には、none以外にも、circle(円)、square(四角)などがある
<前へ 目次へ 次へ>
▲ページ先頭へ
トップページ  > ウェブ制作チュートリアル  > リストマーカーを消す
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ