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

教科書では教えてくれないHTML&CSS 正誤表

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

第2刷・第1刷をお持ちの方

p.272 CSSソースコード(2021/10/14)

.popular-photoクラスのスタイルに含まれる「position: relative;」が不要です。

誤)

.popular-photo {
  flex: 0 0 30%;
  margin-right: 15px;
  position: relative;
}
.popular-text {
  flex: 1 1 auto;
}

正)

.popular-photo {
  flex: 0 0 30%;
  margin-right: 15px;
}
.popular-text {
  flex: 1 1 auto;
}

 

 

第1刷をお持ちの方

p.094 本文(2021/8/25)

誤)
開発ツールのから2番目のボタン……

正)
開発ツールのから2番目のボタン……

p.258 実践のポイント(2021/10/14)

※コラムの内容がp.191と重複しているので完全に差し替えました。

誤)
SVGファイルの画像は「ベクター形式」と呼ばれる、拡大・縮小……積極的に使ってみましょう。おすすめです。

正)
「コラム 可能であれば画像はSVGで」(p.191)でもSVGフォーマット画像の利点を紹介しましたが、背景画像では特にそのメリットが大きいといえます。background-sizeプロパティを使うなど、背景画像でも大きな画像を縮小して表示するテクニックはありますが、状況によっていつでも使えるとは限りませんし、スタイルの設定も煩雑になるからです。一般にファイルサイズも小さくなるので、積極的に使ってみましょう。

p.094 本文(2021/10/14)

※初版の表現ではわかりにくかったので書き換えました。

誤)
「1/frの合計」

正)
そして、1frの大きさは「親要素の幅から固定値で指定された部分を引いて、frの合計で割った大きさ」になります。

p.272 HTMLソースコード(2021/8/5)

ソースコードの6行目、9行目に<a>タグが追加されます。

誤)

<!--- 人気記事 --->
<h2>Popular</h2>
<div class="home-popular">
  <div class="popular-item">
    <div class="popular-photo">
      <img src="images/popular-photo1.jpg" alt="">
    </div>
    <div class="popular-text">
      <h3>カフェめぐり3年間、まじめなコーヒーと素朴なスイーツに行き着いた</h3>
      <p>ほどよい苦味が心地よいコーヒーと、卵の味が濃い……生まれました。</p>
      <div class="home-info">
        <span>東京/Japan</span>
      </div>
    </div>
  </div>
  <div class="popular-item">
    ...
  </div>
  <div class="popular-item">
    ...
  </div>
</div>
<!--- /人気記事 --->

 

正)

<!--- 人気記事 --->
<h2>Popular</h2>
<div class="home-popular">
  <div class="popular-item">
    <div class="popular-photo">
      <a href="#"><img src="images/popular-photo1.jpg" alt=""></a>
    </div>
    <div class="popular-text">
      <h3><a href="#">カフェめぐり3年間、まじめなコーヒーと素朴なスイーツに行き着いた</a></h3>
      <p>ほどよい苦味が心地よいコーヒーと、卵の味が濃い……生まれました。</p>
      <div class="home-info">
        <span>東京/Japan</span>
      </div>
    </div>
  </div>
  <div class="popular-item">
    ...
  </div>
  <div class="popular-item">
    ...
  </div>
</div>
<!--- /人気記事 --->

 

p.289 本文(2021/10/14)

誤)
レイアウト自体は「3-16 チャット型のデザイン①〜ボックスを2つ並べる〜」と……

正)
レイアウト自体は「6-9 メディアオブジェクト」と……