WaSP Redesign 04:01:10
The Buzz is Black と言う記事の通り、3月13日付けで WaSP のサイトがリデザインされた。
そして、CMS として WordPress が採用され、それによりコメントとトラックバックが導入された。まぁ、WordPress については、今更どうこう言うほどのものではないので（とは言え、WordPress を導入しても記事の URL が変わらなかっのは素晴らしいと思う。クールなURIは変わらないとはよく言ったものですね）、デザインについて考察したいと思います。
見た目の面では、Designing for: The Web Standards Project と言うリデザインを担当した Malarkey さんがデザインプロセスの記事を公開してくれているので分かりやすいが、CSS の面はどうだろうか。
■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@大藤幹さんのパクリですよ）。
■全体のレイアウト。
それでは、全体のレイアウトからいきます。基本的なレイアウトは float を利用した２段組で、
<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 要素の高さを均等に調節し、見栄えをよくしているのも注目するところでしょう。
■個人的なポイント。
その他、個人的に目を引いたところを紹介していきます。
■ナビゲーションスキップを隠さない。
ナビゲーションスキップと言えば、誰もが隠そうとしがちなんですが*1、たまに面白効果的に表示させているサイトもあります*2。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 を使ってますね。などなどなど。
- *1: 大体は、一般向けではなく、特殊な環境の人に向けて用意するものなので。
- *2: 例えば、hicksdesign とか。