WEBデザインに役立つ、いけてるサイト、かっこいいサイト、おしゃれなサイト、クールなサイトなどを集めたWEBデザイナーのためのWEBデザインリンク集。WEBデザインの参考にどうぞ

フルCSSでサイトを構築する事が当たり前になりつつある今日この頃。

先ほどCSSでの落とし穴を見つけてしまいました。

よくサイト全体をセンタリングするテクニックがありますが、ここに落とし穴。

CSSを記述するときに一度html要素やbody要素のマージンやパディングをクリアーしてから書く人が多いと思うのですが、その行為が落とし穴です。

以下が、現象と回避策となっています。

「Netscapeでコンテンツ幅以下にブラウザを縮めると縮めた分左に隠れてしまう」という現象が起きてしまうらしいです。

解決方法はpaddingの設定を0以外にして、コンテンツの幅をbodyにも指定してあげます。

body {margin:0;padding:0 1px;width:700px;}

引用元：ochanoco blog >> よく使うCSSのプロパティ初期化で

とりあえず下の例をネットスケープで見てもらえば分かると思います。

ちなみにNetscape7でもNetscape6でも同じ現象は起きます。

追記：

max-widthで100%指定をする方法でも回避ができるとの事。

こっちの方がスマートっぽいけど、max-widthを100%以外に設定するときはNGかな。。。　まぁそんなにないか

»左端が消える

»左端が消えない

»左端が消えない（max-widthを100%指定）

»Mozilla 5.0系 CSSバグリスト

google.co.jpとgoogle.comでの検索結果の話です。
昔はgoogle.co.jpで「ウェブ全体から検索」を選んで検索すると、google.comの検索結果と同じだったのに、最近はgoogle.co.jpの結果と、google.comでの結果が異なっている。
たとえば"UTF-8"のキーワードで検索してみると、google.comで検索した場合には一番目に"Unicode Home Page"がくる。
これはUTF-8で検索した場合に当然1番目にくるだろうなって結果ですね。
でもgoogle.co.jpで検索すると、SourceForge.jpの変なアプリのページに行きます。

この検索結果をみると日本語サイトが優先されて出てきている気がする。Unicode Home Pageは5番目です。
Unicode Home PageよりSourceForge.jpが上に出てくるなんておかしいでしょ〜
コンテントネゴシエーションとか関係してるんかな？？

»Google.co.jp
»Google.com

木達さんが講演するという事で参加申し込みしたんだけど仕事でいけなかった。。。
WaSP cafeも行けなかったしなぁ、、、木達さんにはいろいろ聞きたいことがあるんだけど。
セミナーの資料があったので一応。

»Web標準時代に求められるサイト構築法の資料

フリーのアイコン集“SILK ICONS”
1000種類もあるので見ているだけでも楽しいです。
いろいろな用途に使えそうなので非常に便利かと思います。


»famfamfam.com: Silk Icons

鉄筋の代わりに竹を使っていたなんて信じられない。
WEBの構造も偽装してたらこのぐらい話題になれば、、、
んな事はまぁ無理か〜〜

»Yahoo!ニュース - 西日本新聞 - 耐震構造どころか…　中国で竹筋コンクリート　高層分譲住宅で露見

英語がわからない人でもなんとなく笑えるCMです。
さすがアップルって感じ。
PCとMacが人間に扮して会話してるんだけど、やりとりがオモシロイ。
PCがどことなくビル君に似ているのは気のせい。

»Apple - Get a Mac - Watch The TV Ads

昨日も書いたParallels Desktopですが、今日もまたYouTubeで発見してしまいました。
今回のParallels Desktopは液晶を叩くとOSの切り替えができるってビデオ。
コレ本当なのかね？
噂によると、MacBook Proには落下検知センサーがついてるから、その仕組みを利用しているって事らしいんだけど。。。

»YouTube - SmackBook

フォーカス画像を変更いたしました。

今回のクリエーターさんは宮川 雄一さんです。

多方面で活躍されている方だけにクオリティーの高いイラストを提供していただきました。

毎回毎回イケてるデザインのイラストを提供してもらい本当に光栄です。ちなみに過去のフォーカス画像のページもありますので、こちらもご覧になってください。

