The Buzz is Black と言う記事の通り、3月13日付けで WaSP のサイトがリデザインされた。
そして、CMS として WordPress が採用され、それによりコメントとトラックバックが導入された。まぁ、WordPress については、今更どうこう言うほどのものではないので（とは言え、WordPress を導入しても記事の URL が変わらなかっのは素晴らしいと思う。クールなURIは変わらないとはよく言ったものですね）、デザインについて考察したいと思います。
見た目の面では、Designing for: The Web Standards Project と言うリデザインを担当した Malarkey さんがデザインプロセスの記事を公開してくれているので分かりやすいが、CSS の面はどうだろうか。
**CSSFilter*CSS の種類と適用方法
-style.css
-print.css
-hacks.css
-collapse.css
用意されていた CSS は上記の４つで、print.css は名前通り印刷用の CSS なので、今回はパスする。
まず、それぞれの適用の方法であるが、メインとなる style.css を半ばお約束の media type を screen 以外の値を指定することで、NN4 への CSS 適用をカットしてある。それから、hacks.css と collapse.css の２つを @import を利用してインポートしている。けど、hacks.css は IE 対策みたいなもので、collapse.css は CSS for collapsing sections on post pages
というコメントが書いてあるので、ユーザーには関係ないのだろう。と言う事は、このデザインの CSS は style.css ほぼ一本に絞ってあると言う事になり、あっち系（何）としては珍しい。
そんな訳ですが、さてさて更に詳しく解析しようと思います（やってる事は、CSS Analysis@大藤幹さんのパクリですよ）。
]]>
<body id="top" class="index">
....
<div id="content">
<div id="content-main">
....
</div>
<div id="content-sub">
....
</div>
</div>
....
<body>
<
と言う構造を、
>
#content
{float: left; width: 100%; border-top: 1px solid #be9826;}
body.index #content-main,
body.category #content-main
{float: right; width: 60%; padding: 1.5em 0; background: #fff url(/files/theme/content-main.png) repeat-x;}
body.index #content-sub,
body.category #content-sub
{float: left; min-width: 200px; width: 40%; padding-bottom: 1.5em; background: #191919; color: #fff;}
body.page #content-main
{float: right; width: 75%; min-height: 250px; padding: 1.5em 0; background: #fff url(/files/theme/content-main.png) repeat-x;}
body.page #content-sub
{float: left; width: 25%; padding-bottom: 1.5em; color: #fff;}
<
という様に、body 要素に割り振ってある class に従って、例えばトップページ（class="index"）であれば float を使って左に #content-sub を幅40%で配置し、右に #content-main を幅60%で配置することで２段組を実現しており、body 要素の class が "page" のページであれば、 #content-sub を幅25%で左に、#content-main を幅75%で右に配置しています。そのどちらでも無い場合（主に body の class="individual" の事ですが）は段組なしのレイアウトになります。
ここで注目すべきは、body 要素の class に従って、大まかなレイアウトを変更するという方法でしょう。僕は、ページによってレイアウトを変更する場合、それぞれのページ独自レイアウトを記述した CSS ファイルをインポートして変更を加えるという方法を利用していたのですが、body に class を割り振って、１つの CSS ファイルに記述する方法だと管理しやすくて良さそうですね。行数が増えてきらた、別の CSS ファイルを用意した方がよさそうなので、使い分けが肝心でしょう。
***#content-main の２段組。
トップページなどでは、#content-main を更に２段組にしています。これは float と width、そして min-width と min-height を利用することで実現しています。
まず、HTML の構造は、
>
<div id="content-main">
<h2>Task Forces' Latest</h2>
<div>
<h3>....</h3>
<p>....</p>
<h4>....</h4>
<p>....</p>
<p>....</p>
</div>
<div>
.... <!-- 上の div と同じ内容 -->
</div>
<!-- div の繰り返し -->
</div>
<
となっており、h2 要素の下に div 要素が繰り返されています。それに対して CSS で以下の様な指定をすることで、２段組を実現しています。
>
body.index #content-main div {float: left; min-width: 200px; width: 40%; min-height:30em; margin: 0 20px 1em 20px; border-bottom: 1px solid #999; padding: .5em 0 0 0;}
body.index #content-main div * {margin: 0;}
<
float: left; と width: 40%; の指定で、div 要素を左に流し込みます。ただし、幅が狭くなり、可読性が下がる場合を考慮して、min-width: 200px; という指定をしています。これにより、幅が 200px を下回る場合は、２段組が解除され、縦１列に並び替えられます。
min-height: 30em; という指定をすることで、それぞれの div 要素の高さを均等に調節し、見栄えをよくしているのも注目するところでしょう。
**Tips*個人的なポイント。
その他、個人的に目を引いたところを紹介していきます。
***ナビゲーションスキップを隠さない。
ナビゲーションスキップと言えば、誰もが隠そうとしがちなんですが((大体は、一般向けではなく、特殊な環境の人に向けて用意するものなので。))、たまに面白効果的に表示させているサイトもあります((例えば、hicksdesign とか。))。WaSP のサイトでは絶対配置を利用してページの最上部に配置させ、文字色を背景と同じにして基本的には視覚出来ない様にし、面白いのは疑似クラス a:hover を利用して、最上部にマウスカーソルを持っていったときには、背景色をつけて視覚出来る様にしているところです。
***お約束とも言うべきデフォルトスタイルリセット。
全称セレクタ * を使うとブラウザ毎のデフォルトスタイルを簡単にリセットできます。WaSP でも、
>
* {margin: 0; padding: 0;}
<
という指定でリセットしています。僕は、フォントサイズも font-size: medium; でリセットしていますが、フォントサイズをリセットするのであれば一般的には 100% が無難です。そこら辺のお約束に関しては興味があれば、真琴さんのCSS を書く前に読んでもらいたいことあたりから見られる記事を参考にするのがいいでしょう。
***Back to Top の画像の配置。
Back to Top のリンクもナビゲーションスキップと同じで、主に特殊環境の人へ向けての用意ですが、こちらもちょっと面白く配置しています。
HTML の構造は、
>
<div id="container">
<div id="content">
<div id="content-main">
....
</div>
<div id="content-sub">
....
</div>
</div>
<div id="nav-supp">
<p><a href="#top" title="Back to Top">Back to Top</a></p>
</div>
</div>
<
となっていて、<div id="nav-supp"> が Back to Top の要素です。#container を親要素に持ち、#content-main や #content-sub の親要素であ #content と並列の関係にあることが分かります。#content-main と sub の幅は body の class によってページ毎に変化するので、#nav-supp の CSS の指定も全体とページ毎に分かれています。
>
/* nav-supp */
#nav-supp {position: relative; clear: both; width: 100%; height: 55px; margin-top: -1px; background: #191919;}
#nav-supp a {display: block; position: absolute; top: -15px; left: 50%; width: 56px; height: 56px; margin-left: -36px; background: url(/files/theme/a-04.png) no-repeat; text-indent: -9999px; text-decoration: none;}
#nav-supp a:visited {text-decoration: none;}
#nav-supp a:hover, #nav-supp a:focus {background: url(/files/theme/a-04-h.png) no-repeat;}
body.index #nav-supp a, body.category #nav-supp a {top: -17px; left: 40%;}
body.page #nav-supp a {top: -17px; left: 25%;}
<
全体の指定では、まず、#nav-supp に対して float の解除と position: relative; の指定を行い、たぶん IE 対策の width: 100%; の指定を行っています。
次に #nav-supp a に対しては、表示をブロック要素にして、text-indent を使った画像とテキストの置換を行い、位置を中心にして、上に 15px めり込ませています。これは、２段組ではない場合におけるポジショニングですね。
そして、body の class に従って２段組が行われる場合、位置を左から40%か25%にして、上に 17px 上昇させる事で、#content-main の左下にめり込ませています。
***その他諸々。
隣接セレクタの使い方が巧みで勉強になります。あと、text-shadow を使ってますね。などなどなど。
]]>
MicrosoftよりIE用のDeveloper Toolbar 1.0がリリースされました。Developer Toolbarと言えば、FirefoxにはWeb Developer、OperaにはWeb Developer Toolbarがあり、多くのウェブ制作者にとって、欠かすことの出来ない存在になっているでしょう。
IEのCSS解釈などに苦しめられている人も多いでしょうが、これからは少しだけ楽になるかもしれません（ほんまかいな）。
IE6, IE7に対応していますが、サポートOSはXP以上でないとだめなようです。
**overview*概要
みなさん、Technorati はご存じでしょうか？
僕自身が Technorati の存在を知ったのは恥ずかしいくらい遅く、多分今年に入ってからで（２月か３月くらいかな）、microformats の存在を知ってから Technorati の存在も知ったという。おそらくは、普通とは逆パターンですね。
micoroformats は便利に使えて楽しいという単純な気持ちから惹かれたのですが、Technorati は、microformats を含め、ブログや近年誕生した Web にまつわるテクノロジーを使い倒そうっていうサービスを提供しているところなのだと僕は思っています。
そんな Technorati の新サービスを今更ながら自分なりのメモとして紹介したいと思います。
]]>
Microformats Search
Technorati と microformats の双方の中心人物である Tantek さんが自らのブログでアナウンスしているように、つい先月末に満を持して登場したのが Microformats Search です。現在のところ、hCards, hCalendar events, hReviews などが検索できてます。
ためしに、tomoya と検索してみると、今現在僕のこのブログある hCard がヒットします。
これだけでは面白くないので、試しに 1983 で検索してみると hCard と hReview でヒットがありました。hCard のほうでは、1983年生まれの僕と、同じく 1983年生まれの Wim Le Page さんという人と、1983年 に Intuit Inc. を設立した Scott Cook さんという人がいました。
日本では、つまらないネット文化のお陰で、謎の匿名性に重きを置いたりするためあまり個人情報を公開する人は限られていますが、海外などでは写真を含め割とオープンに公開する文化があるため、これから会う人の情報を先にネットで調べるということも常識的に行われているそうです。そういった場合でも、hCard などがピンポイントで検索できる Microformats Search は非常に便利に使えそうです。
]]>
Googleが独自ドメイン用Gmailホスティングを提供開始という engadget の記事を見たときに早速応募していた Gmail for your domain のベータテストサービスですが、ようやく招待メールが送られてきたので、早速設定してみました。
管理ページにログインして最初に目に飛び込んでくるのが、Change your MX records の文字です。要は、お前のドメインを俺に向けな！という事です。
