『 ３３ 構造編（１）Bトップページの作成-CSS編⑩リストの先頭点を入れ替える 』

• <<前の記事へ
• 次の記事へ>>

ﾄｯﾌﾟﾍﾟｰｼﾞ
• ●記事トップ
• 
• 『　３３　』
  
• 2009年1月
• 
• ３１日

• ※[ ６ ] ＨＴＭＬ-構造編(1)B トップページの作成-CSS編
  
• ⑩リストの先頭点を入れ替える

---

●CSS適用例　リストの先頭表示

初期の値が黒丸(disc)のリスト先頭点を入れ替えます。

リスト先頭点プロパティ list-style

リスト先頭点プロパティlist-styleに関して、前回のborderプロパティ同様まとめて設定します。

上記例に従い
１．種類　　
(1.2.3...a.b.c...、list-style-typeプロパティで個別に設定可)
２．画像
(指定無しも可、list-style-imageプロパティで個別に設定可)
３．表示位置
(要素の外側か内側か、list-style-positionプロパティで個別に設定可)

■■■■■■■

仲間だいすけ(ＤＡＩ)のＨＰ制作過程例

■■■■■■■
【設定例】

【１．種類】
→lower-roman
.etc
【２．画像】
→url(ﾞdaisukenakama.gifﾞ)
【３．表示位置】
→inside

初期値が要素外側の表示位置。これを内側に設定することもある仲間だいすけでした(^^)

このページ『　３３　』のトップ

応用

【１．種類】
以下は先頭点の種類の具体例です。

disc ●黒丸(初期値)
none 先頭点無し
circle ○白丸
square ■四角
decimal 1.2.3...算用数字
upper-roman Ⅰ.Ⅱ.Ⅲ...大文字ローマ数字
lower-roman ⅰ.ⅱ.ⅲ...小文字ローマ数字
upper-alpha A.B.C...大文字アルファベット
lower-alpha a.b.c...小文字アルファベット

【２．画像】
指定しないこともできます。

＜リスト先頭点画像とリスト内容のズレ＞
先頭に指定する画像が大きすぎる場合、先頭点とリスト内容とがずれることがあります。

これを解決する方法としては、list-styleプロパティを使わずにbackground-imageプロパティで背景画像としてリストの先頭画像を設定する方法があります。

background-image: url("daisukenakama.gif");
background-repeat: no-repeat;
background-position: top left;

【３．表示位置】

outside 先頭点をリスト要素の外側に配置
inside　先頭点をリスト要素の内側に配置

このページ『　３３　』のトップ

まとめ

●CSS適用例　リストの先頭表示

このページ『　３３　』のトップ

• <<前の記事へ
• 次の記事へ>>