スキルアップネタ&メモ&TOOL

   その名の通り、自分のメモ用ブログです。最初は、ブックマークのようにどんどんURLを貼り付けるだけになると思います。
  >> ホーム
  >> RSS1.0
カテゴリー

プロフィール

fujishino

Author:fujishino
こちらの記事より

最近の記事

ad

HOME > ARCHIVE - 2011年01月

 スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スポンサー広告 | 固定リンク | このエントリーを含むはてなブックマーク


 「CSSだけでドラえもん」を見てみた
最近はホームページを作るのにCSS(Cascading Style Sheets)というものは欠かせなくなってきているのですが、
CSSにも規格があって、それに対応しているブラウザ(インターネットエクスプローラやFireFoxなどインターネットを見るためのソフト)でないと、思ったとおりに表示されないということがあります。

下記のサイトでは、画像ソフトを使わずにCSS3だけで「ドラえもん」を描いていますが、やはりその表示のされ方はブラウザによって違うようです。

裏技shopDD
画像を一切使わずにCSS3だけでドラえもんを描いてみた!
http://shopdd.blog51.fc2.com/blog-entry-932.html


まず、CSS3だえでドラえもんを描いたということ自体すごいですので、いろんなサイトで高く評価されています。
そして、やはり先に述べたように、どのブラウザで見るかで見え方が違います。

実際に自分のPCでも比べてみると、
FierFox3.6
firefox.jpg

Internet Explorer 8
s-IE8.jpg

このように違いがありました。

他にも、ブラウザの種類はまだたくさんありますので、それぞれで比べてみると面白いかもしれません。
Google Chrome」はCSS3のアニメーションで目が動くおまけ付です。

あとは、ファイルサイズの比較もされていましたが、
同じ絵を画像形式で表わすとしたら、
作者比較によると、
GIF形式  33.5KB
JPEG形式 96.5KB
PNG形式  60.2KB
で、今回のhtmlとCSSのドラえもん部分を計算すると
html 2.05KB
CSS 14.2KB
ファイルサイズ 2.05KB + 14.2KB = 16.25KB
ということなので、サイズも軽いようです。
しかし、この600行というCSSのための記述に要する時間や手間は大変です。
でも作者は、「CSS3のすごさと今後の可能性を皆さんに知っていただけたらと思って実行しました。」と述べています。

確かにすごさが分かりました。






HP作成 デザイン | 固定リンク | トラックバック:0 | コメント:0 | このエントリーを含むはてなブックマーク

copyright © 2005 スキルアップネタ&メモ&TOOL all rights reserved.
Powered by FC2ブログ.
パソコンサポートf

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。