P.190　子より親の要素にスタイルを指定する

ページ下部の図説
横の説明テキストには

div要素にボーダーを指定をしている場合と、
h2要素へ指定をしている場合

とありますが、順番が逆のような気がします。いかがでしょうか？

ご指摘ありがとうございます。
第5章を執筆した小林です。

>順番が逆のような気がします。いかがでしょうか？
はい、ご指摘通り逆ですね。
子要素のh2にボーダーを指定するよりも、親要素のdivへ指定した方が、h2自体を自由にスタイリングすることができます。

下記にサンプルコードをアップしましたので、あわせてご参照ください。
http://cssnite.jp/books/bgn/samples/5-7-1/index.html

100ページの次の文章、おそらくMac版IE 5のことではないかと思うのですが、いかがでしょう？

また、IE 6やIE 7ではfont-familyプロパティで最初に指定されているフォントがユーザーのパソコンに存在しなかった場合、ブラウザのデフォルトのフォントを適用してしまう問題があります。

こちらで検証した限り、IE 6/7どちらも問題ありません。

第4章　P141について質問です。
li.current {background-image:none ;}
でカレントを実現するとあります。
でも、liの背景に置いてあるのがcurrent用の画像ですよね？
これをnoneにしてしまうと、何も表示されなくなるのでは？

li.current a {background-image:none ;}
であれば分かる気がするのですが…
また、カレント部分にマウスを置いたとき、
カーソルをリンクではなくするための設定としては、
cursor:default;
を追加する形で正しいでしょうか？

お手数ですが、解説いただければ幸いです。

＞sunnyさん
ご質問ありがとうございます。
第4章を執筆いたしました山田あかねです。

▼メニューの現在位置用リスト背景について
大変失礼いたしました。こちらの間違いですので、正誤表にて訂正いたします。
[141ページ 最後のセレクタ：誤]
ul#nav li a:hover,
ul#nav li.current {
background-image: none!important;
}

[141ページ 最後のセレクタ：正]
ul#nav li a:hover,
ul#nav li.current a {
background-image: none!important;
}

お詫びして訂正いたします。

▼カーソルについて
カーソルをリンクでなくする＝リンク用のカーソルになってしまうものを、通常のものに置き換える　ということでよろしければ、
cursor: default; で大丈夫です。

ただ、このメニューサンプルは現在位置であってもリンクとして機能するようになっているため、現在位置の時にリンクとして機能させない場合は、XHTMLのマークアップ自体からa要素を抜いてしまうほうが意味的には妥当だと思います。

サイトを使う方の利便性を考えると、現在位置とはいえどその下の子ページがある場合が多いため、現在位置でもリンクとして機能し、cursor: pointer; （リンクのカーソル）のままのほうが使い勝手が良いため、サンプルでは現在位置でもリンクするようにしています。

どうぞよろしくお願いします。

> reaさん

回答が遅れまして、たいへん申し訳ありません。
ご質問に回答させていただきます。

いろいろと検証しましたところ、

* {
font-family:
"あああ",
aaa,
"メイリオ",
Meiryo,
sans-serif;
}

という記述では、フォールバックがきかない（「メイリオ」ではなくデフォルトフォントが適用されてしまう）のに対し、

* {
font-family:
"あああ", aaa,
"メイリオ", Meiryo,
sans-serif;
}

や

* {
font-family: "あああ", aaa, "メイリオ", Meiryo, sans-serif;
}

といった書き方では、フォールバックがききました（IE 6/7ともに）。

したがって、「...ソースコードの書き方によっては、ブラウザのデフォルトのフォントを適用してしまう問題があります」とすべきであると思います。

表現についてはちょっと検討させていただくとして、ひとまず上記のような感じで次の増刷時に訂正させていただきたく思っております。

>山田さま
ご回答ありがとうございます！ご返信を失念しており大変失礼いたしました。とてもすっきりです^^/
また、リンクについてのアドバイスもありがとうございました。
参考にさせていただきます。
今後ともよろしくお願いいたしますm(__)m

サンプルファイルの件

早速のご返答、ありがとうございました。

サンプルファイルのダウンロード先、確認できました。
ちなみに1-4章のサンプルファイルはないんでしょうか？

ご質問に回答いたします。

1章から4章については、
いまのところサンプルファイルはないのですが、
読者の皆さまのお役に立ちそうな部分について
なるべく早くご用意させていただきますね。

本サポートサイト内での続報をお待ちください。

本書のダウンロードサンプルの中の[chap04-p139_navigation]フォルダのnavigation.cssの中に「ナビゲーションに画像を指定」という部分がありますが、すぐ下の「ナビゲーションのli要素にhover用画像を指定」の部分と設定するIDが同一になっています。

/* ナビゲーションに画像を指定 */
li#nav-top {
background: url(top.png);
}

/* ナビゲーションのli要素にhover用画像を指定 */
li#nav-top {
background: url(hover/top.png);
}

これはどのような意図があるのでしょうか？
「ナビゲーションに画像を指定」の設定内容は完全に上書きされてしまって意味がないような気がするのですが・・・

あと、もう１点、、、
同じくダウンロードサンプルの中の[chap04-p148_highlight_table]フォルダのhighlight_table.htmlの中の

th.top {
/* 省略 */
background: url(top.png) no-repeat left top;
}
td.bottom {
background: url(bottom.png) no-repeat left bottom;
}

の部分は、

th.top {
/* 省略 */
background: #f90 url(top.png) no-repeat left top;
}
td.bottom {
background: #f90 url(bottom.png) no-repeat left bottom;
}

