かんたん作成【HTML CSS JavaScript PHP CGI Perl Ruby Python .htaccess】



このエントリーをはてなブックマークに追加
番号つきリリスト(list-style-type,padding-left)

<html>
<head>
<title>リストスタイル</title>

<style type="text/css">
<!--
.ol1    {
    list-style-type:    decimal;    /* 数字 */
}
.ol2    {
    list-style-type:    lower-alpha;    /* アルファベット(小文字) */
}
.ol3    {
    list-style-type:    upper-alpha;    /* アルファベット(大文字) */
}
.ol4    {
    list-style-type:    lower-roman;    /* ローマ数字(小文字) */
}
.ol5    {
    list-style-type:    upper-roman;    /* ローマ数字(大文字) */
}
.ol6    {
    list-style-type:    upper-roman;
}
.ol6 li    {
    padding-left:        30px;        /* 間隔 */
}
.ol7    {
    list-style-type:    lower-alpha;
    list-style-position:    inside;        /* 要素内に表示 */
    border:            1px solid #666;
}
.ol8    {
    list-style-type:    lower-alpha;
    list-style-position:    outside;    /* 要素外に表示 */
    border:            1px solid #666;
}
.ol9    {
    list-style-type:    none;        /* なし */
}
//-->
</style>

</head>
<body>
<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ol class="ol1">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ol class="ol2">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ol class="ol3">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ol class="ol4">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ol class="ol5">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ol class="ol6">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ol class="ol7">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ol class="ol8">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
<ol class="ol9">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
</body>
</html>
スタイルシート(CSS)
全体の背景色(background-color) 全体の背景画像(background-image)
全体の背景画像(固定 background-attachment) 全体の背景画像(横のみ繰り返し repeat-x)
全体の背景画像(縦のみ繰り返し repeat-y) 全体の背景画像(位置指定 background-position)
全体の背景一括指定(background) 全体の文字色(color)
リンク色(link, visited, hover, active) スクロールバーの色(scrollbar)
フォント(font-family) 文字サイズ(font-size)
文字の太さ(font-weight) 文字色(color)
文字装飾(text-decoration) 斜体(font-style)
上付き文字・下付き文字(vertical-align) 大文字変換・小文字変換(text-transform)
行の高さ(line-height) 文字間隔(letter-spacing)
行揃え(text-align) 1行目にインデント(text-indent)
段落の1行目を装飾(first-line) 段落の最初の1文字を装飾(first-letter)
縦書き(writing-mode) 自動改行しないで表示(white-space, nowrap)
文字の背景色(background-color) 文字の背景画像(background-image)
枠(border-style) 枠(太さ指定 border-width)
枠(色指定 border-color) 枠(一括指定 border)
幅・高さ(width, height) マージン(外側の間隔 margin)
パディング(内側の間隔 padding) リストスタイル(list-style-type,list-style-image,)
番号つきリリスト(list-style-type,padding-left) 画像サイズ(width)
画像回り込み(float) 画像にフィルター(透明度 filter, alpha)
画像に枠(border) 画像の重ね合わせ・重ねる順番指定(z-index)
罫線の色・幅・高さ・枠 フォームの色・サイズ
IMEの入力モードの指定(ime-mode) カーソルの形を指定(cursor)
ボタン風リンク 画像ダウンロード対策(右クリックでの画像保存を禁止)
かんたん作成【HTML CSS JavaScript PHP CGI Perl Ruby Python .htaccess】