1. Home
  2. サイト運営情報
  3. アップデート
  4. 画像を一切使わないCSS3で製作した「NetaGear」を復活しました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
ロジクールのSetPointを拡張する「SetPointPlus」で様々な機能を追加しよう!

ロジクールのSetPointを拡張する「SetPointPlus」で様々な機能を追加しよう!

ロジクールのマウスのボタン設定などを行うソフトであるSetPointですが、このSetPointを拡張して様々な機能を追加することが出来る「SetPointPlus」を紹介したいと思います...

日本未発売のコスパ最高Android Oneスマホの「Xiaomi Mi A1」を使ってみた!

日本未発売のコスパ最高Android Oneスマホの「Xiaomi Mi A1」を使ってみた!

前々から気になっていたAndroid Oneを入手したのでレビューを書きたいと思います。ちなみに今回のAndroid Oneスマホは日本では未発売でコスパ最強の「Xiaomi Mi A1」です。...

GearBest.comを使って海外からスマホやガジェットなどを安く買い物をする方法!

GearBest.comを使って海外からスマホやガジェットなどを安く買い物をする方法!

海外からスマホやガジェットなどを安く輸入したいときに便利なサイトのGearBestを紹介したいと思います。日本では売っていないような珍しいスマホやタブレット、周辺機器な...

サイトのデザインをVer3.5にアップデートしました!

サイトのデザインをVer3.5にアップデートしました!

本日よりShopDDのテンプレートデザインをVer3.5にアップデートしました。今回のアップデートでは見た目はあまり変化がないですが、内部コンテンツを大幅に書き直して高速化...

radikoや超!A&G+など様々なネットラジオを録音できるソフト「AnGe4u」がすごい!

radikoや超!A&G+など様々なネットラジオを録音できるソフト「AnGe4u」がすごい!

今はラジオもネット進出している時代で、昔以上にラジオは身近な存在になっています。そんな中でもリアルタイムで聞くのは難しいことも多々あり、録音してあとで聞きたいと...

ブラウザ上で簡単にロゴをデザインできるサイト「DesignEvo」が便利!

ブラウザ上で簡単にロゴをデザインできるサイト「DesignEvo」が便利!

DesignEvoは、誰でも簡単に魅力的でユニークなロゴを創り出すために、4000以上のテンプレートを備えた無料のオンラインロゴ製作サイトです。ブラウザを使ってWebサイト上で...

コピー禁止の保護されたPDFファイルから簡単にテキストをコピーする方法!

コピー禁止の保護されたPDFファイルから簡単にテキストをコピーする方法!

PDFファイルと言えば幅広く使われているファイル形式ですが、中にはセキュリティ保護によって内容をコピーできないPDFも存在します。今回はPDFセキュリティ保護の「内容の...

Amazonプライム特典の「Twitch Prime」で毎月無料でゲームをもらう方法!

Amazonプライム特典の「Twitch Prime」で毎月無料でゲームをもらう方法!

Amazonプライム会員の特典として提供されている「Twitch Prime」では、追加料金なしで毎月ゲームが無料で手に入る会員限定のまったく新しいキャンペーン、「Primeでゲーム...

コスパ最強のdtab d-01JがついにAndroid 7.0へアップデートされました!

コスパ最強のdtab d-01JがついにAndroid 7.0へアップデートされました!

昨年購入したコスパ最強タブレットのdtab Compact d-01JがついにAndroid 7.0 Nougat(ヌガー)へアップデートが開始されました。タブレットの場合は画面も大きいのでスマホ以...

PS3のコントローラーをXInput Wrapper for DS3でパソコンに簡単に接続する方法!

PS3のコントローラーをXInput Wrapper for DS3でパソコンに簡単に接続する方法!

以前このブログではパソコンとPS3コントローラーをBluetooth接続して遊べるMotionJoy!という記事で紹介した通り、MotioninJoyを使ったPS3コントローラーをパソコンで使う...

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

MENU

NetaGear

Pure Css Design

Access Ranking

Now Loading...

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

Amazon

Now Loading...