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

2013.11.172020.10.04

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

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

NetaGear

NetaGear http://netagear.net/

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

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

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

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

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

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

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

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

ブラウザ対応状況

私の環境で確認した限りだと、最新の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について

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

NetaGearをW3C Markup Validatorで確認する