箇条書き(リスト)

段落(pタグ)もボックスに見なして設定できます!
カラーリスト(ブラウザ対応色名)
サイズ指定単位リスト
【第15回】…ページの中身をブロック分け/ブログ風3カラムのページ作成?

1.リスト行頭の種類

行頭の種類いろいろ
none なし   
disc 黒丸
circle 白丸
square 四角
decimal 数字 1.
lower-roman 小文字のギリシャ文字 i.
upper-roman 大文字のギリシャ文字 I.
lower-alphabet 小文字のギリシャ文字 a.
upper-alphabet 大文字のギリシャ文字 A.

●指定例
ul{
list-style-type:
upper-roman;
}

※もちろん、htmlの方で、下のようにリストの部分が
<ul></ul>で囲まれてなくてはならない。 

●Webページ(htmlモード)
<ul>
<li>リスト名1</li>
<li>リスト名2</li>
<li>リスト名3</li>
</ul>

2.リストの行頭を画像にする

ul{
list-style-image: url(画像ファイル名又はURL);
}
●使用例

ul{
list-style-image: url(crescent1.gif);
}

3.行頭の画像を一部だけ変更

1.Webページ、htmlの編集…変更するliタグをクラス分け
<li class="new"><a href="test1.html">リンク先名</a></li>
2.スタイルシートの記述
li.new{
list-style-image: url(画像ファイル名);
}

4.メニュー部分を装飾

1.Webページ、htmlの編集
…h2タグの見出しとul。liタグのリスト部分を含んだ全部を1ブロックとして名前を付けて区分けする。(<div></div>のセットで仕切る時、ブロックのIDを付ける)

<div id="ブロックの名前">
<h2 class="メニュー用h2タグのクラス分け名">[MENU]</h2>
<ul>
<li><a href="リンク先ファイル名">リンク先名</a></li>
<li><a href="リンク先ファイル名">リンク先名</a></li>
<li><a href="リンク先ファイル名">リンク先名</a></li>
<li><a href="リンク先ファイル名">リンク先名</a></li>
</ul>
</div>
●記述例

<div id="menu">
<h2 class="link">[MENU]</h2>
<ul>
<li><a href="test1.html">お話2</a></li>
<li><a href="test6.html">お話3</a></li>
<li><a href="test1.html">お話4</a></li>
<li><a href="test6.html">お話5</a></li>
</ul>
</div>
2.スタイルシートの記述
●記述例

div#menu {
width: 20%;
float: left;
background-color: lightyellow;
margin-left: 1em;
font-size: 0.8em;
padding: 0.7em;
border-style: dotted;
border-color:  darkred;
border-width: 2px;

}

div#menu  ID「menu」のブロック内の指定だということを宣言
background-color: lightyellow; menu内の背景色は、lightyellow
※background: 画像名; にすれば、背景画像を敷くことができる。
margin-left: 1em; 左側に余白を1文字分設ける
font-size: 0.8em; 文字の大きさは、通常サイズ×0.8の大きさ
padding: 0.7em; メニューブロックの内側の余白は0.7文字分
border-style: dotted;
border-color:  darkred;
border-width: 2px;
枠線の指定
(スタイル)点線 (色)darkred (線の太さ)2px

 

5.リスト部分のみリンクの色を変える

 スタイルシートに追加記述
●指定例

div#menu a:link {
color: brown;
text-decoration:none;
}

div#menu a:visited {
color: navy;
}

div#menu a:hover {
color: blue;
background-color: yellow;
text-decoration:underline overline;
}

menuブロックの中の未訪問リンクの指定と宣言
色は、茶色
文字装飾は、アンダーラインなし
 

menuブロックの中の訪問済みリンクの指定と宣言
色は、紺色
文字装飾の指定がないので、ページ全体で指定してなければ、アンダーラインが入る
 

menuブロックの中のオンマウス状態のリンクの指定と宣言
色は、青色
背景色は黄色
テキスト装飾は、上下のラインをつける

※指定してないプロパティで、ページ全体での指定があれば、それになる。
ページ全体での指定がなければ、デフォルトの設定。