最近、Web会では新しい規格のCSS3の話題が日々どこかで書かれています。CSS3では今まで出来なかったグラデーションやドロップシャドウ、角丸などを実現することができ、Webのデザインが大きく変わる画期的な(?)規格です。

 このCSS3を利用してボタンなどを既に書かれているサイトもちょこちょこ出てきています。当サイトもCSS3は少しだけ利用しています。

 そんなCSS3でドラえもんを書いた人がいたのですが、自分も何か書いてみたいな~と思い、同じドラえもんを書いてもつまらないし、あまり凝った絵だと時間がかかるので、比較的簡単な「棒人間」を下記にちょっと書いてみました。興味のある人は覗いてみてください。

 CSS3で棒人間を描いた絵は下記リンクになります。

CSS3で棒人間を書いてみた

 Webに関わっている人なら御存知だと思いますが、CSS3はどのブラウザでも表示される物ではありません。この棒人間を表示するには私が確認する限りではFirefox 3.6、Google Chrome 4でWindows版のOpera 4では大筋表示されるのですが、ちょっと違っています。もちろんInternet Explorerでは上手く表示されません。

 各ブラウザで表示した結果のスクリーンショットを下記に表示しておきます。

FirefoxでCSS3の棒人間を表示

FirefoxでCSS3の棒人間を表示

Google ChromeでCSS3の棒人間を表示

Google ChromeでCSS3の棒人間を表示

OperaでCSS3の棒人間を表示

OperaでCSS3の棒人間を表示

Internet ExplorerでCSS3の棒人間を表示

Internet ExplorerでCSS3の棒人間を表示

 見ての通りInternet Explorer以外はそこそこ表示できているのですが、Internet Explorerでは真っ黒けになってしまいました(笑)

 ちなみに使っているCSS3の新機能は角丸とドロップシャドウとグラデーション、回転の機能です。また、W3Cのチェックをしたところ一応OKを頂きました(^_^)v

 興味のある人は自分でも何か書いてみてはいかがでしょう。

徹底解説HTML5マークアップガイドブック

著者/訳者:羽田野太巳

出版社:秀和システム( 2010-02-26 )

定価:

単行本 ( 576 ページ )

ISBN-10 : 4798025291

ISBN-13 : 9784798025292