まだ知らない人もいるかと思うので、とりあえずエントリー。
今までWinIEだけに適用できていたアンダースコアハックですが、IE7になるとこれが使えなくなります。
今まで使っていたサイトには大きな打撃になるやもしれません。
まぁ元々アンダースコアハックを使わないと表示崩れを起こすIEに問題があったのでIE7は正常に戻っただけなんですけどね。
デジタルARENAの記事にわかりやすく書いてあるので見てみるといいかも。

»Internet Explorer 7ベータ2の不具合からWebデザイン業界の混乱が見えてきた / デジタルARENA

YouTubeでParallels Desktopを実行しているビデオがありました。
これみたら、MacBook欲しくなっちゃうね。アンチマックなんだけどな〜

»YouTube - Fast OS Switching on MacBook

メモです。

»Ubuntu Japanese Team - Linux for Human Beings

一部のGoogleサーバーでは新しい検索結果画面になっているようです。
ページランクなんかも検索結果に表示されるとかされないとか。。。
詳しくはGIGAZINEに書いてあります。

»GIGAZINE - Googleの新しい検索結果レイアウトを体験する方法

最近、Yahooの検索エンジンから訪れるユーザーが劇的に増えている。
以前は、Googleが80%、Yahooが15%、残りがMSN、GOO、Infoseek、エキサイトなどなどで、WEBデザイナーはやっぱりGoogle派なんだな〜YST使えないし〜なんて思ってたんだけど。
今では、Googleが50%、Yahooが35%、残りがMSN、GOO、Infoseek、エキサイトなどなどと、Yahooユーザーが一気に増えている。
これはなんなんだろ？
YSTの検索技術が向上してきているからなのか？

そこでふと思ったのが、YST上でikesaiのタイトルを変更したからユーザーが増えたって事。

Googleだと「WEBデザイン」のキーワードで上位に食い込んできたけど、YSTでは全然出てこない。2006年4月の時点では600番目ぐらいだった。。。
その原因は、Yahooディレクトリに登録した際にYahoo! JAPANサーファーに「ikesai.com」と登録されてしまったからだ。
登録したときのタイトルが「ikesai.com」だったからしょうがないんだけど・・・。
でもYSTのクローラーがインデックスした下層ページは「○○○ --- WEBデザインのリンク集 : ikesai.com」ってなってるんだよね〜
それを修正できれば「WEBデザイン」のキーワードで上位を狙えるはずだと思い、Yahooの中を探していると案外簡単に見つけることができました。
ちゃんと変更依頼フォームってのがあるんですね！　Yahooさん
しかも修正作業を2、3日でやってくれるし、かなり高感度アップです！

ま、これがYSTユーザー増加の要因かと、、
キーワードも130番目ぐらいにあがってきたし、言う事なし！！
これからYSTも使っていこう。

»Yahoo! JAPAN - 登録情報の変更・削除

下のタグでテキストを囲むと

<!--googleoff: index-->
この部分はインデックスされない。
<!--googleon: index-->

Googleにはインデックスされなくなり検索でヒットしなくなるようです。

上記タグで囲む事によって、その間のテキストについてはインデックスを作らなくなるとのこと。ヘッダやフッタ、ナビゲータ部分を囲む事によって、本文と関係ない部分で検索されないようにする事が出来る。

indexの部分をsnippetにすると、タグで囲んだ部分はgoogleの検索結果で表示される要約部分に利用されなくなる。anchorとするとリンク先ページとリンク文字との関連をインデックス化しなくなる。allとするとindex, snippet, anchor全てを付けたのと同じ効果となる。

引用元：Mac OS X メモ Blog: googleoff, googleonについて

今日のCSS Niteは行ったほうがいいです。間違いない。

»CSS Nite公式ブログ: CSS Nite Vol.8（2006年5月）次回

使ってみたんだけど、コレなかなかいいかも。
仕事でちょこっとメモっておきたい事とか結構あるので助かります。
今までテキストファイルとかに書いてたけど、これならブラウザからすぐアクセスできるし、家に帰っても見れる。
Firefoxならエクステンションも用意されているからもっと便利です。

»Google Notebook

うおぉぉぉぉ〜
コレほし〜ぜぇぇぇぇ
でも1800ドルは高いな。。。
UMPCで良かった気がするけども。

»ソニー、ポケットサイズの新型PCなどを発表へ - CNET Japan

