「実践 Web Standards Design」再読中。

Comments:5

望月真琴 2007/03/21 05:59 PM

トラックバックでお知らせいただきありがとうございます！
個人的な事情で、配本後の誤字等のチェックが遅れ、まだ完全な正誤表は完成していません。（九天社のページにある正誤表は暫定的なものです。まだ手元の本に付箋が大量に残っています……）

まずP.133のbackground-color: #eee;の抜けですが、これは私のチェック漏れによるもので、現在行っているチェックで気付いた点です。正誤表に含めておきます。

P.134の計算式ですが、これも私のケアレスミスで、598pxが正しい算出値です。
そしてdiv.sectionの幅の話ですが、これは図自体にもチェック漏れがあったことと、h2要素を含むdiv.section（body>div.section）とh3要素を含むdiv.section（body>div.section>div.section）があることから、かなり分かり辛くなってしまっています、すみません。
まずbody>div.sectionですが、これはbody要素のwidthが760pxと指定され、かつpaddingが0と指定されており、またbody>div.sectionのmargin・padding・borderともに0となっているため、そのまま760pxの幅となります。（P.129で書いていますが、幅（width）は内容領域の幅のことを指します。）
次にbody>div.section>div.sectionですが、760px*5%のマージンが左右に設定され、そして5pxのボーダーが左右に設定され、そして760*5pxのパディングが左右に設定されています。そのため、760px-(38px*2+5px*2*38px*2)=598pxが内容領域の幅になります。（よって、その中のbackground-color: #fff;であるp要素の幅も598pxになっています。）
しかし、パディング部分にもボックスモデルの背景は適用されるので、background-color: #ccc;が有効になる部分は内容領域とパディング部分を足した幅、すなわち598px+38px*2=674pxとなります。

……ということで、図自体にもチェック漏れがあると書きましたが、図の中のコメントは「#fffは598px」と書くべきでした。これは正誤表だけではまた混乱を招きそうなので、別途weblogなどでフォローするなりしたいと思います。

佐倉 2007/03/22 08:49 PM

＞望月真琴 さん

うわぁ。
「私が恥かくだけの話」とか記事中で書いてたけど、真琴さんの手を煩わせることになってしまった。すいません。

＞h2要素を含むdiv.section（body>div.section）とh3要素を含むdiv.section（body>div.section>div.section）があることから、かなり分かり辛くなってしまっています

これに関しては大丈夫です。一瞬で理解したとは言いませんが、ソースにらめっこしながら読んでたので私でも理解できてました。本書の文章が特に分かりづらいということは無いと思います。

で。
＞幅（width）は内容領域の幅のことを指します
div.section の幅＝内容領域の幅　ということでよろしいでしょうか？
というのも、p.130 の記述には「div.sectionの内容領域の幅は500px」とあり、p.133では 「div.section の幅は 500 + 10 × 2 = 520px 」とありますよね。で、「500 + 10 × 2 」がどこから出てきたのかがはっきり理解できなくて、色々勝手に考えているうちに、「div.sectionの内容領域の幅」と「div.sectionの幅」とは別のものを指してると思い込んでしまいました。今も520px がどこから出てきたのかハッキリわかってません……。（あれかなーと思ってたものはあったんですが、div.section の幅 = 内容領域 であるなら間違って理解してたことになるし。もう一度最初からきちんと読み直します！）

ともあれ、p.134 に関しては丁寧に説明して頂いたおかげで、よく理解できました。

なんだか私の理解力が足りないばかりに個人授業のようなことをさせてしまい、ありがたいやら申し訳ないやら。
丁寧な解説をわざわざありがとうございました！

ふば 2007/03/26 10:51 PM

私もポップ本で勉強させてもらってるところですが、けっこう誤植が多くって、「だれか指摘してないかなあ」とネットを彷徨ったところこのエントリを見つけました。ご指摘の箇所は私も気になってましたが、実は私も自分が間違ってたら恥ずかしいと思って指摘できずにいました。

しかしまさか著者の方直々の説明も読めるとは、怪我の功名（？）です。

本書は Web Standard を勉強するのにとても良い参考書だと思うのですが、さすがにちょっと誤植が多すぎる気が。たとえばp172-173は、ソースどころか本文でもネガティブマージンを「右」と書かれてますよね・・・。
まあ、これも初版を待ちに待って購入した者の宿命。間違い探しも勉強だと前向きに考えます。(笑)

ふば 2007/03/26 10:56 PM

すみません、ポップ本じゃなくてホップ本でしたね。誤植の指摘で誤植してしまった。（>_<）

佐倉 2007/03/29 12:50 PM

＞ふばさん

＞しかしまさか著者の方直々の説明も読めるとは、怪我の功名（？）です。
いや、ほんと、トラックバックは打ったものの、ここまで丁寧に解説して頂けるとは思ってなかったので、申し訳ないと思う一方でかなり嬉しい（笑）。

＞まあ、これも初版を待ちに待って購入した者の宿命。間違い探しも勉強だと前向きに考えます。(笑)
ですね。私の場合は誤植を誤植だと認識出来てないところもありそうなので、正誤表が出てから再度読み直す必要がありそうですが（苦笑）。

Trackback:0

TrackBack URL for this entry

http://lush-life.org/sb.cgi/42

Listed below are links to weblogs that reference

「実践 Web Standards Design」再読中。 from lush life*

トラックバックはありません。