スポンサー
ウェブデザイン基礎講座
- ウェブデザインの大原則 ( 48 )
- ウェブユーザビリティ ( 6 )
- カラーセオリー ( 6 )
フォトショップ講座
- フォトショップの基本 ( 230 )
- エフェクト ( 169 )
- テキスト ( 81 )
- テクスチャ&パターン ( 60 )
- ウェブレイアウト ( 38 )
- ドロー ( 73 )
- カラーマネージメント ( 29 )
- 画像加工&合成&修正 ( 127 )
HTML&CSS講座
- HTML&CSS ( 41 )
グラフィック講座
- AdobeIllustrator ( 37 )
- Fireworks ( 1 )
Flash講座
- Flash ( 31 )
3D講座
- 3D ( 1 )
ウェブプログラミング講座
サイトメンテナンス講座
- サイトメンテナンス ( 39 )
サイト紹介
- サイト紹介 ( 8 )
スペシャルリンク
サイト内検索
メールマガジン
デザイナー向けのメルマガ
毎週金曜日に発行しています
毎週金曜日に発行しています
テクニック
Home ＞
HTML&CSS講座
＞ CSSを使ってリストをカスタマイズする方法
CSSを使ってリストをカスタマイズする方法
CSSを使ってリストをカスタマイズする方法 
投稿日：2007年10月23日 レベル：初心者 ソフトウェア：
スポンサードリンク
Step1：リンクを埋め込む
HTMLファイルにCSSファイルへのリンクを埋め込みます。
<html>
<head>
<title>Test Document</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
<head>
<title>Test Document</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
Step2：箇条書きリスト
箇条書きリストを作ります。ここでは以下のように作ります。
<p>Most popular apple varieties in New England today:</p>
<ul>
<li>McIntosh</li>
<li>Cortland</li>
<li>Red Delicious</li>
<li>Empire</li>
<li>Rome</li>
</ul>
<ul>
<li>McIntosh</li>
<li>Cortland</li>
<li>Red Delicious</li>
<li>Empire</li>
<li>Rome</li>
</ul>
Step3：タグを再定義
CSSファイルの<li> タグを再定義します。デフォルトの箇条書き形式をカスタマイズした形式に変更してみましょう。
li {
list-style-position: outside;
list-style-image: url(your_bullet.gif);
}
list-style-position: outside;
list-style-image: url(your_bullet.gif);
}
Step4：テキスト形式
テキスト形式を設定します。
li {
list-style-position: outside;
list-style-image: url(your_bullet.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
list-style-position: outside;
list-style-image: url(your_bullet.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
Step5：詳細の設定
リスト形式は、箇条書きマークと本文との間に空間を追加したり、行間を空けたりして設定ができます。
li {
list-style-position: outside;
list-style-image: url(your_bullet_address.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding-left: 10px;
line-height: 18px;
}
list-style-position: outside;
list-style-image: url(your_bullet_address.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding-left: 10px;
line-height: 18px;
}
引用:Web Design Library著者:DesignSpice翻訳:菊池
スポンサードリンク