以前にIE7 Beta2でikesaiを見たところナビゲーションリンクの挙動がおかしいと報告ありましたが、IE7 Beta2 日本語版にアップデートしたら通常通り元に戻っていました。
なんでもCSSの@importのバグだったそうです。なんともIEらしいというかなんというか。。。
まぁそのバグは解決したのでいいのですが、もう一つ衝撃的な事が起こりました。
何故か右側部分がウィンドウからはみ出ているではないですか！
これはイカンと修正を試みますがまったく直らず。普通にwidthを100%にしているだけではみ出すなんてありえない。
いや、IEだからありえるのか？でもこんなバグがあるわけがないとしばらく悩んでいたら。
なんとなんとIE7に付いているズーム機能がデフォルトで125%になっていました。。。
なぜ125%になってやがんだ〜〜って叫びたかったです。
しかもこれってCtrl + スクロールボタンでないとズームってできないのかな？
ステータスバーにそんな機能なかったんだけど。

ついでにIE7をスタンドアローンで使うための技を掲載しているサイトをご紹介。
ちょっとメンドクサイ作業は毎回発生しますが、IE6をまだ使いたいという人にはおススメ。
IE7 beta2 previewと書いてありますが、僕が試したところIE7 Beta2 日本語版でもちゃんと動作しました。ですが一応自己責任でお願いします。

»IE7 beta2 preview をインストールしないで使う

「利用者が情報提供者」
Web1.0：コンテンツプロバイダや個人などのサイト運営者による一方的な情報提供。
Web2.0：ブログや口コミに代表されるような、利用履歴がそのまま他ユーザーのコンテンツになる。

「ユーザー主導の情報の整理ができる」
Web1.0：サイト提供者が分類するカテゴリに従って、Yahoo!ディレクトリのようにユーザーが情報を探す。
Web2.0：ユーザーの利用につれてブックマークが整理されていくソーシャルブックマーク。

「より高度なサービス」
Web1.0：HTML、CGIなどを使ってインターネットサービスを提供。
Web2.0：Ajax、DHTMLなどの技術を用いて、よりリッチなサービス。GoogleMapやGmailなどが例として挙げられる。

「脱2:8の法則」
Web1.0：「2割の商品が売上の8割を占める」的な市場原理が働いていた。
Web2.0：Web1.0でいうところの「8」側のニッチな商品と顧客基盤でビジネスが動く。

「みんなが言うことが正しい」
Web1.0：信頼できる情報提供者が発信する情報が正しく、著作権により守られている。技術は特許により守られている。
Web2.0：Wikipediaのように、多くの人が発信する情報の信頼性が高まるような情報が作られ、それを享受できる。

ウェブ進化論そのままな気もするが・・・。
てかWEB2.0の定義はできない気もする。。

»livedoor ニュース - サルでも分かるWeb2.0の世界観

最近、周りの影響もあってWEBの根本的な部分を知りたくなってきました。

まずは、W3Cの仕様書を読み（まだ読破してないけど。。）

次にRFCを読もうと思ってます。

RFCってのはRequest For Commentの略です。コメント求む！ってな事かね。

RFCとは？

　インターネットに関する技術の標準を定める団体であるIETFが正式に発行する文書。

　IP(RFC 791)、TCP(RFC 793)、HTTP(RFC 2616)、FTP(RFC 959など)などインターネットで利用されるプロトコルや、その他インターネットに関わるさまざまな技術の仕様・要件を、通し番号をつけて公開している。

　RFCは連日のように発行されているため、どの文書が最新の仕様を指し示しているのか、RFC本体からは分かりにくいことがある。このため、IETFでは定期的に技術の標準化動向を一覧できるRFCを発行している。標準化動向をまとめたRFCの通し番号は100の倍数になる慣例がある。

引用元：RFCとは 【Request For Comment】 ─ 意味・解説：IT用語辞典 e-Words

RFCはW3Cの仕様書と同様に主なRFCは日本語訳されています。ありがたいことです

»ＲＦＣ日本語版リスト

あと何ヶ月かで任天堂のWiiとDSでOperaブラウザが利用できるようになります。
そうなったらFirefoxに匹敵するぐらいのメジャーブラウザになるんだろうなぁ〜
最近はターゲットブラウザにFirefoxを含むことが多くなってきてるし、てか殆どか。
Operaも今後は視野に入れていかないと。。。まぁ普通に作っていれば崩れることはないと思うけど。

でも、WiiのOperaは未知数だから怖いね。

»Webレボリューションは、リビングから: Opera、任天堂ゲーム機 Wii でのブラウザ機能利用に向けて任天堂株式会社とパートナーシップを締結
»NINTENDO DS BROWSER : E3 2006 : Nintendo

