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



このエントリーをはてなブックマークに追加
リストスタイル(list-style-type,list-style-image,)

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

<style type="text/css">
<!--
.ul1    {
    list-style-type:    disc;        /* 黒丸 */
}
.ul2    {
    list-style-type:    circle;        /* 白丸 */
}
.ul3    {
    list-style-type:    square;        /* 四角 */
}
.ul4    {
    list-style-type:    square;
}
.ul4 li    {
    padding-left:        30px;        /* 間隔 */
}
.ul5    {
    list-style-type:    none;        /* なし */
}
.ul6    {
    list-style-image:    url("../../sample/img/img2.gif");    /* 画像 */
}
.ul7    {
    list-style-type:    circle;
    list-style-position:    inside;        /* 要素内に表示 */
    border:            1px solid #666;
}
.ul8    {
    list-style-type:    circle;
    list-style-position:    outside;    /* 要素外に表示 */
    border:            1px solid #666;
}
//-->
</style>

</head>
<body>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="ul1">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="ul2">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="ul3">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="ul4">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="ul5">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="ul6">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="ul7">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ul class="ul8">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</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】