ShopDD

Now Loading

Now Loading

RSS Article

Now Loading

Article

画像を一切使わないCSS3で製作した「NetaGear」を復活しました!

netagear_version2_001.png

2010年から1年間ほど公開していた画像を一切使わずhtmlとCSSだけでサイトをデザインしたサイト「NetaGear」をよりパワーアップさせて復活させました。NetaGearは管理人の見つけたあらゆるジャンルのおススメのネタやニュースを羅列していくサイトです。常に最新のニュースを提供するために一日複数回の更新を行っています。

コンセプトは「画像を一切使わないデザイン」と「高速表示」を目標として製作しました。サイト表示の中で最も読み込み量が多く時間がかかるのは画像なので、画像を使わないでサイトを作れば最速表示が可能となるわけです。ただし、画像を使わなければ読み込みが速くなるかわりに見た目がしょぼくなるというデメリットも存在していたのですが、近年各ブラウザのCSS3対応が進んだことにより画像を使わないデザインでもそれなりのものが作れるようになりました。

NetaGear


netagear_version2_001.png

NetaGear
http://netagear.net/

このサイトは3年前にCSS3でがんばれば画像を使わなくてもそこそこカッコいいサイト作りができるという事を知って欲しいという目論みがあり、画像なしのデザインにチャレンジしたものを復活させたものです!以前から画像を使わないサイト作りという考え方があったのは確かですが、それでもCSS3がないとすべてが四角で製作しなければならないという厳しい条件が突きつけられるので、あんまりチャレンジする人がいなかったのも事実です。

実際に作るのは大変でしたが、CSS3になれればかなりいろいろなことができるようになります。NetaGearのデザインではシンプルでちょっと立体的に作ってみようと思い、サイドとフッター辺りは立体的に見えるように作ってみました。個人的にはシンプルなレイアウトで気に入っています。

netagear_version2_006.png

上のRSSとTwitterとFacebookは画像が使われているように見えますが、実はこれ画像じゃないんです。ソースコードを見てもらえばわかるのですが、Web Icon Fontsと呼ばれるフォントが使われています。

Web Icon Fonts
http://webiconfonts.appspot.com/

netagear_version2_002.png

今回は記事の部分にソーシャルな要素を加えました。記事のタイトルの下には青いゲージが表示されていますが、これはTwitterのRT数、はてなブックマーク数、Facebookのいいね数、NetaGearでのリンククリック数を元に人気度を表示するようになっています。

ちなみに右上にはカテゴリーごとに表示する「Category」タブ、NetaGearでのクリック数順に表示する「Click」タブ、Twitter、はてブ、Facebookなどのソーシャルでの人気順の「Social」タブなどのタブが用意されており、ソート可能になりました。

netagear_version2_003.png

今回はCSSアニメーションを取り入れたかったので上のギアと下の映画のフィルムの部分はアニメーションするようになっています。このようにCSSだけで動きに関してもいろいろできます。映画のフィルムの部分はIEとFirefoxではブラウザの仕様上で丸になってしまうのが残念ですが、それ以外はすべてのブラウザでほぼ同等に表示できています。。

netagear_version2_004.png

それ以外にも記事投稿機能を新しく追加しました。あなたのおすすめ記事を投稿ができます。投稿した記事は、私がチェックして面白いものは追加されるようになっているので、面白い記事やおすすめの記事があればぜひ投稿してください。


ブラウザ対応状況


Dataram_RAMDisk_060.png

私の環境で確認した限りだと、最新のGoogle Chrome、Opera、firefox、IE11での閲覧ではほぼ同等に表示できることが確認できました。3年前はIEだけまともに表示できないので馬鹿にしていましたが、IE11はかなりCSS3に対応しています。ただし、IE11はCSS3のAnimationの動作が少しカクつく欠点もありますが、ここ3年間で一番成長したブラウザだと思います。

■Google Chrome、Operaが推奨です。
→Google Chromeのダウンロード
→Operaのダウンロード

■firefox、IE11は準推奨です。
→Firefoxのダウンロード
→Internet Explorer 11 のダウンロード

実際にサイトを閲覧する上では問題ありませんが、firefox、IE11は一部で私の意図した表示と異なるので準推奨としています。この辺りはブラウザ間の差異なので仕方がないのですが。。。


HTMLの記述やW3Cについて


netagear_version2_005.png

W3C Markup Validatorでは、ちゃんと「This document was successfully checked as HTML5!」と表示されます。しかし、HTMLの記述についてはギアの部分は少し無茶な記述で一部空タグなどを用いているのであれですが、CSSだけで表現するには限界があるのでここはしょうがないですね。

→NetaGearをW3C Markup Validatorで確認する


今回の個人的感想


impression_canvas_001.png

みなさんお久しぶりです。約2週間ぶりの記事になりますが、最近記事が書けていなかった理由はこのNetaGearを復活させるためにいろいろとコードを書いていたからだったのです。前々から復活させる復活させるといいつつなんだかんだで2年も経ってしまったとは・・・。

NetaGear製作の過程でCSS3のすごさに改めて感動しましたね。特に最近はブラウザの対応が進んでいるので、デザインできる幅はかなり広がっている印象です。昔は角を丸めるのもいろいろと面倒だったのに今は1行追加するだけでできますからね。本当に便利になったものですね。

Related article

COMMENT TO THIS ENTRY

Most Popular

Now loading...

MENU



Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位50位が表示されます。今ならリンクするだけで簡単に上位に表示されます。

Amazon

Now Loading...