Wiiの情報が公開されましたね。
これはヤバイ。ゲームから遠ざかっていた僕にも魅力を感じる。
コンセプトビデオを見ると絶対に欲しくなっちゃうね。
あのコントローラーでゲームをしている姿をみると早くやってみたくてしょうがない。
昔のファミコンもネットからダウンロードでプレイできるみたいだし。絶対買ってしまう。。。。
DSに続きゲームユーザーがまた増えるだろうな。任天堂はすごいね。

早く出ないかな〜

»E3 2006 : Nintendo
»コンセプトビデオ : E3 2006 : Nintendo

del.icio.usやらflickrやらはてなやらで見かけるタグの群れ。
あのタグ付けの数で文字サイズが大きくなっている奴です。
あれってタグクラウドって言うんだね。今知りました。
ikesai2.0を作るときは導入してみたいもんです。

ちなみにMTのプラグインでもあるみたい。
»CloudNine Blog

2006年11月11日発売だそうです。
HDD20GB搭載機で62,790円
HDD60GB搭載機はオープン価格だそうです。

ん〜高い気もするけどBDが搭載されていることを考えると安いのか？
ハードの性能が良くなってもオジサンにはついていけないんだよね・・・。
ゲーム操作が難しすぎる。最近はニンテンドーDSがほしい。

»プレスリリース [PDF]
»PLAYSTATION 3 商品画像

メモです。

http://rpc.technorati.jp/rpc/ping
http://gencheez.com/gencheez/ping
http://www.blogoon.net/ping/
http://ping.blogmura.jp/rpc/
http://blogdb.jp/xmlrpc
http://blog.goo.ne.jp/XMLRPC
http://rpc.weblogs.com/RPC2
http://blogstyle.jp/xmlrpc/
http://bulkfeeds.net/rpc
http://serennz.cool.ne.jp/sblog/rep.cgi
http://blog.rank10.net/update/ping.cgi
http://blog.with2.net/ping.php/
http://rpc.weblogs.com/
http://www.blogpeople.net/servlet/weblogUpdates
http://www.blogoole.com/ping/
http://coreblog.org/ping/
http://ping.cocolog-nifty.com/xmlrpc
http://ping.bloggers.jp/rpc/
http://ping.myblog.jp/
http://ping.exblog.jp/xmlrpc
http://jugem.jp/?mode=NEWENTRY
http://ping.amagle.com/
http://rpc.atblogs.com/
http://rpc.bloghackers.net/newsoku
http://ping.blo.gs/
http://rpc.blogrolling.com/pinger/
http://api.my.yahoo.com/RPC2
http://ping.rootblog.com/rpc.php
http://rpc.technorati.com/rpc/ping
http://tb.threetree.jp/
http://rpc.pingomatic.com/
http://bitacoras.net/ping/
http://ping.weblogs.se/
http://xmlrpc.blogg.de/
http://ping.gpost.info/xmlrpc
http://ping.weblogalot.com/rpc.php
http://www.weblogues.com/RPC/
http://ping.namaan.net/rpc/

ikesaiに同じような問い合わせが結構あるので、まとめて返事しちゃいます。
Q&A方式で。

Q1.何度サイト登録してもikesaiに掲載されないんですが、、、
A1.登録されても必ず掲載されるとは限らないのです。僕の勝手な判断で決めてるんで・・・。
あと最近は登録が多いのでイケてるサイトさんでも順番待ちの可能性があります。

Q2.サムネイルのリンクを"_blank"にして欲しい。
A2.これは現状では考えていなくて、自分が別窓で開くサイトが嫌いだって理由が一番です。
それとアクセシビリティー的にもあんまりよろしくないし。
簡単に言うと別窓で開きたい人と開きたくない人がいるとして、_blankに設定していると開きたくない人の選択肢がなくなってしまうって事です。
別窓で開きたい人は、Shift+クリックやホイールクリックなどで対応してくださいませ。。。それかタブブラウザの設定で、異なるドメインだと別タブて開く設定などいろいろあるとおもいます。
他にもシングルタスクとか別窓を開いたことに気づかないなどありますが、これはikesaiにはあんまり関係ないですね・・・

別窓対応も考えてはいますが、YSTのように別窓で開くボタンをもう一つ設ける形になりますので、対応はかなりの労力と時間がかかると思われます。
なので、対応はいつになるのやら、、、