AX
【WEB】CSS3 - リサイズ可能な領域
Safariがバージョン3.1となってCSS3に対応!

ということで、ちょっとCSS3の新機能を試してみる。

CSS3に対応したブラウザはSafari以外にもFireFox、Opera、IE7がある模様。
これから対応するのかな?まぁ、これから試してみるんでちゃんと動く人は対応しているブラウザを使っているってことで。(^^;





<< CSS3からの新機能 第一弾 - [resize] リサイズ可能な領域 >>

記念すべき第一弾はプロパティ、resize。
リンク:W3C - resizing

CSSの書き方とか適用の仕方とかは省略します。
それは自分で調べて勉強してください(冷)

CSS3からresizeのプロパティが追加されました。

■ resizeに指定できる値

none:デフォルト。リサイズできません。
both:高さ、幅のリサイズが可能。
horizontal:幅のリサイズのみ可能。
vertical:高さのリサイズのみ可能。
inherit:親の要素の値を継承する。

■ 適用対象
overflowを定義した要素に有効。
overflowを記述しないと動作しません。

とりあえず、使ってみる。

◆ ソースコード

<div style="resize:both;overflow:auto;border:1px solid #000;width:100px;height:100px;">
hoge
foo
bar
hoge
foo
bar
hoge
foo
bar
hoge
foo
bar
hoge
foo
bar
</div>


◆ 表示例(ブラウザが対応していない場合は動作しません)

hoge
foo
bar
hoge
foo
bar
hoge
foo
bar
hoge
foo
bar



すごい!!対応したんだからできて当たり前なんだが、すごい!!
今まではJavascriptでこういうことができるように実装していたのに、CSS3に対応したことで誰でも簡単にリサイズ可能な領域を作成することが可能になった!

あとは対応ブラウザが増えていくことを願うばかりだ。

まぁ、飽くまでCSSというものは見た目を変化させるものだから、未対応ブラウザで閲覧されても記事、内容自体は問題なくみれるはずなんだけどね。
[PR]
by manodeldio | 2008-04-06 00:06 | プログラミング


<< 【DashBoard】Widg... MacBook買ったよ >>