--年--月--日(--)
新しい記事を書く事で広告が消せます。
- ごんタイピング =無料タイピング練習=
-
初心者は、無料でタッチタイピングを習得できる『タッチタイピング講座』がおすすめ。タイピングに自信のある人は、全国ランキングがあってレベル別に遊べる『無料タイピングゲーム集』で実力を自慢しよう！
2010年05月18日(火)
XHTMLとCSS3を使って、パンダ（ジャイアントパンダ）を描いてみた。画像やJavaScriptは一切使っていない。
- 完成図
「主要5ブラウザの最新安定版」で表示した画面をキャプチャし、並べて縮小したもの。制作したWebページを表示すると、クリックで絵が変化したり瞬きしたりするが、これは画像だから変化しない。
CSS3を使うと、今まで画像やJavaScriptを使わないと表せなかったことが、CSSだけで可能になる。
- CSS2.1では無理だったこと
-
- 角を丸くする。
- 背景にグラデーションをかける。
- 対象物を、回転・拡大/縮小・歪ませる。
- 文字やボックスに陰影をつける。
- アニメーションさせる。
現在CSS3は、まだW3Cの勧告に至っておらず、草案（合議して決めるために作られた案）の段階。だから、仕様は二転三転する可能性がある。
ただし、勧告されるのは当分先の事であり、勧告されていなくても使用してよい。各ブラウザは、W3Cの草案を基にCSS3を先行実装していて、Web開発者の意見を取り入れながら実装・改良をしていくようだ。
以下続き
それでは、実際に作ってみたページを紹介しよう。
ブラウザによって実装具合が異なるので、色んなブラウザで表示してもらいたい。描写確認したのは、以下のブラウザである。
- Chrome 5.0
- Safari 4.0
- Firefox 3.6
- Opera 10.5
- IE（5.5，6，7，8，9pp）
ブラウザによる違い
『Chrome』と『Safari』は、どちらもアニメーションに対応している。何かが動くので是非見てもらいたい。両者ともWebKit系のブラウザだが、若干仕様が異なっている（バグ？）ようで、記述の仕方も描写の仕方も違う。『Safari』は記述の仕方に問題がある。
『Firefox』は、確認したブラウザの中で、最も俺の意図したとおりに描写してくれた。記述のしやすさや、描写の安定感は一番だと思った。
『Opera』は、gradient（グラデーション）に対応していないのが残念。
『IE』は、全てのバージョンにおいて、残念な結果に終わった。恥ずかしいので、『IE6』では確認しないでほしい。
CSS3でパンダを描くに当たって、苦労したこと
今まで、CSS3をほとんど使った事がなかったので、「調べて試して覚える」の繰り返しだったので、なかなか捗らなかった。
CSS3に関する情報を日本語で公開しているサイトが少なくて、欲しい情報がなかなか見つからなかった。
同じプロパティでも、ブラウザによって記述方法や対応具合が異なっている場合があり、同じように表示させるのが難しかった。
特に苦労したのは、パンダの目。パンダは、目の周りの黒い模様の影響で「たれ目」だと誤解されがちだが、実際はつり目で鋭い目つきをしている。それをとても表現したかったので頑張った。
CSS3でパンダを描いてみた感想
疲れたけど、かなりの達成感と満足感を味わう事ができた。制作を始めた当初、完成できると思ってなかったから余計だ。
だんだんと形が整っていくごとに楽しさが増してきて、「よし、今度は○○を試してみよう♪」を繰り返していた。おかげで、だいぶ成長できたと思う。
「大好きなパンダを描いてみたい！」という気持ちが前提にあり、その為に必要な情報を探して覚えるという作業を行っていた。これは、今考えると、とても効率的な学習方法だと思う。
目的がはっきりとしており、目的を達成するのに必要な勉強している時は、ただ何となく勉強している時に比べ、集中力もやる気も非常に高い。だから、知識の吸収率に違いが出てくる。
CSS3に興味あるけど、勉強する事にためらいがある人は、勉強自体を「目的」にするのではなく、何かを作るための「手段」とする事をおすすめする。
関連ページ
CSS3の実装が進んでいるブラウザ
IEを使っている人は、CSS3の実装が進んでいるブラウザをダウンロードして試してみよう。
パンダの白黒具合について熱く語ったページ
- 『パンダのしっぽは白』という歌詞を書いてみた
パンダに興味のある人は是非読んで欲しい。友達がつけてくれた曲も載ってるよ。
影響を受けたページ
- 画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD
このドラえもんを見て心を動かされ、「ドラえもんが描けるなら、パンダもできるんじゃないかな」と思い、制作を始めた。ただ、ソースは理解するのに時間かかりそうだったので、ほとんど見ていない。
CSS3の勉強で利用したページ
- Css3 - Opera Developer Community
- 各ブラウザで先行実装しているCSS3プロパティまとめ | CSS-EBLOG
- CSS セレクタに関するおさらい | WWW WATCH
- CSS セレクタに関するおさらい 2 | WWW WATCH
- CSS セレクタに関するおさらい 3 | WWW WATCH
- CSS3 変形処理を行う transform プロパティ | CSS Lecture
- Latest topics > CSS Transitions（CSSだけで簡単なアニメーション）の使い方・覚え方のまとめ - outsider reflex
- -moz-linear-gradient - MDC
- CSS3のグラデーションを試してみる | A Day in the Life
- CSS3 Gradient Generator
- CSS3 グラデーション（gradient）の指定方法 | CSS Lecture
- -moz-radial-gradient - MDC
- CSSで円形のグラデーションを作成する - builder by ZDNet Japan
- CSS3 アニメーション（Transitions）の使用方法 | CSS Lecture
- Latest topics > CSS Transitions（CSSだけで簡単なアニメーション）の使い方・覚え方のまとめ - outsider reflex
- safari4 betaで実装されたCSS Animationを使ってみました。 : アシアルブログ
- CSSだけで文字や画像を反転させる - builder by ZDNet Japan
おすすめ書籍
すでに持っていて気に入ってる本と、中身を確認して購入予定の本を揃えた。自信を持っておすすめできる。
- 関連記事
- ごんタイピング =無料タイピング練習=
-
初心者は、無料でタッチタイピングを習得できる『タッチタイピング講座』がおすすめ。
タイピングに自信のある人は、全国ランキングがあってレベル別に遊べる『無料タイピングゲーム集』で実力を自慢しよう！
トラックバック（言及リンク必須）
http://gontyping.blog.2nt.com/tb.php/183-3ebc16e5
TOP
コメント（気軽にどうぞ）
ごんた（管理人）からの返事はありません。ごんたへの連絡は、メールフォームからよろしく。