ShopDDhopDDURAWAZAsHomeNetaGearCategoryGekiyasuContactAboutHome運営情報アップデート画像を一切使わないCSS3で製作したNetaGearを復活しました!画像を一切使わないCSS3で製作したNetaGearを復活しました!2013.11.172020.10.042010年から1年間ほど公開していた画像を一切使わずhtmlとCSSだけでサイトをデザインしたサイト「NetaGear」をよりパワーアップさせて復活させました。NetaGearは管理人の見つけたあらゆるジャンルのおススメのネタやニュースを羅列していくサイトです。常に最新のニュースを提供するために一日複数回の更新を行っています。コンセプトは「画像を一切使わないデザイン」と「高速表示」を目標として製作しました。サイト表示の中で最も読み込み量が多く時間がかかるのは画像なので、画像を使わないでサイトを作れば最速表示が可能となるわけです。画像を使わなければ読み込みが速くなるかわりに見た目がしょぼくなるというデメリットも存在していたのですが、近年各ブラウザのCSS3対応が進んだことにより画像を使わないデザインでもそれなりのものが作れるようになりました。http://netagear.net/このサイトは3年前にCSS3でがんばれば画像を使わなくてもそこそこカッコいいサイト作りができるという事を知って欲しいという目論みがあり、画像なしのデザインにチャレンジしたものを復活させたものです!以前から画像を使わないサイト作りという考え方があったのは確かですが、それでもCSS3がないとすべてが四角で製作しなければならないという厳しい条件が突きつけられるので、あんまりチャレンジする人がいなかったのも事実です。実際に作るのは大変でしたが、CSS3になれればかなりいろいろなことができるようになります。NetaGearのデザインではシンプルでちょっと立体的に作ってみようと思い、サイドとフッター辺りは立体的に見えるように作ってみました。個人的にはシンプルなレイアウトで気に入っています。上のRSSとTwitterとFacebookは画像が使われているように見えますが、実はこれ画像じゃないんです。Fontsと呼ばれるフォントが使われています。http://webiconfonts.appspot.com/今回は記事の部分にソーシャルな要素を加えました。記事のタイトルの下には青いゲージが表示されていますが、これはTwitterのRT数、はてなブックマーク数、Facebookのいいね数、NetaGearでのリンククリック数を元に人気度を表示するようになっています。ちなみに右上にはカテゴリーごとに表示する「Category」タブ、NetaGearでのクリック数順に表示する「Click」タブ、Twitter、はてブ、Facebookなどのソーシャルでの人気順の「Social」タブなどのタブが用意されており、ソート可能になりました。今回はCSSアニメーションを取り入れたかったので上のギアと下の映画のフィルムの部分はアニメーションするようになっています。このようにCSSだけで動きに関してもいろいろできます。映画のフィルムの部分はIEとFirefoxではブラウザの仕様上で丸になってしまうのが残念ですが、それ以外はすべてのブラウザでほぼ同等に表示できています。それ以外にも記事投稿機能を新しく追加しました。あなたのおすすめ記事を投稿ができます。投稿した記事は、私がチェックして面白いものは追加されるようになっているので、面白い記事やおすすめの記事があればぜひ投稿してください。Chrome、Opera、firefox、IE11での閲覧ではほぼ同等に表示できることが確認できました。3年前はIEだけまともに表示できないので馬鹿にしていましたが、IE11はかなりCSS3に対応しています。IE11はCSS3のAnimationの動作が少しカクつく欠点もありますが、ここ3年間で一番成長したブラウザだと思います。Chrome、Operaが推奨です。Operaのダウンロード■firefox、IE11は準推奨です。ダウンロード実際にサイトを閲覧する上では問題ありませんが、firefox、IE11は一部で私の意図した表示と異なるので準推奨としています。この辺りはブラウザ間の差異なので仕方がないのですが。HTML5!」と表示されます。HTMLの記述についてはギアの部分は少し無茶な記述で一部空タグなどを用いているのであれですが、CSSだけで表現するには限界があるのでここはしょうがないですね。Validatorで確認する今回の個人的感想&まとめみなさんお久しぶりです。約2週間ぶりの記事になりますが、最近記事が書けていなかった理由はこのNetaGearを復活させるためにいろいろとコードを書いていたからだったのです。前々から復活させる復活させるといいつつなんだかんだで2年も経ってしまったとは・・・。NetaGear製作の過程でCSS3のすごさに改めて感動しましたね。最近はブラウザの対応が進んでいるので、デザインできる幅はかなり広がっている印象です。昔は角を丸めるのもいろいろと面倒だったのに今は1行追加するだけでできますからね。本当に便利になったものですね。Tagサイト運営情報NetaGearCSSHtmljQueryWebデザインわぶさんパソコンやスマホなどのガジェットに興味があり、大学で情報工学の勉強してシステムエンジニアに。ブログ歴は15年以上。スキルレベル4「情報セキュリティスペシャリスト」や「ネットワークスペシャリスト」などを取得。Ranking当ブログにリンクしてくださっているサイトの中でアクセス数の多いサイト上位15位が表示されます。