今回作ってみたのは画像を一切使わずhtmlとCSSだけでサイトをデザインしたサイト「NetaGear」(Beta版)です。NetaGearは管理人の見つけたあらゆるジャンルのおススメのネタやニュースを羅列していくサイトです。常に最新のニュースを提供するために一日3回以上の更新を行っています。ただし、まだBeta版ですので不具合とかあるかもしれません。
コンセプトは「デザインはかっこよく」かつ「画像を一切使わない最速表示」を目標として製作しました。サイト表示の中で最も読み込み量が多く時間がかかるのは画像なので、画像を使わないでサイトを作れば最速表示が可能となるわけです。ただし、画像を使わなければ読み込みが速くなるかわりに見た目がしょぼくなるというデメリットも存在していたわけですが、ここ最近は各ブラウザ(IEを除く)のCSS3対応が進み、CSS3が普及してきたことにより画像を使わないデザインでもそれなりのものが作れるようになりました。
- 画像を一切使わずにCSS3だけでドラえもんを描いてみた!(05/04)
- 画像を一切使わないCSS3で製作した新サイト「NetaGear」!(05/03)
- 月末恒例ランキング - 2010年4月のアクセス解析!(05/01)
- 50000000Hit記念プレゼント企画がスタート!(04/30)
- PHILIPS(フィリップス) のヘッドフォン SHL8800を使ってみた!(04/20)
- Internet Explorer 9 プラットフォームプレビュー版を試してみた!(04/08)
- 月末恒例ランキング - 2010年3月のアクセス解析!(04/07)
- 簡単にサイトの表示速度を高速化する方法!(04/01)
- 本日より美少女ゲーム「se・きらら」の無料配布を開始!(03/26)
- PS3用リモコンの「BDリモートコントローラ」を買ってみた!(03/24)
- PS3用地デジチューナー「torne」を買ってみた!(03/21)
- GIGAZINEで「DivX Plus Pro」のシリアルナンバーを無料配布中!(03/17)
- 登録不要の使い捨てメールアドレス「ナナチャンメール」!(03/15)
- 簡単にインストール情報を削除できるソフト「Windows Installer CleanUp」!(03/07)
- 地球上で最速のブラウザ「Opera 10.50」正式版が公開!(03/04)
- 月末恒例ランキング - 2010年2月のアクセス解析!(03/03)
- はてなブックマーク数の勢力を3D仮想都市で表示してくれる「Blogopolis」!(02/28)
- 2010年のトップ画像の紹介!(02/27)
- 涼宮ハルヒの憂鬱のDVDがAmazonで投売り?最大80%offで販売中!(02/20)
- BRAVIAのDLNA機能でパソコン内のMP4やTSファイルを再生する方法!(02/20)
- PS3用地デジチューナ「torne」の発売日が3月18日に決定!(02/17)
- 地球上で最速!?JavaScriptが8倍高速になった「Opera 10.50」beta版が公開!(02/14)
- Googleトップページのロゴがバンクーバーオリンピック仕様に!(02/14)
- 祝50000000Hit!(02/12)
- 冷し中華始めました・・・じゃなくてTwitter始めました!(02/11)
画像を一切使わないCSS3で製作した新サイト「NetaGear」!
今回はCSS3でがんばれば画像を使わなくてもカッコいいサイト作りができるという事を知って欲しいという目論みがあり、今回は画像なしのデザインにチャレンジしてみました!以前から画像を使わないサイト作りという考え方があったのは確かですが、それでもCSS3がないとすべてが四角で製作しなければならないという厳しい条件が突きつけられるので、あんまりチャレンジする人がいなかったのも事実です。
実際に作るのは大変でしたが、CSS3になれればかなりいろいろなことができるような気がしますね。NetaGearのデザインではシンプルでちょっと立体的に作ってみようと思い、サイドとフッター辺りは立体的に見えるように作ってみました。個人的にはシンプルなレイアウトで気に入っています。
その他に製作の過程でCSS3のすごさに改めて感動しました。追加されたものはそんなに多くはないのですが、デザインできる幅はかなり広がっている印象です。極めればCSS3だけでいろいろなものを作り出すことや絵を描くこともできると思います。
XHTMLの記述やW3Cについて
コメント欄で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はGoogle Chromeでの閲覧を推奨しています。Google Chromeでアクセスした場合はCSS3デザインの画像を一切使わない最速表示モードで表示されます。
firefox & Opera
firefox、Operaは準推奨です。firefox、Operaでアクセスした場合も画像を一切使わない最速表示モードとなりますが、一部非対応の部分があります。
Internet Explorer
IEは非推奨です。IEでも一応閲覧は可能ですがGoogle Chrome、firefox、Operaのようなデザインでは表示できません。
NetaGear閲覧におけるブラウザ比較
NetaGearはGoogle Chrome用に最適化されていて完全動作するので、Google Chromeが推奨です。firefox、Operaは一部非対応の部分があるので準推奨です。まあ一部といっても90%以上はChromeと同じ動作をしてくれるので問題はないです。
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を出して対応しろよ。
おススメのブラウザ
私がIEユーザにおススメしたいのは下の三つです。特徴を簡単に説明すると、Google Chromeが起動最速、firefoxがアドオン最強、Operaが標準で多機能ですかね。本当はもっと詳細に説明したほうがいいのでしょうけど、簡単に説明するとこんな感じです。
Google Chromeのダウンロード
Firefoxのダウンロード
Operaのダウンロード
個人的なことではありますが、最近私の中でChromeの株が上昇しているので一番のおススメはChromeです。ちなみに私はOperaユーザですけどOperaの良さは分かる人にしか分からないですし、Chromeは非常に良いブラウザなので他の人にはChromeを薦めています。
今回の個人的な感想
今回のNetaGear Beta版はだいぶ前からtwitterで先行公開していたものなのですが、一応ある程度の改良が済んだのでBeta段階ですけどこのブログでも公開することにしました。一応羅列表示とカテゴリ分け表示ができるようになっています。今現在は更新頻度は一日3回でやっていますので、このサイトよりは確実に更新してますね。
まだ大幅な改良が控えているので、それが終われば正式版として公開できるようになると思いますが、最近忙しいのでいつになることやら〜。
なんとなく方向がずれた気がしますが、NetaGearのコンセプトはつかんで頂けたらうれしいです。ついでに脱IEしてもらえれば幸いに思います。
パスワード頑張らないとw
クローム、良いのだが、頻繁にブルーバックになって、PCが再起動する。自身のクラッシュだけなら良いが、PCも巻き添えってのは、勘弁してくれ〜
もうパスワードわかんねーw
私は諦めましたのでみなさん頑張ってください。
OperaはまだHTML5関係がおかしい
Chrome(自分はIRONだけど)は、日に何度もクラッシュでとてもメインでは使えない
Firefoxはメモリ消費もう少し少なく出来ないのかなぁ
メインですけどね
htmlとCSSだけのサイトいいと思います
画像なくても問題ないです かえって新鮮
今回もスーパーパスワードはあるのかな?
全然見つからない・・・
Chromeは確かにいいけど文字化け(*1)とクラッシュがFirefoxに比べると多いので標準ブラウザにはできない。おまけにセキュリティツールのため会社ではsandboxオプションなしには表示できないし(*2)。
IEはYahoo系列のサイトを使わないので必要性を感じる機会がなく、私の中ではほとんど存在が消えました。こういうIE不適合のサイトが増えることはWEB記述の標準化につながると思ってるのでがんばってください。
(*1) これはHTMLの記述のほうに問題があるかもしれません。
(*2) Chromeが悪いとはいいません。
朝調べたときは何もなかったのに今度はなんか出てる
でもこれパスワードかな?
パスワード見つけたがどういう仕組かわからなくて次も出せるが分からない
2段階まで・・・
>>(*1) これはHTMLの記述のほうに問題があるかもしれません。
htmlの記述に問題ありって書かれていたのでコメントします。その点は全く問題なく、ちゃんとW3C Markup Validatorも通りますよ。
IE8では見つけられないPassってありますか?
passがIEじゃ見られない仕様になっているんですが・・・
IEでも出ましたが・・
やれやれ、やっと○個見つけました。
初日が勝負ですからね〜。
>管理人様
[個人的な感想]のすぐ上の行。
Chromeを薦めてています。→Chromeを薦めています。
>>A.N.Otherさん
それは大丈夫です。パスワード用に別のサーバを用意しただけなので問題はないです。悪意のあるサイトとかではありません。
管理人さん、返答ありがとうございました。
Now loading...
05/04 13:34.58sss:画像を一切使わずにCSS3だけでドラえもんを描いてみた!
05/04 13:23.03pko:画像を一切使わずにCSS3だけでドラえもんを描いてみた!
05/04 13:21.48kanata:画像を一切使わずにCSS3だけでドラえもんを描いてみた!
05/04 12:56.11non2:画像を一切使わずにCSS3だけでドラえもんを描いてみた!
05/04 12:46.21しょぐらし:画像を一切使わずにCSS3だけでドラえもんを描いてみた!
05/04 11:57.53A.N.Other:画像を一切使わないCSS3で製作した新サイト「NetaGear」!
05/04 01:19.28管理人:画像を一切使わないCSS3で製作した新サイト「NetaGear」!
05/04 00:12.03たっちゃん:画像を一切使わないCSS3で製作した新サイト「NetaGear」!
05/03 20:59.11near:月末恒例ランキング - 2010年4月のアクセス解析!
05/03 20:52.05名無しさん:画像を一切使わないCSS3で製作した新サイト「NetaGear」!
05/03 20:36.48名無しさん:画像を一切使わないCSS3で製作した新サイト「NetaGear」!
05/03 16:24.52たっちゃん:画像を一切使わないCSS3で製作した新サイト「NetaGear」!
05/03 13:56.00管理人:画像を一切使わないCSS3で製作した新サイト「NetaGear」!
05/03 13:55.52初書き込み:画像を一切使わないCSS3で製作した新サイト「NetaGear」!