共同質問掲示板☆Evolution�W

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)を使った場合は装飾されません。

ボックス位置を指定する時にどうするのかを決めるプロパティです。
また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ずつズレるようにしています。

※auとimB1.0は赤が上、水色が下に表示されています。

divなどのボックスサイズを指定した際に、ボックス内に収まりきらないハミ出してしまう場合の動作を指定します。

docomoで対応している値は
hidden(切り捨て)、visible(表示させる：デフォルト)、inherit(親要素継承)





※auとimB1.0は高さ指定ができないのでボックス毎そのまま表示されます。
個人的な結論としてはボックスからハミ出して表示させるか、切り捨てしか選択肢が無い(SoftBankも同じです。)ので既に説明済みのheightは余裕を持って設定するか、または設定しないのが無難かと思います。

序列リスト(ol)、非序列リスト(ul)、非推奨要素のdirやmenu、及びこれらの中に最低一組必須のliに使用可能。

■list-style-image
リスト画像です。
値：url("画像URL")

• このサンプルはulに指定。
• ul〜/ul内の全てのリスト画像を一括で指定できます。
• imB1.0はリスト画像は表示されません。

• このサンプルはliに指定。
• li全てのリスト画像をバラバラに指定できます。
• imB1.0はリスト画像は表示されません。

■list-style-position
値：inside、outside(デフォルト)

通常リストマークよりも右側にオフセットされます(outside)が、insideは二行目以降がリストマークとツライチになります。

• outside
  二行目
• 一行目
  二行目
• 一行目
  二行目

• inside
  二行目
• 一行目
  二行目
• 一行目
  二行目

※当ブログがPC(none)、auとSoftBank(画像)のためうまく表示されませんね

■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

※当ブログがPC(none)、auとSoftBank(画像)のためうまく表示されませんね

■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;です。

ショボいですが(^_^;)ご自由にお使いください。
※直リンは厳禁です。

■31×31gif(非透過)


■88×31gif(非透過)

値はi-CSS1ではmarqueeに相当するwap拡張CSSののみでしたが、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は罫線が見えています。

■margin
外側の余白

i-modeブラウザ1.0ではimgにしか使えませんでしたが(imB1.0でのhtml環境で言えばhspaceとvspaceに相当)2.0で使用可能になった要素は以下の通りです。
a、blink、blockquote、body、div、リスト関連、見出し、hr、img、form関連、marquee、object、p、pre、table

値：○px、○%、auto
デフォルトは0(ゼロ)

■padding
内側の余白

hr、img、objectが×(冷静に考えれば画像や罫線などの内側に余白なんて不可能ですよね？)以外はmarginと同じ。プラス
table内要素のth、td

値：○px、○%
デフォルトは同じく0

記述法はborderと同じです。
margin:値;
上下左右一括

margin:値 値;
上下一括と左右一括

margin:値 値 値;
上 左右一括 下

margin:値 値 値 値;
上 右 下 左

またどこか１つだけにmarginやpaddingを設けたい場合は下記のような指定も可能です。
margin-top:値;
margin-right:値;
margin-bottom:値;
margin-left:値;

ブロックレベル要素、またはブロック化(display:block;)した要素、及びimgの横幅と高さを指定します。

i-CSS1ではtable関連とhrのみ可能でしたが、div、button、見出し(h1〜h6)、iframe、img、input、object、リスト関連(ol、ul)、p、pre、select、table関連(table、tr、th、td)、textareaに使用可能です。

■width
値：px、%、auto(デフォルト)、inherit(継承)

■height
値：px、%、auto(デフォルト)、inherit(継承)

例)

これらはi-CSS1でも画像の回り込みや罫線の位置指定などに使われていたので馴染み深いかもしれません……が!!

i-CSS2からはfloatがdivやpにも使用可能です。
……ん？divにfloat？divの回り込み？

そうです。divを横並びにできるのです。パソコンやSoftBankは以前から可能でしたが、いわゆる2カラム3カラム(携帯画面では3カラムはキツいかも…)のレイアウトがtable(そもそも表を組むためのタグであってデザインレイアウト用ではない。)は一切不要になります。
このブログもパソコン表示はコレを使っています。(携帯表示は今現在、auと大半のdocomoが未対応なため別表示になっています。)

■float
値：left、none(デフォルト)、right、inherit

■clear
値：both、left、none(デフォルト)、right、inherit

例)