共同質問掲示板☆EvolutionW

初心者向け携帯サイト作成のための伝統ある掲示板です。



今日:0 昨日:0 合計:17246
June.06.2020.Sat 14:23|category:css

スポンサーサイト



この広告は30日以上更新がないブログに表示されます。
css

June.29.2009.Mon 12:28|category:css

i-CSS2 text-indent

ブロックレベル要素内の最初の一行目のインデントを指定します。

値:px(em)、%

この段落の最初に一文字ぶんの空白を空けています。

text-indent:1em;

※imB1.0は行頭から文字がきています。

拍手 css コメント0件

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)を使った場合は装飾されません。
拍手 css コメント0件

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ずつズレるようにしています。

このボックスは本当は水色のボックスより上に記述しています。
height:100px; /*高さ100px*/
position:relative; /*本来の位置の*/
top:100px; /*上から100px下に*/
表示させて、
更にこちらのボックスには
height:100px; /*高さ100px*/
position:relative; /*本来の位置の*/
bottom:100px; /*下から100px上に*/
を指定する事により双方を入れ替えて表示しています。
※auとimB1.0は赤が上、水色が下に表示されています。
拍手 css コメント0件

June.27.2009.Sat 18:46|category:css

i-CSS2 overflow

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

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

ここはoverflow:visible;で指定しています。
高さ50pxはちょっと極端ですが、あまり長文じゃなくても効果がわかりやすいように設定しました(^_^;)
ハミ出した部分はそのまま表示されます。




ここはoverflow:hidden;で指定しています。
高さ50pxはちょっと極端ですが、あまり長文じゃなくても効果がわかりやすいように設定しました(^_^;)
ハミ出した部分は切り捨てられます。
※auとimB1.0は高さ指定ができないのでボックス毎そのまま表示されます。
個人的な結論としてはボックスからハミ出して表示させるか、切り捨てしか選択肢が無い(SoftBankも同じです。)ので既に説明済みのheightは余裕を持って設定するか、または設定しないのが無難かと思います。
拍手 css コメント0件

June.27.2009.Sat 09:04|category:css

i-CSS2 list-style

序列リスト(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(画像)のためうまく表示されませんね
拍手 css コメント0件

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;です。
拍手 css コメント0件

June.25.2009.Thu 11:07|category:css

i-CSS2 display

値はi-CSS1ではmarqueeに相当するwap拡張CSSの
■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は罫線が見えています。
拍手 css コメント0件

June.25.2009.Thu 10:23|category:css

i-CSS2 margin&padding

■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:値 値 値 値;
上 右 下 左

またどこか1つだけにmarginやpaddingを設けたい場合は下記のような指定も可能です。
margin-top:値;
margin-right:値;
margin-bottom:値;
margin-left:値;
拍手 css コメント0件

June.15.2009.Mon 14:44|category:css

i-CSS2 width&height

ブロックレベル要素、またはブロック化(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(継承)

例)
<div style="width:60%;height:300px;">
内容
</div>
※前回と同じくauとi-modeブラウザ1.0では100%の幅と行数分の高さしか表示されません。

<div style="width:80%;height:500px;margin:auto;">
内容
</div>
※margin:auto;を指定すればボックスを中央寄せできます。(但し、i-CSSからは少し脱線しますが互換モードのIE系ではmargin:auto;は反映されません。標準モードはOK)
※marginについては次回
拍手 css コメント0件

June.14.2009.Sun 16:01|category:css

i-CSS2 float&clear

これらは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

例)
<div style="width:50%;float:left;">
<div style="background-color:#f00;color:#fff;padding:5px;">
左ボックス内容
</div>
</div>
※auとi-modeブラウザ1.0は赤と青とグレーのボックスが全て縦に並んでいます。
<div style="width:50%;float:right;">
<div style="background-color:#00f;color:#fff;padding:5px;">
右ボックス内容
</div>
</div>
※divを重ねているのはfloatを使う際、通常親要素には幅(width)とfloatのみ指定して詳細は子要素にて指定します。
width、paddingプロパティに関しては別記します。
<div style="clear:both;background-color:#808080;color:#fff;">
回り込み解除のボックス内容
</div>
拍手 css コメント0件

新しい記事へ 過去の記事へ

http://mblg.tv/supportbbs/
mobile

Powered by mblg.tv

©2009-2010 共同質問掲示板

プロフィール

YUKAI☆さんのプロフィール
性 別 男性
年 齢 49
誕生日 3月12日
地 域 京都府
系 統 ギャグ系
職 業 自営業
血液型 A型

カレンダー

<< 2020年06月 >>
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30




Twitter Button from twitbuttons.com

menu:top|rule|info|main bbs|sub bbs|idle talk|links|RSS categories:html|xhtml|css|wml|rental tool|others
©2009-2010 共同質問掲示板 at Custom Garage SILKROAD designed & authored by yukai☆

Powered by mblg.tv

 more than these boards Z-Z BOARD Toy-BBS mobile-bbs