そういえばサイトをリニューアルしたのに触れていなかった。せっかくなんでかわいい我が子を徹底解剖しようじゃないか。
ガイドライン（eps）
パクられるようなデザインでもないので公開してみます。奇特な方はダウンロードしてみて下さいな。
（1）原稿を用意する
サイト名だとか、トップページに掲載する内容だとかですね。今まではデザインと同時進行でしたが最初にやっておかないと、のちのちごまかさないといけなくなってくるので、しっかり用意するようにしました。
（2）添削・順位付け・グループ分け
そろった原稿の優先順位を付けていき、上から並べていきます。マークアップすることを念頭に置いていきました。そうすると、何にかかっているかわからないような余計な文章などが添削できるのでいい感じです。ここで注意したいのが、音声ブラウザのこと。
優先順位としてみたら確かにサイト名は一番重要なのですが、音声ブラウザでは
</Tile>内も読み上げるので、サイト名を一番上に持ってきた場合2回連続で読まれてしまうことになるんですよね。きっと音声ブラウザで見ている方は、「まだかなー」なんて思ってるんだろうな。そう考えるとむしろ重要なのは記事のタイトルということになります。ということでサイト名は一番下くらいに。</p>
<p>（3）マークアップ<br />
最初は＜hn＞から、その次＜p＞そして、＜ul＞＜ol＞＜dt＞最後に＜div＞でグループ分けしました。（2）の作業をしているので楽ちんでしたよ。※完璧なるWeb標準を目指す方はHTMLLintなどで文法チェックをしつつ修正しましょう。ボクは…。えへへ。</p>
<p>（4）デザイン<br />
Illustratorで800*600のキャンバス内にデザインして、CSSでどう実現しようかと考えました。<br />
そしてdivでくくるところのid・class名を決めておいて、それぞれの横幅・高さ等を調べて書き留めておきました。</p>
<p>（5）画像書き出し</p>
<p>（6）CSS記述<br />
Firefoxで「Webdeveloper」と「Aardvark」を入れておけば、ブラウザ上で確認しながら作業できます。重宝してますよー。</p>
<p>（7）完成</p>
<p>音声ブラウザで読み上げられる順番とレイアウトの順番が真逆だったのでどう実現しようかと悩みました。divで入れ子にしてfloatを使い分けて実現。驚いたのはクライアントのサイトを組むと動作確認で絶対つまづくのに自分のサイトの時は1発で綺麗に表示されたこと。いつもこうだったらいいのに…。<br />
時間のあるときにHTMLlintで修正していこうと思います。</p>
<script src="http://feeds.feedburner.jp/~s/woopsdez?i=http://blog.woopsdez.jp/2005/10/post_13.php" type="text/javascript" charset="utf-8"></script>
</div>
<div class="EntryFooter">
<div id="trackback_body">
<h3 id="trackback" class="trackbacks-header">TrackBack</h3>
<p>このエントリーのトラックバックURL:http://woopsdez.jp/mt/mt-tb.cgi/33</p>
</div>
<div id="comments_body">
<h3 class="comments-header">Comment</h3>
</div>
<form method="post" action="http://woopsdez.jp/mt/mt-comments.cgi" name="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)" id="comments_form">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="37" />
<h4 class="comments-open-header">コメントを投稿</h4>
<dl id="personalinfo">
<dt><label for="comment-author">名前: </label></dt>
<dd><input id="comment-author" name="author" class="textinput" size="30" value="必須" tabindex="2" accesskey="3" /></dd>
<dt><label for="comment-email">メールアドレス: </label></dt>
<dd><input id="comment-email" name="email" class="textinput" size="30" value="必須" tabindex="3" accesskey="4" /></dd>
<dt><label for="comment-url">URL: </label></dt>
<dd><input id="comment-url" name="url" class="textinput" size="30" value="http://" tabindex="4" accesskey="5" /></dd>
</dl>
<p><label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" tabindex="5" accesskey="6" />この情報を登録しますか?</label>
</p>
<dl id="voice">
<dt id="comments-open-text"><label for="comment-text">コメント: (スタイル用のHTMLタグが使えます)</label></dt>
<dd>
<textarea id="comment-text" class="textarea" name="text" rows="10" cols="30" tabindex="6" accesskey="7">お気軽にどうぞー。</textarea>
</dd>
</dl>
<p>
<input type="submit" accesskey="v" name="preview" id="comment-preview" class="buttonSubmit" value="確認" />
<input type="submit" accesskey="s" name="post" id="comment-post" class="buttonSubmit" value="投稿" />
</p>
</form>
<div id="stylesheetTest"></div>
</div>
</div>
</div><!-- container -->
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-413655-2";
urchinTracker();
</script>
<script type='text/javascript' src='http://track3.mybloglog.com/js/jsserv.php?mblID=2007032822554369'></script>
</body>
</html> 