のように「#f90」がないと表示が乱れるように思います。

重箱の隅をつつくようで恐縮ですが。

Hiroshi さん

はじめまして、４章を執筆させていただきました山田と申します。
ご指摘ありがとうございました。

大変失礼いたしました。サンプルファイルの誤りでした。
ナビゲーションについてはご指摘のとおり、同一IDが重複しており、サンプルのバージョンを変更した際に過去の状態が残ったままにしてしまいました。
また、テーブルについてもご指摘どおりです。IE6/7等において、colgroup#premium で指定した背景が反映されておりませんでした。

いずれも追ってサンプルファイルを訂正いたします。

第６章の6-2節と6-3節の質問です。

1)IE8のハックが無効になる
html:first-child selector {...}

2)IE7のハックがFirefox3でも有効になる
*:first-child+html selector {....}

3)Google Chromeのハックが無効になる
html:not(:only-child:only-child) selector {...}

以上、よろしくお願いします。

第四章にある「テキスト＋text-indent＋background」で実現（画像置換）というのをやってみました。（P140～）

FireFox、safari、Google Chrome、IE7などでは問題なく表示されましたが、IE6で開いてナビ画像にマウスを重ねるとhover画像ではなくナビの上下にあるトップイメージ画像の一部や、ナビの前後にあるテキストの一部が表示されます。（※1）

上記現象は、一回目（にマウスを重ねた時）にだけ起こり、二回目以降にマウスを重ねると、前述した画像やテキストは出ないのですが、hover画像にはなりません。（マウスを持っていっても画像が変わらない）（※2）

（※2）の状態でウインドウを開いたまま、別のウインドウを開きそちらに移動、その後元のウインドウに戻って、ナビにカーソルを重ねると、（※1）の状態に戻りまた初回のみ画像やテキストが表示され、その後もう一度カーソルを重ねると（※2）の状態になります。

少しわかりにくい文章になってしまいましたが、WinIE6での対処方法をお教えいただけませんでしょうか？（IE7は未確認です。）

以上、よろしくお願いします。

葛西さん、
恐れ入りますが、具体的にどのような状況で発生するか、ソースコードをご提示いただけませんか？
差し支えある場合には、cssnite@gmail.comまでご連絡ください。
よろしくお願いいたします。

読者さん、
恐れ入りますが、具体的にどのような状況で発生するか、ソースコードをご提示いただけませんか？
差し支えある場合には、cssnite@gmail.comまでご連絡ください。
よろしくお願いいたします。

益子です。
葛西さんからのCSSハックの質問に回答します。

> 1)IE8のハックが無効になる
> html:first-child selector {...}

たしかに無効ですね。

本書執筆時点ではIE 8 Beta 2または3での検証でしたが、
その後、RC版、さらに正式版となることで、
実装が変わってしまったのかもしれません。

> 2)IE7のハックがFirefox3でも有効になる
> *:first-child+html selector {....}

Windows版とMac OS X版のFirefox 3.0.10で検証してみましたが、
有効にはなりませんでした。

> 3)Google Chromeのハックが無効になる
> html:not(:only-child:only-child) selector {...}

おっしゃるとおり、無効でした。

こちらも、Google Chrome 2.0へのバージョンアップにともない、
実装が変わってしまったのかもしれません。

同じレンダリングエンジン（WebKitのHTMLエンジン）を利用する
Safari 3では、Windows版とMac OS X版ともに有効でした。

- - - - - - - -

以上です。

後日、本サポートサイト内で、他のブラウザも含めて、
CSSハックのフォローをさせていただきます。

7章P241のPSPブラウザの仕様、マルチメディアがACCとなっていますが、もしかしてAACではないでしょうか？

第5刷137ページの真ん中、

background: url(icon.gif)no-repeat 0 0.2em;

とありますが、

説明文には、

＿＿＿＿＿＿＿＿
「0 3px」と指定します。
＿＿＿＿＿＿＿＿

と記述されています。

これは誤りでしょうか。

よろしくお願いいたします。

ご指摘ありがとうございます！
確かに誤りですね。

誤りを認めた後は、
正しい記述を重ねて記述すべきだと思うのですが、
その点いかがでしょうか。

正誤表に後日記載するのですか？

言葉が足らずに失礼しました。こちらに掲載しました。
http://cssnite.jp/books/bgn/errata.html

ご迷惑をおかけしますが、よろしくお願いいたします。

わかりやすい本で助かっています。ありがとうございます。

さて、p. 062の下の表の、属性セレクタの一番下の項目E[attr|="value"]の「意味」ですが、このご説明では何のことかわからないと思うのですが...
「属性値がハイフン区切りで複数指定されており」とありますが、
W3Cのページをみると、"en-US”のような属性値のことを指していると思われるので、属性値が「複数指定されており」という説明は、失礼ながら、誤りのように思えます。
W3Cのページには「beginning with "val" immediately followed by "-" 」とあるので「属性値の先頭からハイフンの前までがマッチする」という意味だと思われます。

参考：http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

[att|=val]
Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D). This is primarily intended to allow language subcode matches (e.g., the hreflang attribute on the a element in HTML) as described in RFC 3066 ([RFC3066]) or its successor. For lang (or xml:lang) language subcode matching, please see the :lang pseudo-class.

益子です。
ご回答が遅れて申し訳ありません。

たしかに、
「属性値がハイフン区切りで複数指定されており」
は不要ですね。

次回増刷の際に、修正させていただきます。
ご指摘ありがとうございました。