※style対応テストと自分用メモ
外枠
【div style】
◆フォントカラー
あいうえおABCDE
◆寄せる
左
中央
右
◆background
上
あいうえおABCDE
下
◆padding 上下左右1em
上
あいうえおABCDE
下
(個別指定)
上
padding-top:1em
下
上
padding-bottom:1em
下
上
padding-right:1em;
下
上
padding-left:1em;
下
◆margin 上下左右1em
上
あいうえおABCDE
下
(個別指定)
上
margin-top:1em
下
上
margin-bottom:1em
下
上
margin-right:1em;
下
上
margin-left:1em;
下
◆入れ子 外枠padding 上下左右1em
上
下
◆入れ子 内枠margin 上下左右1em
上
下
上下margin、外枠外にmargin
◆行間 2em
上
あいうえおABCDE
下
◆フォントサイズ
1
2
3
4
5
6
7
xx-small
x-small
small
medium
large
x-large
xx-large
200%
2em(2文字分)
◆ボーダー 実線 1px 赤
上
あいうえおABCDE
下
(個別指定)
上
border-top:solid 1px #ff0000
下
上
border-bottom:solid 1px #ff0000
下
上
border-right:solid 1px #ff0000;
下
上
border-left:solid 1px #ff0000;
下
【span style】
◆フォントカラー
あいうえおABCDE
◆background
上
あいうえおABCDE
下
◆padding 上下左右1em
上
あいうえおABCDE
下
上文字消失、下文字表示(上文字は背景に上書きされる)
例)0.3em
上 文字の下の方が消えている
あいうえおABCDE
下
(個別指定)
改行
上
padding-top:1em下
改行
上
padding-bottom:1em下
改行
左
padding-right:1em;右
改行
左
padding-left:1em;右
改行
◆margin 上下左右1em
上
あいうえおABCDE
下
(個別指定)
改行
上
margin-top:1em
下
改行
上
margin-bottom:1em
下
改行
左
margin-right:1em;右
改行
左
margin-left:1em;右
改行
◆入れ子 外枠padding 上下左右1em
上
あいうえおABCDE
下
◆入れ子 内枠margin 上下左右1em
上
あいうえおABCDE
下
上下margin、外枠外にmargin
◆行間 2em
上
あいうえおABCDE下
◆フォントサイズ
1
2
3
4
5
6
7
xx-small
x-small
small
medium
large
x-large
xx-large
200%
2em(2文字分)
◆ボーダー 実線 1px 赤
上
あいうえおABCDE
下
(個別指定)
上
border-top:solid 1px #ff0000
下
上
border-bottom:solid 1px #ff0000
下
左
border-right:solid 1px #ff0000;右
左
border-left:solid 1px #ff0000;右
【hr style】
※ドコモP-03B(iモードブラウザ2.0)での結果※
<hr style="color:背景色;background-color:背景色;border:0;border-top:1px solid 線の色;">
(線の色、線の背景色、線スタイルクリア、上ボーダー装飾上書き)
<hr color="ff0000" size="1" />
↑色は変わる、影はないが太い
<hr color="ff0000" style="boder:1px;" />
↑色は変わる、影はないがちょっと太い
<hr color="ff0000" style="1px solid #ff0000" />
↑色は変わる、影はないがちょっと太い
<hr style="height:1px;border:1px solid #ff0000;" />
↑色は変わらない、白抜きになる
<hr style="border:1px solid #ff0000;" />
↑色は変わらない、影がつく
solid実線1px
↑色が変わらない
dotted点線1px
↑色が変わらない、実線になる
dashed破線1px
↑色が変わらない、実践になる
double二重線3px(一本目、空白、二本目で全部で3px)
↑色が変わらない、二重線ではなく一つの線に。ピクセルを加えると、その分太くなるだけ。