さて、ここに書くのは約2年振りと久しぶりですが、そうです、宣伝です。3ping.org、Vicuna CMSの市瀬さん、hxxk.jpの真琴さん、そして福島の3人の共著である「実践 Web Standards Design」ですが、この度、技術評論社さんの電子出版サービス「Gihyo Digital Publishing（GDP）」からEPUBで販売されることになりました。規格としてはEPUB3になります。

タイトル

［改訂新版］実践 Web Standards Design - Web標準の基本とCSSレイアウト&Tips

著者

市瀬裕哉, 福島英児, 望月真琴

発売日

2011年10月3日

価格

2,500円

今回の電子書籍版は、書籍版のXHTML1.x + CSS2.1というベースは変わりませんが、新たにHTML5やCSS3などについても追記していますので、実質的には第三版目の改訂版という感じになっています。

おかげさまで、書籍の方は九天社版で3刷、技評版で2刷と合計5刷ほど出させて頂きましたし、一時期はWaSPの推薦図書（日本語版）にも入れて頂いたこともありました。

今回のこの「実践 Web Standards Design」電子書籍版も最近ウェブ業界に入った人や、これからウェブ制作を仕事にしようと思っている人達にも読んでいただけるような参考書になればと思います。そして、今回の電子書籍版にご尽力いただいた技術評論社の高橋さんと関係者の方々にこの場を借りて感謝を申し上げます。ありがとうございました。

関連エントリー

• hxxk.jp - 電子書籍「[改訂新版]実践 Web Standards Design」の刊行（でいいのかな）のお知らせ
• lh3.jp - 電子書籍 [改訂新版]実践 Web Standards Designの発売について

10月1日付けでネイバージャパン株式会社に入社してそろそろ1ヶ月が経ちます。前職で色々とあった時に良いタイミングでお声をかけていただき、B to Cを経験したかったってことや、見学させていただいた会社の環境も良かったこともあり、とんとんと話が決まって入社することになりました。色々とやらなければいけないことは山積みですが、焦らず気負わずに自分の力を発揮していければと思っています。

NAVERには普通の検索だけでなく、クリックだけで検索できるスマートファインダーや、写真の加工がブラウザ上でできるフォトエディターなど色々と便利なサービスがあります。また、今後も色々とリリースする予定ですので、ぜひ一度使ってみてください :)

探しあう検索NAVER（ネイバー）

• 書名：XHTML+CSSプロが教える"本当の使い方"
• 体裁：B5判・264ページ・オールカラー
• 価格：2940円
• ISBN：978-4844360667

書籍で解説されている全てのサンプルは下記ページの「ダウンロード」から落とせます。

• MdN Interactive - XHTML＋CSS プロが教える"本当の使い方"

IE6を対象外としたバージョンのサンプル

僕が書籍で解説しているフォトナビゲーションメニューは、対象ブラウザとしてIE6も含んでいますが、一応、書籍内ではIE6を対象外としたバージョンについてもコードだけ紹介しています。ただ、IE6を対象外としたバージョンのサンプルは、ダウンロードサンプルには含まれていないので、ここでシンプルバージョンとして公開しておきます。

• photonavigation.htm

@e_luck URLを外部アプリに渡す拡張だったらLaunchyってのがあったんですけどもう開発止まってるみたいですね https://addons.mozilla.org/ja/firefox/addon/81

@e_luck あとバージョン指定は引数渡してやればいけそうです http://tinyurl.com/cd8a2f

それ頂きっす！ということで、Launchyを使って今見ているページをIETesterで任意のIEバージョンを指定して開く方法をメモっとく。

Launchyのインストール

Launchyは、リンクなどを任意のアプリケーションを指定して開けるようにする拡張。3年ほど開発止まってるみたいだけど、気にせずにFirefoxにインストール。

• Launchy :: Firefox Add-ons

launchy.xmlの作成

Launchyには、いくつかのアプリケーションがデフォルトで設定されているけど、それ以外の外部アプリを設定したい場合には、launchy.xmlを作成して情報を記述する必要がある。launchy.xmlを保存する場所は、Launchyの設定画面の「launchy.xml」タブで確認することができる。

launchy.xmlに記述する際のフォーマットは以下の通り。

label

プリケーション名（必須）

type

アプリケーションの種類（必須）

command

アプリまでのパス（必須）

arguments

引数の指定（オプション）

typeで指定するアプリケーションの種類はLaunchyのサイトで確認できる。

launchy.xmlへIETesterの情報を記述

IETesterは、引数を指定することでバージョンの指定をすることができるので、以下のようにIE6、IE7、IE8、全バージョンの4パターンで開けるようにした。

• launchy.xml

