HTML
HTML5
HTMLタグ
スマートフォン
CSS
CSSプロパティ
CSS・HTML便利ツール
HTML色見本
配色組み合わせツール
特殊文字
JAVA
Android
PHP
Smarty修飾子
EXCEL
WEB技術の辞書・解説・使用例
TOP
>
WEB便利ツール
> リスト(UL、LI)タグ
ツイート
CSSのリストジェネレーター
UL、LI のスタイルの動きを確認する事ができます。
サンプル1
サンプル2
▼生成したリスト(UL、LI)です。
あいうえお
かきくけこ
さしすせそ
▼以下を設定して下さい。
UL
list-style-type :
none
disc
circle
square
lower-roman
upper-roman
lower-greek
super
decimal-leading-zero
lower-latin
lower-alpha
upper-latin
upper-alpha
cjk-ideographic
-
outside
inside
オフセット:
px
背景色
:
文字サイズ
:
pt
文字色
:
ボーダー
-
border
border-top
border-bottom
border-left
border-right
枠太:
px 枠種:
none
hidden
solid
double
dotted
groove
ridge
inset
outset
dashed
dotted
枠色:
余白周り
margin
(上下左右):
px
padding
(上下左右):
px
背景色
:
文字サイズ
:
pt
文字色
:
角丸
角丸
:
px
影
水平:
px 垂直:
px ぼかし半径:
px 距離:
px 色:
inset:
LI
ボーダー
-
border
border-top
border-bottom
border-left
border-right
枠太:
px 枠種:
none
hidden
solid
double
dotted
groove
ridge
inset
outset
dashed
dotted
枠色:
背景色
:
文字サイズ
:
pt
文字色
:
横位置:
-
left 左寄せ
right 右寄せ
center 中央寄せ
justify 均等割付
余白周り
margin
(上下左右):
px
padding
(上下左右):
px
▼生成したCSSのソースです。
ul.css_gen { } ul.css_gen li { }
▼生成結果のURLです。
http://web-dou.com/tool/css_gen_ul.php
WEB便利ツール
テーブル(TABLE、TH、TD)タグのCSSを生成
グラデーションのCSSを生成
吹き出しのCSSを生成
見出し(リボン・吹き出しなど)のCSSを生成
アニメーションのCSSを生成
角丸(1~8点)のボックス(DIV)のCSSを生成
リスト(UL、LI)タグのCSSを生成
ボックス(DIV)タグのCSSを生成
リング(A)タグのCSSを生成
配色組み合わせ
文字列を &><などに変換
EXCEL表→HTMLのテーブルに変換する
HTMLタグ(TABLE、TR、TH、TD)で表を作成