1. Home
  2. サイト運営情報
  3. アップデート
  4. 画像を一切使わないCSS3で製作した「NetaGear」を復活しました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
HTML+CSSだけで実装された走る馬のアニメーションがすごい!

HTML+CSSだけで実装された走る馬のアニメーションがすごい!

今回紹介するのはHTML+CSSだけで走る馬のアニメーションを実装されているClip Clop Clippity Clop [CSS Only]という作品です。CodePenに実物がアップロードされているので...

Bluetooth対応のスマート体重計・体組成計が送料込み1290円の大特価!

Bluetooth対応のスマート体重計・体組成計が送料込み1290円の大特価!

現在AmazonではBluetooth対応のスマート体重計・体組成計がなんとクーポンコードを使用することで衝撃の1290円で販売されています。スマート体重計・体組成計はスマホやタ...

DearMob iPhoneマネージャーでiTunesなしで簡単に写真を転送する方法!

DearMob iPhoneマネージャーでiTunesなしで簡単に写真を転送する方法!

前回はDearMob iPhoneマネージャーでiPhoneやiPadを簡単にバックアップする方法を紹介しましたが、今回の記事ではiTunesを使用せずにDearMob iPhoneマネージャーで簡単に写...

BOOK☆WALKERで電子書籍が50%還元されるキャンペーン!9/11までに配信された全作品対象!

BOOK☆WALKERで電子書籍が50%還元されるキャンペーン!9/11までに配信された全作品対象!

BOOK☆WALKERでは、BOOK☆WALKERとニコニコ書籍のスマホアプリの統合1周年を記念した「祝!結婚1周年!感謝のコイン最大50%還元キャンペーン」を実施しています。このキャン...

Audio Input FX LEを期間限定でプレゼントするキャンペーンを実施中!

Audio Input FX LEを期間限定でプレゼントするキャンペーンを実施中!

ニコニコ動画などの運営しているドワンゴのニコトクというサービスで、Amazonなどで通常販売価格8000円の音声マルチエフェクトソフトウェア「Audio Input FX LE」が期間限...

無料版あり!DVDFab動画ダウンローダーでYouTube動画を簡単ダウンロード!

無料版あり!DVDFab動画ダウンローダーでYouTube動画を簡単ダウンロード!

前回の記事では「DVDFab 11 Blu-rayコピー」についての紹介を行いましたが、今回はDVDFab動画ダウンローダー(DVDFab Downloader)について紹介したいと思います。DVDFab 11 ...

電子書籍が50%OFFでさらにコイン50%還元のニコニコカドカワ祭り2019!初回は100%還元!

電子書籍が50%OFFでさらにコイン50%還元のニコニコカドカワ祭り2019!初回は100%還元!

現在、電子書籍ストアのBOOK☆WALKERでは、2019年9月4日までに配信されたKADOKAWA作品が50%コイン還元、それに加えて15,000点以上が50%OFFで購入できるニコニコカドカワ祭...

激安10インチ中華タブレットの「ALLDOCUBE iPlay10 Pro」を使ってみた!

激安10インチ中華タブレットの「ALLDOCUBE iPlay10 Pro」を使ってみた!

最近10インチで激安タブレットを探していたのですが、10インチタブレットでなんと価格が1万円ちょっとというALLDOCUBE iPlay10 Proをゲットしたのでレビューを書きたいと思...

「iZotope Ozone 8 Elements」が無料でゲットできるキャンペーンが実施中!

「iZotope Ozone 8 Elements」が無料でゲットできるキャンペーンが実施中!

現在SONICWIREでは、省機能/高性能なマスタリングソフトウェアiZotope ( アイゾトープ )の「Ozone 8 Elements」を無償でプレゼントするキャンペーンを実施中です!Windows/...

NetaGear RSS News

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で確認する


今回の個人的感想




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

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

Related article

COMMENT TO THIS ENTRY

Most Popular

Now loading...

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

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