<?xml version="1.0" encoding="UTF-8"?>
<configurations xmlns="http://launchy.mozdev.org/configurations">
  <application>
    <label>IE Tester ie6</label>
    <type>1</type>
    <command>C:\Program Files\Core Services\IETester\IETester.exe</command>
    <arguments>-ie6</arguments>
  </application>
  <application>
    <label>IE Tester ie7</label>
    <type>1</type>
    <command>C:\Program Files\Core Services\IETester\IETester.exe</command>
    <arguments>-ie7</arguments>
  </application>
  <application>
    <label>IE Tester ie8</label>
    <type>1</type>
    <command>C:\Program Files\Core Services\IETester\IETester.exe</command>
    <arguments>-ie8</arguments>
  </application>
    <application>
    <label>IE Tester all</label>
    <type>1</type>
    <command>C:\Program Files\Core Services\IETester\IETester.exe</command>
    <arguments>-all</arguments>
  </application>
</configurations>

これで右クリックからバージョン指定してIETesterで開けるようになった。情報をくれたakzさんに感謝！

古いMTのコメントを表示させるためのTypePad Connectのコード

TypePad - Dashboardから、手順に沿ってTypePad ConnectのスクリプトをMTのテンプレートに組み込んでインストールする訳だけど、MTで直接コメントされた古いコメントも表示させようと思うと、TypePad Connect上に書いている5項から7項の説明通りに組み込んでもうまくはいかない。

例えば、<MTInclude module="Comment Detail">で読み込まれる「Comment Detail」なんてテンプレートモジュールは、僕の環境MT4.23-jaだと存在しないから再構築エラーなんかが出ちゃう訳だ。

ちう訳で、あーでもない、こーでもないと言いながら、最終的にgoyaさんに教えて貰いながら行った作業は以下。

Comment Detailテンプレートモジュールの作成

MT上で付けられた古いコメントを表示させるためテンプレートモジュールを作っておく。

 <div class="comment"<MTIfArchiveTypeEnabled archive_type="Individual"> id="comment-<$MTCommentID$>"</MTIfArchiveTypeEnabled>>
  <div class="inner">
    <div class="comment-header">
      <$MTCommentAuthorLink default_name="Anonymous" show_email="0"$> <MTIfNonEmpty tag="CommentAuthorIdentity"><$MTCommentAuthorIdentity$></MTIfNonEmpty> said:
    </div>
    <div class="comment-content">
      <$MTCommentBody$>
    </div>
    <div class="comment-footer">
      <a href="#comment-<$MTCommentID$>" title="Permalink to this comment"><$MTCommentDate format="%x %X"$></a>
    </div>
  </div>
</div>

これを「Comment Detail」という名前で作成しておく。

コメントテンプレートにTPCのコードを挿入

MTのコメントテンプレート内全てをごっそりとTypePad Connectのコードと入れ替える。ただ、そのままではなく、以下の強調部分のコードを加えておく。

<mt:IfCommentsActive>
<div id="comments" class="comments">

<mt:IfCommentsAccepted>
<div class="comments-open" id="comments-open">
  <h2 class="comments-open-header">Comments</h2>
  <div class="comments-open-content">

<mt:If tag="mt:EntryCommentCount">
<mt:Comments>
<$mt:Include module="Comment Detail"$>
</mt:Comments>
</mt:If>

  <!-- start tpc -->
  <div id="tpc_thread"></div>
～省略～
</mt:IfCommentsActive>

んで、あとは再構築すれば作業は完了。MTに付けられた古いコメントをTypePad Connectに合わせたければ、Comment Detailテンプレートを弄れば良いと。ちなみに、コメントされた際に送られてくる通知メールに直接返信すると、返信コメントとして反映されるのがイカスわー！

コンセプト

今回は「和」というコンセプトにして、使用する色を下記の3色に決定してから暇を見つけてはチマチマとフォトショップで作ってった。

笹が障子を透かして見えているようなイメージ。なんかすんげぇネタ臭なデザインに成り果てたけど、そこはセンスが無いだけにしょうがない :-p

今後の予定

さて、実はまだ細かい部分のスタイルが未定義なんで、そのあたり少しずつ追加してく。コメント部分なんかは全く手付かずだけど、そこはSix Apart大好きっ子な俺としては、ぜひともTypePad Connectを導入したいんで、組み込んでからスタイリングする予定。とりあえず、こんな感じです。

来年の抱負

今年は全くと言っていいほどこのサイトを放置してTwitterにばっかり呟いてたんで、来年はこのサイトでもあまり気負わずそこそこアウトプットしたいなあと思ってます。そもそも最近はインプット自体が少ないっつう話もあるけど、まあ頑張ります。あ、ちなみにどうでも良いけどサイト表記からblogの文字取りました。それでは良いお年を :-)

* html {
    filter: gray;
}

レンダリング重くなる :P

• Twitter / hamashun: IE6を使って閲覧すると右上に『アナログ』って出るよ ...
• IE6で閲覧すると。｜CSS HappyLife

連載：実践Web Standards Designのススメ

• 第1回　ガイドブックの選び方
• 第2回　ブラウザ毎のサイトチェック環境を構築しよう
• 第3回　floatプロパティを学習する上での3つのポイント
• 第4回　実践 floatプロパティの学習法
• 第5回　横並びメニューの区切り線をCSSで表現しよう
• 第6回　CSS3のセレクタを使用してみよう

第1回、第2回はまこち、第3回、第4回はうーたん、第5回、第6回は僕が書いてます。是非ご覧になってみてください！

• 書名：実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips
• 体裁：B5変形判・448 ページ
• 価格：定価3360円（本体3200円）
• ISBN：978-4-7741-3684-4
• 店頭発売日：11月29日
• 発行日：平成21年1月5日

再刊行にあたり、全編に渡って見直し、加筆・修正しています。7 章などのTipsについても、2008 年現在最新のブラウザで再検証しました。意外にOperaが 9.2x 以前と 9.5x 以降で微妙に変わってるものがあったりして、その辺りについても簡単に追記しました。ちなみに、IE については IE8 Beta2 で確認しています。

九天社版のホップ本が Amazon のマーケットプレイスで最高値 13,500 円（11 月 8 日現在）とかバブルってますが、とりあえず今月末には定価で、しかも新しい内容で読めますので、もう少し待てば幸せになれます。

詳細な目次等の情報については、lh3.jp で確認できます。ちなみに、「lh3.jp - Web Directions East で宣伝していただきました」 では、素晴らしい方々が新しいホップ本のカバー画像を手にとって頂いている写真がアップされているので、是非ご覧になってください！　すげぇっす！！！１

#content-body div.collapsing-block.pseudo-collapsed .collapsing-btns .toggle-collapse {
  property: value;
}

基本的に、セレクタ内には空白文字を挿入することが可能なんだけど、改行やインデントも空白文字のひとつに含まれる。そこで、長いセレクタに改行、インデントをうまく使うことで、視認性を高めることができるかもよってのが今回のアイデア。上記の長い子孫セレクタに改行・インデントを取り入れてみると、こんな感じ。

#content-body
  div.collapsing-block.pseudo-collapsed
    .collapsing-btns
      .toggle-collapse {
  property: value;
}

キモイっちゃ、キモイ書き方だけど、階層構造も分かるし、主体となる要素（子孫セレクタの一番最後のセレクタ）も一目で分かるし、意外と視認性が高いと思ってるんだけど、意外とこんな書き方をしている人っていない。あまりにも長いと感じる子孫セレクタは、こうやって書いてみると良いかもしれないよ :)

これは去年、某雑誌にも寄稿したことがあるネタなんだけど、リハビリ代わりに書いてみた。今年はもうちょっとここを更新していきたいなあと思っている次第。

• Web標準テキスト(1) DOM Scripting
• 古旗 一浩

• Web標準テキスト(2) CSS
• 福島英児

• Web標準テキスト(3) HTML/XHTML
• 大藤 幹

• CSS による段組レイアウト

ちなみに、各レイアウトの詳細な説明はありません。それについては、いつか何かで解説します。 また、このフレームワークは自由に使って頂いて構いませんが、それによって生じる問題についてのサポートは行いません。

ただし、こういう状況では崩れるよという報告や、逆にこうすると良いよというアドバイスが頂けるのであれば、ぜひお願いします。 という非常に調子の良いたくらみ。わはは

サンプルの文書構造

一応、2 カラムと 3 カラムを用意。それぞれの文書構造は以下のような感じで、どちらもメインコンテンツが先に来るような構造。

<body>
<div class="container">
  <div id="head">...</div>
  <div class="content">
    <div id="mainContent">
      <div class="section">...</div>
    </div>
    <div id="subContent">
      <div class="section">...</div>
    </div>
  </div>
  <div id="foot">...</div>
</div>
</body>

3 カラムの方は、サブの後にエクストラを追加しただけ。

<body>
<div class="container">
  <div id="head">...</div>
  <div class="content">
    <div id="mainContent">
      <div class="section">...</div>
    </div>
    <div id="subContent">
      <div class="section">...</div>
    </div>
    <div id="extraContent">
      <div class="section">...</div>
    </div>
  </div>
  <div id="foot">...</div>
</div>
</body>

div 多くね？とか container ってｗワロスｗｗｗ、とかは心の内に秘めておいてください。ちなみに、ターゲットとしているのは IE 6 以降のモダンブラウザあたり。

