HTML5 & CSS3 デザインレシピ集

サポートページ

この記事を読むのに必要な時間:およそ 0.5 分

ダウンロード

(2018年7月25日更新)

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

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

ダウンロードファイルに不備がありましたので,更新しました。2018年7月24日以前にダウンロードされた方は,お手数ですが,再度ダウンロードいただきますよう,お願いいたします。

ダウンロード
HTML_sample.zip

お詫びと訂正(正誤表)

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

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