スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&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>


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>


箇条書きリスト

Step3:タグを再定義
CSSファイルの<li> タグを再定義します。デフォルトの箇条書き形式をカスタマイズした形式に変更してみましょう。

li {
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;

}


テキスト形式

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;

}


詳細の設定

引用:Web Design Library著者:DesignSpice翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング