ごんたのお気楽な毎日

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

2010年05月18日(火)

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

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

「主要5ブラウザの最新安定版」で表示した画面をキャプチャし、並べて縮小したもの。制作したWebページを表示すると、クリックで絵が変化したり瞬きしたりするが、これは画像だから変化しない。

CSS3を使うと、今まで画像やJavaScriptを使わないと表せなかったことが、CSSだけで可能になる。

CSS2.1では無理だったこと
  • 角を丸くする。
  • 背景にグラデーションをかける。
  • 対象物を、回転・拡大/縮小・歪ませる。
  • 文字やボックスに陰影をつける。
  • アニメーションさせる。

現在CSS3は、まだW3Cの勧告に至っておらず、草案(合議して決めるために作られた案)の段階。だから、仕様は二転三転する可能性がある。

ただし、勧告されるのは当分先の事であり、勧告されていなくても使用してよい。各ブラウザは、W3Cの草案を基にCSS3を先行実装していて、Web開発者の意見を取り入れながら実装・改良をしていくようだ。

2010年01月13日(水)

パンダのしっぽは白色である。また、パンダの胸周りは黒色である。

パンダの白黒具合を写真で説明
パンダの白黒具合を説明した画像

しかし、世の中には、しっぽが黒かったり胸周りが白かったりする「偽パンダ」がはびこっている。

たれぱんだ』『PANDA-Z(パンダーゼット)』『やさぐれぱんだ』『カンフー・パンダ』など、人気パンダキャラクターが、白黒の塗り分けを間違えている。これが悪循環を起こしているのではないだろうか。

しっぽが黒いキャラクターの作者は、本当にパンダが好きなのだろうか。「パンダは人気があるから、キャラクターにすれば儲かりそう」という思惑からキャラクターにしただけなのではないか、と勘ぐってしまう。もちろん、そうでないと信じたいが……。

以前、パンダを日本で一番多く飼育している『アドベンチャーワールド』のパンダグッズ売り場で、白黒の塗り分けを手当たり次第にチェックしてみたことがある。

その結果、間違った色分けのパンダグッズは、探しても探しても全く見つからなかった。数え切れないぐらいの種類と量のパンダグッズがあるのにだ。

俺は、アドベンチャーワールド関係者のパンダへの愛を感じて、とても嬉しかった。

パンダをこよなく愛する俺が、偽パンダグッズの増殖を食い止める為、パンダの正しい色分けを主張する歌の詞を書いてみた。

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

好奇心旺盛なタイパー

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

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

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

カレンダー
07 « 2020-08 » 09
- - - - - - 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アクセス解析