position を使った際の問題点

可変幅で position 使って段組レイアウトした場合、ポジショニングした要素が通常フローから外れているために、フッタ部分とポジショニングされた要素が重なってしまう場合がある。この辺は、「floatとpositionの使い分け」を参照。なので、フッタ部分の幅をメインと同じにしてサイド部分まで伸びないようにしたパターンも追加しておいた。

あと、レイアウトが崩れる訳ではないのだけれども、Mac IE では position を使ったパターンが、ウィンドウ幅によっては無駄なマージンが右側に発生して横スクロールバーが出てしまうかもしれない。 まあ、それはマック IE のバグなのだけれども、 可変幅・固定幅ともに発生するんでちと微妙。バグの詳細はMac版 Internet Explorer 5 の CSS バグと回避方法 日本語訳の「隠れた margin」あたりで。

その他のレイアウト

今後、時間があればレイアウトのパターンを追加していきます。 メインとサブが共に可変幅のものとか、カラム数を増やしたものとか、エラスティックレイアウトとか。あくまで予定は未定ですけれども。

(X)HTML で invalid だと、パーサが処理出来ないとか内容が表示されないとかクリティカルな issue が発生するかもしれないけれど、CSS では意図して invalid なコードを書くケースってのがあると思う。それが良いか悪いかは別にしてね。

んで、タイトルの問い。仕様に沿った記述をすべきっていう真っ当な回答があるんだろうけど、なんかこう膝を打つような回答って何だろ。あなたが書く CSS は valid ですか？ valid であろうと心がけていますか？ そうあるべき理由って何ですか？

• スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る －モダンブラウザ編－
• clearfixはちゃんと考えられてた

.clearfix:after {
  height: 0;
  visibility: hidden;
  content: ".";
  display: block;
  clear: both;
}
.clearfix {
  _height: 1px;
  min-height: 1px;
  /*￥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

ホップ本でもうーたんが解説してるんだけど、構造に手を加えずに float を clear させるためのいわゆる clearfix ってやつ。結構色々なサイトで紹介されているのを目にすると思うけど、最初の content 生成して clear させる部分の規則集合はほぼ一緒だったりする。だけど、その後（上記コードの強調部分）ってのは結構色々とバリエーションがあったりするんで、自分が知っているパターンをいくつか紹介してみる。

それぞれの説明やどれが良いとかは省略。そのコードを説明しているサイトにリンクしておくんで、興味があるようでしたらそちらを参照してください。ちなみにリンクしたそのサイトがそのコードの orgin ではないかもしれません。以下の全てのコードは :after 擬似要素使って content 生成する規則集合部分は省略（つまり、上記コードの強調部分のみという事です）。あと、あくまで便宜上セレクタを .clearfix としているけど、使う場合は対象セレクタに適宜置き換えて適用させるのが吉。

xmlns 属性を使ったパターン

属性セレクタを使って IE6 以下に display:block 読み込ませないようにしている。

• CSS clearfix

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

IE7 向けハックを使ったパターン

*:first-child+html が IE7 しか読み込まないことを利用している

• ClearFix - CSS - Snipplr

/* WinIE7 only */
*:first-child+html .clearfix{
  height:1%;
}

/* WinIE6 and below */
/*\*/
* html .clearfix{
  height:1%;
}
/**/

/* MacIE only */
/*\*//*/
.clearfix{
  display:inline-table;
}
/**/

inline-table を使ったパターン

inline-table の指定はマック IE 向け。ひとつ前のやつは inline-table をマックにのみ読み込ませているけど、こっちは逆で最初に inline-table の指定を読み込ませて、その後にマック以外に block としている。

• IE7 display fix | drupal.org

.clearfix {
  display: inline-table;
  min-height:1%;
 }
/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%;
 }
.clearfix {
  display: block;
 }
/* End hide from IE-mac *//

zoom を使ったパターン

ちょっと番外っぽいけど、IE 向けに zoom プロパティを利用する。valid じゃなくなるんで、それが嫌ならコンディショナルコメントとかで別にリンクした方が良いかもしれない。

• Clearing floats without structural markup in IE7 | And all that Malarkey

.clearfix {
  zoom: 1
}

いくつか書き出してみて気づいたけど、結構きりがない。とりあえずここまで。

そうそう、今回とても不思議だったことは、最初に子供が出来たことを感じ取ったのが、当時4歳になったばかりだった長女だったってこと。母親の絵を描いて、お腹の所にぐるぐるっと黒い丸を描いて「これ赤ちゃん」って。カミさんと二人してのけぞって、調べてみたら本当だったってゆう。ほんと子供は不思議だなあ。