この広告は30日以上更新がないブログに表示されます。
April.24.2024.Wed
10:18|
スポンサーサイト
この広告は30日以上更新がないブログに表示されます。
June.29.2009.Mon
20:05|category:お知らせ
June.29.2009.Mon
18:46|category:お知らせ
June.29.2009.Mon
12:28|category:css
June.29.2009.Mon
09:32|category:css
i-CSS2 text-decoration
imB1.0でも対応していた値は
blink
のみでしたが、
※PCはIE系、Mac系非対応
imB2.0からは
underline(下線)
overline(上線)
line-through(取り消し線)
も対応できます。
※auはblinkとunderlineとoverlineのみ、imB1.0はblinkのみ対応
デフォルトはnone(装飾無し)
またdocomoではマーク付リスト(ul、ol)にこれらのプロパティを使った場合リストマークにも適用されます。
※但し値がline-through、overline、underlineの場合及びリストマークに画像(list-style-image)を使った場合は装飾されません。
blink
のみでしたが、
※PCはIE系、Mac系非対応
imB2.0からは
underline(下線)
overline(上線)
line-through(取り消し線)
も対応できます。
※auはblinkとunderlineとoverlineのみ、imB1.0はblinkのみ対応
デフォルトはnone(装飾無し)
またdocomoではマーク付リスト(ul、ol)にこれらのプロパティを使った場合リストマークにも適用されます。
※但し値がline-through、overline、underlineの場合及びリストマークに画像(list-style-image)を使った場合は装飾されません。
June.28.2009.Sun
19:21|category:css
i-CSS2 position
ボックス位置を指定する時にどうするのかを決めるプロパティです。
またpositionとセットでtop、right、bottom、leftのプロパティを使用して位置を指定します。
値:absolute(絶対位置、起点は画面左上)、relative(相対位置)、fixed(固定)、static(そのまま:デフォルト)、inherit(親要素継承)
positionに関してはこのブログでも使っているのでPCから閲覧の方は参照してください。
例:
一番上のメニューは本来タイトルの下に位置していますが、(styleオフにしてみてください。)
position:absolute;
top:4em;
でタイトルより上に持って来ています。
また全てのアンカー(リンク)のマウスオン時(a:hover)には
position:relative;
top:2px;
left:2px;
でマウスオンで右下に2pxずつズレるようにしています。
またpositionとセットでtop、right、bottom、leftのプロパティを使用して位置を指定します。
値:absolute(絶対位置、起点は画面左上)、relative(相対位置)、fixed(固定)、static(そのまま:デフォルト)、inherit(親要素継承)
positionに関してはこのブログでも使っているのでPCから閲覧の方は参照してください。
例:
一番上のメニューは本来タイトルの下に位置していますが、(styleオフにしてみてください。)
position:absolute;
top:4em;
でタイトルより上に持って来ています。
また全てのアンカー(リンク)のマウスオン時(a:hover)には
position:relative;
top:2px;
left:2px;
でマウスオンで右下に2pxずつズレるようにしています。
このボックスは本当は水色のボックスより上に記述しています。
height:100px; /*高さ100px*/
position:relative; /*本来の位置の*/
top:100px; /*上から100px下に*/
表示させて、
height:100px; /*高さ100px*/
position:relative; /*本来の位置の*/
top:100px; /*上から100px下に*/
表示させて、
更にこちらのボックスには
height:100px; /*高さ100px*/
position:relative; /*本来の位置の*/
bottom:100px; /*下から100px上に*/
を指定する事により双方を入れ替えて表示しています。
※auとimB1.0は赤が上、水色が下に表示されています。
height:100px; /*高さ100px*/
position:relative; /*本来の位置の*/
bottom:100px; /*下から100px上に*/
を指定する事により双方を入れ替えて表示しています。
June.27.2009.Sat
18:46|category:css
i-CSS2 overflow
divなどのボックスサイズを指定した際に、ボックス内に収まりきらないハミ出してしまう場合の動作を指定します。
docomoで対応している値は
hidden(切り捨て)、visible(表示させる:デフォルト)、inherit(親要素継承)
※auとimB1.0は高さ指定ができないのでボックス毎そのまま表示されます。
個人的な結論としてはボックスからハミ出して表示させるか、切り捨てしか選択肢が無い(SoftBankも同じです。)ので既に説明済みのheightは余裕を持って設定するか、または設定しないのが無難かと思います。
docomoで対応している値は
hidden(切り捨て)、visible(表示させる:デフォルト)、inherit(親要素継承)
ここはoverflow:visible;で指定しています。
高さ50pxはちょっと極端ですが、あまり長文じゃなくても効果がわかりやすいように設定しました(^_^;)
ハミ出した部分はそのまま表示されます。
高さ50pxはちょっと極端ですが、あまり長文じゃなくても効果がわかりやすいように設定しました(^_^;)
ハミ出した部分はそのまま表示されます。
※auとimB1.0は高さ指定ができないのでボックス毎そのまま表示されます。
個人的な結論としてはボックスからハミ出して表示させるか、切り捨てしか選択肢が無い(SoftBankも同じです。)ので既に説明済みのheightは余裕を持って設定するか、または設定しないのが無難かと思います。
June.27.2009.Sat
09:04|category:css
i-CSS2 list-style
序列リスト(ol)、非序列リスト(ul)、非推奨要素のdirやmenu、及びこれらの中に最低一組必須のliに使用可能。
■list-style-image
リスト画像です。
値:url("画像URL")
■list-style-position
値:inside、outside(デフォルト)
通常リストマークよりも右側にオフセットされます(outside)が、insideは二行目以降がリストマークとツライチになります。
■list-style-type
これは以前から馴染みがあると思います。
値:disc(塗り潰し円:デフォルト)、circle(輪)、square(四角)、decimal(アラビア数字)、lower-alpha(アルファベット小文字)、upper-alpha(アルファベット大文字)、none(非表示)
※auはdisc、circle、squareが絵文字になります。
■list-style-image
リスト画像です。
値:url("画像URL")
- このサンプルはulに指定。
- ul〜/ul内の全てのリスト画像を一括で指定できます。
- imB1.0はリスト画像は表示されません。
- このサンプルはliに指定。
- li全てのリスト画像をバラバラに指定できます。
- imB1.0はリスト画像は表示されません。
■list-style-position
値:inside、outside(デフォルト)
通常リストマークよりも右側にオフセットされます(outside)が、insideは二行目以降がリストマークとツライチになります。
- outside
二行目 - 一行目
二行目 - 一行目
二行目
- inside
二行目 - 一行目
二行目 - 一行目
二行目
■list-style-type
これは以前から馴染みがあると思います。
値:disc(塗り潰し円:デフォルト)、circle(輪)、square(四角)、decimal(アラビア数字)、lower-alpha(アルファベット小文字)、upper-alpha(アルファベット大文字)、none(非表示)
※auはdisc、circle、squareが絵文字になります。
- disc
- circle
- square
- decimal
- lower-alpha
- upper-alpha
- none
June.27.2009.Sat
04:42|category:css
i-CSS2 font
■font-size:値;
これはimB1.0の時と同じくキーワード指定のみ可能です。詳細は省略しますが、値だけ…
xx-large
x-large
large
medium
small
x-small
xx-small
■font-style:値;
本来は色々ありますが、docomoでは値はnormalしか使えません。normalのみでなぜ対応なのかは不明ですが…今後バージョンアップと共に対応する値が拡張されるのでしょうか?
※このブログ全てfont-style:normal;なのでサンプルは省略します。
■font-weight:値;
値:bold(太字)、normal(通常の太さ、デフォルト)
この文章はfont-weight:bold;です。
この文章はfont-weight:normal;です。
これはimB1.0の時と同じくキーワード指定のみ可能です。詳細は省略しますが、値だけ…
xx-large
x-large
large
medium
small
x-small
xx-small
■font-style:値;
本来は色々ありますが、docomoでは値はnormalしか使えません。normalのみでなぜ対応なのかは不明ですが…今後バージョンアップと共に対応する値が拡張されるのでしょうか?
※このブログ全てfont-style:normal;なのでサンプルは省略します。
■font-weight:値;
値:bold(太字)、normal(通常の太さ、デフォルト)
この文章はfont-weight:bold;です。
この文章はfont-weight:normal;です。
June.26.2009.Fri
08:03|category:お知らせ
June.25.2009.Thu
11:07|category:css
i-CSS2 display
値はi-CSS1ではmarqueeに相当するwap拡張CSSの
※パソコンは■display:-wap-marquee;の文字がスクロールしません。
※6/26訂正:Operaはwap拡張CSSが有効なようです。(Operaはスクロールします。)
head内要素とframeset関連、br以外ほとんど使用可能です。
■display:block;
通常アンカーなどインラインレベル要素は文章の途中でリンクを置いてもそのまま文章の途中でリンクになりますが、display:block;は文字通りブロック化するので上下が改行されます。
※auとimB1.0は「上下が改行」のリンクも文章の途中でそのまま表示されています。
■display:inline;
逆にブロックレベル要素をインライン化するdisplay:inline;は文章の途中で
※auとimB1.0は赤い部分は改行されています。
■display:none;
divやpなどをborderで囲ったり背景色を付けたり、marginを設ける事により罫線は不要になる場合がありますが、そういった場合に非表示にできます。(もちろん罫線だけではありません。)
docomo以外ではbrにもdisplayが使えますがdocomoは改行を無効にする事はできないみたいです。※imB1.0は罫線が見えています。
■display:-wap-marquee;
のみでしたが、block、inline、noneも使用可能になりました。※パソコンは■display:-wap-marquee;の文字がスクロールしません。
※6/26訂正:Operaはwap拡張CSSが有効なようです。(Operaはスクロールします。)
head内要素とframeset関連、br以外ほとんど使用可能です。
■display:block;
通常アンカーなどインラインレベル要素は文章の途中でリンクを置いてもそのまま文章の途中でリンクになりますが、display:block;は文字通りブロック化するので上下が改行されます。
※auとimB1.0は「上下が改行」のリンクも文章の途中でそのまま表示されています。
■display:inline;
逆にブロックレベル要素をインライン化するdisplay:inline;は文章の途中で
上下が改行されずに文章の途中に表示されます。
赤い背景の部分はspanではなくdivです。※auとimB1.0は赤い部分は改行されています。
■display:none;
divやpなどをborderで囲ったり背景色を付けたり、marginを設ける事により罫線は不要になる場合がありますが、そういった場合に非表示にできます。(もちろん罫線だけではありません。)
docomo以外ではbrにもdisplayが使えますがdocomoは改行を無効にする事はできないみたいです。※imB1.0は罫線が見えています。