メイン画像
HEADLINE NEWS

画像を一切使わないCSS3で製作した新サイト「NetaGear」!

addclips

netagear_beta_001.png

今回作ってみたのは画像を一切使わずhtmlとCSSだけでサイトをデザインしたサイト「NetaGear」(Beta版)です。NetaGearは管理人の見つけたあらゆるジャンルのおススメのネタやニュースを羅列していくサイトです。常に最新のニュースを提供するために一日3回以上の更新を行っています。ただし、まだBeta版ですので不具合とかあるかもしれません。

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


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

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

その他に製作の過程でCSS3のすごさに改めて感動しました。追加されたものはそんなに多くはないのですが、デザインできる幅はかなり広がっている印象です。極めればCSS3だけでいろいろなものを作り出すことや絵を描くこともできると思います。

XHTMLの記述やW3Cについて


netagear_beta_007.png

コメント欄でhtmlの記述に問題ありって書かれていたので追記します。その点は全く問題なくW3C Markup Validatorも通りますし、ちゃんと「This document was successfully checked as XHTML 1.0 Transitional!」と表示されます。私はStrictがあまり好きではないのでTransitionalで書いていますが、とりあえずWeb標準で書いていることは確かです。

NetaGearをW3C Markup Validatorで確認する

NetaGear閲覧の際の推奨ブラウザ


NetaGearを完全に楽しむためにはCSS3に対応したGoogle Chrome,firefox,Operaなどの一般的なブラウザが必要です。

Google Chrome


netagear_beta_004.png

NetaGearはGoogle Chromeでの閲覧を推奨しています。Google Chromeでアクセスした場合はCSS3デザインの画像を一切使わない最速表示モードで表示されます。

firefox & Opera


netagear_beta_005.png

firefox、Operaは準推奨です。firefox、Operaでアクセスした場合も画像を一切使わない最速表示モードとなりますが、一部非対応の部分があります。

Internet Explorer


netagear_beta_006.png

IEは非推奨です。IEでも一応閲覧は可能ですがGoogle Chrome、firefox、Operaのようなデザインでは表示できません。

NetaGear閲覧におけるブラウザ比較


netagear_beta_001.png

NetaGearはGoogle Chrome用に最適化されていて完全動作するので、Google Chromeが推奨です。firefox、Operaは一部非対応の部分があるので準推奨です。まあ一部といっても90%以上はChromeと同じ動作をしてくれるので問題はないです。

netagear_beta_002.png

NetaGearには一つ残念なことがあります。いや、本当はInternet Explorerが残念なだけなんだけどさ。このサイトの閲覧の際の注意点としてはInternet Explorerは使わないでください。IEさんはCSS3なんてものは全然全く対応していないので、表示がひどいことになりますね、マジでIEは滅んでくれないかな。一応IEでも閲覧できるようにサイト設計はしていますが、他のGoogle Chrome,firefox,Operaなどのブラウザに比べるとデザイン的に天と地との差があるので、非推奨となっています。


ここで今IEを使っている人に言いたい!
そのブラウザを使うのをさっさとやめてくれ。あれはWeb業界の足を引っ張りまくっているお荷物なんだ!他にもいいブラウザはたくさんある。IEを使うメリットなどほとんど皆無という実状を理解しているのか?

NetaGearの裏テーマはアンチIEです。

NetaGearの閲覧を通してIEが良くないという事実を認識していただきたい。実際にIEとChromeやfirefox、Operaと比較してみてください。今の主要ブラウザのほとんどがCSS3に対応してきている現状において、未だにIEは対応なしです。さっさとIE9を出して対応しろよ。

おススメのブラウザ


netagear_beta_003.png

私がIEユーザにおススメしたいのは下の三つです。特徴を簡単に説明すると、Google Chromeが起動最速、firefoxがアドオン最強、Operaが標準で多機能ですかね。本当はもっと詳細に説明したほうがいいのでしょうけど、簡単に説明するとこんな感じです。

Google Chromeのダウンロード
Firefoxのダウンロード
Operaのダウンロード

