書籍『教科書では教えてくれないHTML&CSS』の内容に誤りがありました。ここに訂正してお詫び申し上げます。
なお、出版社技術評論社のサイトにも正誤情報が公開されています。基本的に同じものが掲載されていますが、更新のタイミングによって一時的に内容が異なる場合があります。そちらも併せてご参照ください。
誤)
解説 モバイル向け表示ではフレックスボックスを使用しない
正)
解説 PC向け表示ではフレックスボックスを解除する
.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;
}
誤)
開発ツールの右から2番目のボタン……
正)
開発ツールの左から2番目のボタン……
※コラムの内容がp.191と重複しているので完全に差し替えました。
誤)
SVGファイルの画像は「ベクター形式」と呼ばれる、拡大・縮小……積極的に使ってみましょう。おすすめです。
正)
「コラム 可能であれば画像はSVGで」(p.191)でもSVGフォーマット画像の利点を紹介しましたが、背景画像では特にそのメリットが大きいといえます。background-sizeプロパティを使うなど、背景画像でも大きな画像を縮小して表示するテクニックはありますが、状況によっていつでも使えるとは限りませんし、スタイルの設定も煩雑になるからです。一般にファイルサイズも小さくなるので、積極的に使ってみましょう。
※初版の表現ではわかりにくかったので書き換えました。
誤)
「1/frの合計」
正)
そして、1frの大きさは「親要素の幅から固定値で指定された部分を引いて、frの合計で割った大きさ」になります。
ソースコードの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>
<!--- /人気記事 --->
誤)
レイアウト自体は「3-16 チャット型のデザイン①〜ボックスを2つ並べる〜」と……
正)
レイアウト自体は「6-9 メディアオブジェクト」と……