BOOK Studio947
狩野祐東・狩野さやか著書

HTML5&CSS3デザインレシピ集 正誤表

書籍『HTML5&CSS3デザインレシピ集』の内容に誤りがありました。ここに訂正してお詫び申し上げます。
なお、出版社技術評論社のサイトにも正誤情報が公開されています。基本的に同じものが掲載されていますが、更新のタイミングによって一時的に内容が異なる場合があります。そちらも併せてご参照ください。

更新履歴

第4刷(未修正、2020/11/25現在)

p.118 ── 要素/プロパティのCSSプロパティ

誤)
font-weight: normal;
正)
font-style: normal;

p.244 上から2番目の書式

誤)
・書式 background-repeatプロパティ
正)
・書式 background-attachmentプロパティ

p.348 ── テキスト右段5行目

誤)
CSSを適用する方法については「184」で…
正)
CSSを適用する方法については「183」で…

p.505-p.506 ── Step2, Step3, Step4, Step5の図

誤)
図中の「maincol」
正)
「maincol-container」

p.569 ── サンプル275のCSS

誤)

/* メインコンテンツレイアウト部分 */
...
@media screen and (min-width: 768px) {
  ...
  .sidebar {
    float: left;
    margin: 0 20px 0 20px;
    width: 300px;
  }
  ...
}

正)

/* メインコンテンツレイアウト部分 */
...
@media screen and (min-width: 768px) {
  ...
  .sidebar {
    position: relative;
    float: left;
    margin: 0 20px 0 20px;
    width: 300px;
  }
  ...
}

第3刷

第4刷で修正済みです。

p.493 要素 / プロパティ ─ CSSプロパティ

誤)
text-indent; 空けたい大きさ;
── 段落の1行目の始まりをずらす » 057

正)
font-size: フォントサイズ
── フォントサイズを指定する » 046

第1刷

第2刷で修正済みです。

p.42 詳細度

誤)maginプロパティの値は「0」になります。
正)marginプロパティの値は「0」になります。

p.76 HTML

誤)

厳選された…絶妙ほろ苦さの…

正)

厳選された…絶妙なほろ苦さの…

p.104 おもなカラーキーワード 表

誤)yellow #000000
正)yellow #FFFF00

p.146 箇条書きのマークを変更したい

このサンプルでは、list-style-typeプロパティ(list-styleショートハンド含む)に文字列を指定する例を紹介していますが、文字列を指定して正しく動作するのは、2017/5/22現在、Firefox 39.0以降のみであることがわかりました。各ブラウザの対応状況については次のページもご覧ください。

list-style-type – CSS | MDN

p.148 CSS

誤)list-style-type: decimal-leading-zero;
正)list-style: decimal-leading-zero;

p.178 もとの画像データがGIFファイルの場合

誤)<img src=”data:image/png;base64,データ”>
正)<img src=”data:image/gif;base64,データ”>

p.263 CSS

誤)background-image: url(../images/bg.jpg) center bottom no-repeat;
正)background: url(../images/bg.jpg) center bottom no-repeat;

p.463 HTML

誤)
<div class=”box”><img src=”images/photo1.jpg” width=”100%” alt=””></div>
<div class=”box”><img src=”images/photo2.jpg” width=”100%” alt=””></div>
<div class=”box”><img src=”images/photo3.jpg” width=”100%” alt=””></div>
<div class=”box”><img src=”images/photo4.jpg” width=”100%” alt=””></div>
<div class=”box”><img src=”images/photo5.jpg” width=”100%” alt=””></div>
正)
<div class=”box”><img src=”images/photo1.jpg” alt=””></div>
<div class=”box”><img src=”images/photo2.jpg” alt=””></div>
<div class=”box”><img src=”images/photo3.jpg” alt=””></div>
<div class=”box”><img src=”images/photo4.jpg” alt=””></div>
<div class=”box”><img src=”images/photo5.jpg” alt=””></div>

p.516 本文6行目

誤)フロートを使った2コラムレイアウトは「まずはじめに……
正)フロートを使った3コラムレイアウトは「まずはじめに……