段落(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ブロックの中のオンマウス状態のリンクの指定と宣言 色は、青色 背景色は黄色 テキスト装飾は、上下のラインをつける |
※指定してないプロパティで、ページ全体での指定があれば、それになる。
ページ全体での指定がなければ、デフォルトの設定。