個人的なことではありますが、最近私の中でChromeの株が上昇しているので一番のおススメはChromeです。ちなみに私はOperaユーザですけどOperaの良さは分かる人にしか分からないですし、Chromeは非常に良いブラウザなので他の人にはChromeを薦めています。

今回の個人的な感想


impression_canvas_001.png

今回のNetaGear Beta版はだいぶ前からtwitterで先行公開していたものなのですが、一応ある程度の改良が済んだのでBeta段階ですけどこのブログでも公開することにしました。一応羅列表示とカテゴリ分け表示ができるようになっています。今現在は更新頻度は一日3回でやっていますので、このサイトよりは確実に更新してますね。

まだ大幅な改良が控えているので、それが終われば正式版として公開できるようになると思いますが、最近忙しいのでいつになることやら〜。

なんとなく方向がずれた気がしますが、NetaGearのコンセプトはつかんで頂けたらうれしいです。ついでに脱IEしてもらえれば幸いに思います。

COMMENT TO THIS ENTRY
2010 05 03

パスワード頑張らないとw


2010 05 03

クローム、良いのだが、頻繁にブルーバックになって、PCが再起動する。自身のクラッシュだけなら良いが、PCも巻き添えってのは、勘弁してくれ〜


2010 05 03

もうパスワードわかんねーw
私は諦めましたのでみなさん頑張ってください。


2010 05 03

OperaはまだHTML5関係がおかしい
Chrome(自分はIRONだけど)は、日に何度もクラッシュでとてもメインでは使えない
Firefoxはメモリ消費もう少し少なく出来ないのかなぁ
メインですけどね

htmlとCSSだけのサイトいいと思います
画像なくても問題ないです かえって新鮮


2010 05 03

今回もスーパーパスワードはあるのかな?
全然見つからない・・・


2010 05 03

Chromeは確かにいいけど文字化け(*1)とクラッシュがFirefoxに比べると多いので標準ブラウザにはできない。おまけにセキュリティツールのため会社ではsandboxオプションなしには表示できないし(*2)。
IEはYahoo系列のサイトを使わないので必要性を感じる機会がなく、私の中ではほとんど存在が消えました。こういうIE不適合のサイトが増えることはWEB記述の標準化につながると思ってるのでがんばってください。
(*1) これはHTMLの記述のほうに問題があるかもしれません。
(*2) Chromeが悪いとはいいません。


2010 05 03

朝調べたときは何もなかったのに今度はなんか出てる
でもこれパスワードかな?


2010 05 03

パスワード見つけたがどういう仕組かわからなくて次も出せるが分からない


2010 05 03

2段階まで・・・


2010 05 03

>>(*1) これはHTMLの記述のほうに問題があるかもしれません。
htmlの記述に問題ありって書かれていたのでコメントします。その点は全く問題なく、ちゃんとW3C Markup Validatorも通りますよ。


2010 05 03

IE8では見つけられないPassってありますか?


2010 05 03

passがIEじゃ見られない仕様になっているんですが・・・


2010 05 03

IEでも出ましたが・・


2010 05 04

やれやれ、やっと○個見つけました。
初日が勝負ですからね〜。

>管理人様
[個人的な感想]のすぐ上の行。
Chromeを薦めてています。→Chromeを薦めています。


2010 05 04

>>A.N.Otherさん
それは大丈夫です。パスワード用に別のサーバを用意しただけなので問題はないです。悪意のあるサイトとかではありません。


2010 05 04

管理人さん、返答ありがとうございました。


COMMENT FORM
   非公開コメント

画像を一切使わないCSS3で製作した新サイト「NetaGear」!のトラックバックURL

この記事にトラックバックする(FC2ブログユーザー)
prev top next


Google Search Box


認証コードを入力してください。

Blog Status

裏技shop DDが雑誌に載りました!

GetMoney!にチャレンジ中!!!
現在開始320日目1024045ポイント
興味がある人はここから

メールアドレス
連絡はこちらに!タレこみも募集中!

Access Ranking

Now Loading...

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

ブログ検索

Download Status : Completion

Download Status : Now loading...

ブログパーツ