技術評論社サイトのロゴ

HTML5 & CSS3 デザインレシピ集

サポートページ

ダウンロード

（2021年5月11日更新）

本書のサンプルファイルを、下記リンクからダウンロードすることができます。

ダウンロードしていただくファイルは、ZIP形式の圧縮ファイルです。展開してお使いください。ダウンロードにミスがあると正しく展開できませんので、よくお確かめください。

ダウンロード
HTML_sample.zip

なお、以下のサンプルに不備がありましたので、修正いたしました。
2021年5月11日以前にダウンロードされた方は、お手数ですがダウンロードし直していただきますよう、お願いいたします。

  • Chapter 14「275」（2021年5月11日更新）
  • Chapter 8「145」（2020年9月9日更新）

お詫びと訂正（正誤表）

本書の以下の部分に誤りがありました。ここに訂正してお詫び申し上げます。

（2021年9月3日最終更新）

初版第1～4刷をお持ちの方
P.118　要素/プロパティ　CSSプロパティ

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

P.244　コラム　12行目

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

P.348　本文　右の段、5行目

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

P.348　ブラウザ表示　キャプション　2行目

誤 ます。詳しくは「185」で取り上げています。
正 ます。詳しくは「183」で取り上げています。

P.569　CSS　右の段　5～6行目

誤
.sidebar {
    float: left;
正
.sidebar {
    position: relative;
    float: left;

初版第1～3刷をお持ちの方
P.493　要素/プロパティ　CSSプロパティ

誤
text-indent: 空けたい大きさ;
 ―― 段落の1行目の始まりをずらす　［057］
正
font-size: フォントサイズ;
 ―― フォントサイズを指定する　［046］

（以下2018年7月25日更新）

初版第1刷をお持ちの方

P.146　本文　6行目

誤 「・」の代わりに「-」を表示して
正 「・」の代わりに「■」を表示して

P.146　要素/プロパティ　CSSプロパティ

誤 
list-style: "マークに表示する文字（列）";
正 
list-style: マークの種類;

P.146　CSS　3行目

誤 
list-style: "-";
正 
list-style: square;

P.147　ブラウザ表示

誤
誤
正
正

クリックすると大きく表示できます。

P.147　コラム　1～8行目

誤 list-styleプロパティの値に、サンプルで紹介したようにダブルクォートで囲んだ文字列を指定すると、その文字列がリスト項目の先頭に表示されます。また、文字列を指定する以外にも、list-styleプロパティに設定できる、あらかじめ決められた値（キーワード）がいくつかあります。これらの
正 list-styleプロパティは、箇条書きの各項目の先頭に表示されるマークを設定するために使用します。このプロパティの値には、下表にあるあらかじめ決められた値（キーワード）のどれかを指定します。なお、これらの

初版第1～2刷をお持ちの方
P.260　脚注

誤 ※この場合の使用例は「231」で取り上げています。
正 ※この場合の使用例は「222」や、「277」「278」でハンバーガーメニューボタンを表示するためのCSS（P.573）を参考にしてみてください。

（以下2017年3月23日更新）

初版第1刷をお持ちの方
P.27　本文　下から9行目

誤 詳しくは「517」「518」で取り上げています。
正 詳しくは「089」「090」で取り上げています。

P.42　本文　下から4行目

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

P.76　HTML　9行目

誤 
<p>厳選された…絶妙ばほろ苦さの…</p>
正
<p>厳選された…絶妙なほろ苦さの…</p>

P.104　表「おもなカラーキーワード」　9行目

誤 yellow #000000
正 yellow #FFFF00

P.148　CSS　3行目

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

P.178　本文　右の段、下から2行目

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

P.263　CSS　8行目

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

P.463　HTML　2～6行目

誤 
<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コラムレイアウトは「まずはじめに……