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

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

プロフィール

fujishino

Author:fujishino
こちらの記事より

最近の記事

ad

HOME > カテゴリ - HP作成 デザイン

 スポンサーサイト
上記の広告は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 | このエントリーを含むはてなブックマーク


 横幅940pxへの変更サイトが多いけど・・・
今年の一月一日から、Yahoo!のサイトの横幅が広くなりました。

確かに、アクセス解析などを見てみると、時々横幅800pxのディスプレイからのアクセスもあるものの、だいたいは横幅1024px以上になってきています。

いくつかの巡回サイトでは、その利点を取り上げ、横幅940-950pxへの変更が行なわれています。

たとえば「ホームページを作る人のネタ帳」
「3カラム化。理由はYahooを利用しているユーザーの特殊な行動を見て」


他にも
「PHPSPOT開発日誌」



「CodeZine」



このようなサイトや説明を見ると、視野が広がって綺麗なので、自分のサイトも変更してみようかなーと、最近は思えるようになったのですが、正月からしばらくの間はあまりYahoo!の950px化が気に入りませんでした。

というのは、

17インチディスプレイのデスクトップパソコンでは問題ないのですが、食事時などはダイニングのテーブルの上にあるノートPCでネットサーフィンを行なっています。
別に「お気に入り」を出しているからなどというわけではありません。
「お気に入り」を閉じても、幅が足りなくて、下にスクロールバーが出る状態です。。(泣)
ディスプレイの解像度設定を見ても、1024px・・・問題ありません。
しばらくは、「なんでこんな使いにくくなったんだ・・・」と思っていました。

原因はというと、
「文字の大きさ」でした。
ブラウザの「表示」→「文字のサイズ」を目のためにと思って普段から「大」にしていたからでした。
実は他のブログサイトなどはCSSで、文字の大きさを設定しているのであまり変わらないのですが、Yahoo!のサイトは、文字のサイズを変更すると、設定が反映されてしまうようにCSSが組まれています。
文字が大きくなった分全体が横に伸びて、画面におさまらなくなったというわけでした。

ふと、文字サイズを「大」や「最大」にしているユーザーってどれくらいいるのだろう・・・と気になりました。
HP作成 デザイン | 固定リンク | トラックバック:0 | コメント:0 | このエントリーを含むはてなブックマーク


 WEBデザインセンスを身に着けるためには・・・
だんだんと、ホームページ作成や画像加工技術は身についていっても、やはりデザイン能力というのが追いついていかないです。
つまり「センスがない」ということなのですが、、、

それを磨くためには、
・良いデザインのホームページをたくさん見ること
・実際に自分のデスクトップ内でそれをまねしてみる

というように実戦経験をつまないといけないと思いました。

↓のサイトは、データベースとしてまとめられているのでデザインセンスを身に着けるのに役立ちます。



Webデザイン・Webデザイナーのまとめサイト | Webデザインに優れたサイトのリンク集 ≪デザインリンクデータベース≫





WEBデザインの評価・リンク集 || WEBデザイン・データベース【WEBdeDB】




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

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

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