ごんたのお気楽な毎日

タイピング,おすすめ無料ソフト,気になるニュース等を取り上げていくブログ

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ごんタイピング =無料タイピング練習=

ごんタイピングのキャプチャ画像初心者は、無料でタッチタイピングを習得できる『タッチタイピング講座』がおすすめ。

タイピングに自信のある人は、全国ランキングがあってレベル別に遊べる『無料タイピングゲーム集』で実力を自慢しよう!

2010年05月18日(火)

XHTMLCSS3を使って、パンダ(ジャイアントパンダ)を描いてみた。画像やJavaScriptは一切使っていない。

完成図
CSS3で描いたパンダの集合写真(縮小版)

「主要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の勉強で利用したページ

おすすめ書籍

すでに持っていて気に入ってる本と、中身を確認して購入予定の本を揃えた。自信を持っておすすめできる。

関連記事
この記事のタグ
ごんタイピング =無料タイピング練習=

ごんタイピングのキャプチャ画像初心者は、無料でタッチタイピングを習得できる『タッチタイピング講座』がおすすめ。

タイピングに自信のある人は、全国ランキングがあってレベル別に遊べる『無料タイピングゲーム集』で実力を自慢しよう!

コメント(気軽にどうぞ)

ごんた(管理人)からの返事はありません。ごんたへの連絡は、メールフォームからよろしく。

コメントの投稿

トラックバック(言及リンク必須)

http://gontyping.blog58.fc2.com/tb.php/183-3ebc16e5

プロフィール
ごんた
著者近影(ごんたの顔)
恥ずかしいのでモザイク入れました

好奇心旺盛なタイパー

タイプウェル』の称号を3つ獲得している。

  • スペシャリスト(国語R)
  • オールラウンダー
  • トゥルータイパー

『タイプウェル』で225人目の殿堂入り。

カレンダー
06 « 2017-07 » 08
- - - - - - 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 31 - - - - -
月別分類
内容別分類
全記事から検索
最近の記事
最近のコメント
最近のトラックバック
おまけ
  • 改造前の姿
  • RSS FEED
  • QLOOKアクセス解析
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。