XHTML/HTML+CSSスーパーレシピブック

エ・ビスコム・テック・ラボ[著]
ISBN978-4-8399-3276-3
2009/12発売

詳細ページへ

ダウンロード

本書のサンプルファイルです。

sample.zip（7.8MB、2012/06/28修正）

・ZIP形式で圧縮してあります。（以前はパスワードで保護されたファイルを配布していましたが、現在はパスワードなしで解凍できるものを配布しています）

■収録内容について

本書で作成するパーツおよびレシピの完成ソースと画像データを収録しました。パーツの作成方法などについては、本書を参照してください。

・データは章とパーツごとにフォルダに分けて収録しました。たとえば、「Chapter 2 ヘッダー」の「HEADER 04」のデータは、/sample/02header/header04/ に収録してあります。

・HTML/XHTMLとCSSの設定は１つのソースに記述してあります。たとえば、「HEADER 04」のソースは「header04.html」に、カスタマイズパターン【Ａ】のソースは「header04a.html」に、CSS3に関するTIPSのソースは「tips_css3.html」に記述してあります。

・Chapter 1の「base_～.html」は<div>とCSSの設定だけを記述したソースとなっています。パーツを組み合わせて利用するときのベースとして利用してください。

・ソースはUTF-8で保存してありますので、利用する場合にはUTF-8に対応したエディタで開くか、ブラウザでソースを開き、コピーして利用してください。

・各パーツと収録フォルダへのリンクはindex.htmlにまとめてありますので、ブラウザで開いてご利用ください。

■ご利用にあたって

本書に記載されている内容や本ダウンロードデータの運用によって、いかなる損害が生じても、株式会社マイナビおよび著者は責任を負いかねますので、あらかじめご了承ください。

訂正情報

以下の訂正情報がございます。お客様にはご迷惑をおかけしました。

■P028（～初版第4刷）

完成CSSソース中にミスがありました。なお、サンプルファイルは問題ありません。

●誤：

#content　　 {width: 500px;
　　　　　　　　float: left;
　　　　　　　　margin: 30px 0;}
#sidebar01　{width: 170px;
　　　　　　　　float: right;
　　　　　　　　margin: 30px 0;}

●正：

#content 　　{width: 500px;
　　　　　　　　float: right;
　　　　　　　　margin: 30px 0;}
#sidebar01　{width: 170px;
　　　　　　　　float: left;
　　　　　　　　margin: 30px 0;}

■P040（～初版第4刷）

完成CSSソース中にミスがありました。なお、サンプルファイルは問題ありません。

●誤：

#main 　　　 {width: 100%;
　　　　　　　　float: left;
　　　　　　　　margin-right: -230px;}
#content 　　{width: 100%;
　　　　　　　　float: right;
　　　　　　　　margin: 30px 0;
　　　　　　　　margin-left: -230px;}

●正：

#main 　　　 {width: 100%;
　　　　　　　　float: left;
　　　　　　　　margin-right: -200px;}
#content 　　{width: 100%;
　　　　　　　　float: right;
　　　　　　　　margin: 30px 0;
　　　　　　　　margin-left: -200px;}

■P045（～初版第2刷）

「基本　ボックスの横幅の指定方法」解説中、本文5行目にミスがありました。

●誤：

この場合、ボックスの横幅は350ピクセルになります。

●正：

この場合、ボックスの横幅は400ピクセルになります。

■P045（～初版第2刷）

「基本　ボックスの横幅の指定方法」の右上にある解説図にミスがありました。「ボックスの横幅」は350ピクセルではなく、400ピクセルになります。以下に正しい図を掲載します。

●正：

■P123（～初版第1刷）

「MENU03」において、ページ左上のソースにミスがありました。子階層のリスト中の</li>が抜けていました。

●誤：

<div class="menu">
<ul>
<li><a href="#">メニューのリンク１</a>
　 <ul>
　 <li><a href="#">サブリンク１</a>
　 <li><a href="#">サブリンク２</a>
　 <li><a href="#">サブリンク３</a>
　 </ul>
</li>
<li><a href="#">メニューのリンク２</a>
　 <ul>
　 <li><a href="#">サブリンク１</a>
　 <li><a href="#">サブリンク２</a>
　 <li><a href="#">サブリンク３</a>
　 </ul>
</li>
</ul>
</div>

●正：

<div class="menu">
<ul>
<li><a href="#">メニューのリンク１</a>
　<ul>
　<li><a href="#">サブリンク１</a></li>
　<li><a href="#">サブリンク２</a></li>
　<li><a href="#">サブリンク３</a></li>
　</ul>
</li>
<li><a href="#">メニューのリンク２</a>
　<ul>
　<li><a href="#">サブリンク１</a></li>
　<li><a href="#">サブリンク２</a></li>
　<li><a href="#">サブリンク３</a></li>
　</ul>
</li>
</ul>
</div>

■P125（～初版第1刷）

「MENU03」において、ページ右下のソースにミスがありました。子階層のリスト中の</li>が抜けていました。

●誤：

<div class="menu">
<ul>
<li><a href="#">メニューのリンク１</a>
　 <ul>
　 <li><a href="#">サブリンク１</a>
　 <li><a href="#">サブリンク２</a>
　 <li class="last"><a href="#">サブリンク３</a>
　 </ul>
</li>
<li><a href="#">メニューのリンク２</a>
　 <ul>
　 <li><a href="#">サブリンク１</a>
　 <li><a href="#">サブリンク２</a>
　 <li class="last"><a href="#">サブリンク３</a>
　 </ul>
</li>
</ul>
</div>

●正：

<div class="menu">
<ul>
<li><a href="#">メニューのリンク１</a>
　 <ul>
　 <li><a href="#">サブリンク１</a></li>
　 <li><a href="#">サブリンク２</a></li>
　 <li class="last"><a href="#">サブリンク３</a></li>
　 </ul>
</li>
<li><a href="#">メニューのリンク２</a>
　 <ul>
　 <li><a href="#">サブリンク１</a></li>
　 <li><a href="#">サブリンク２</a></li>
　 <li class="last"><a href="#">サブリンク３</a></li>
　 </ul>
</li>
</ul>
</div>

■P175（～初版第5刷）

「解説」の項2番目の図「リンクに画像を表示したもの。」にミスがありました。「メニューのリンク2」のボックスの幅は20pxではなく120pxになります。以下に正しい図を掲載します。

●正：

■P212（～初版第4刷）

Ｔｉｐｓ「1枚の画像でサイズ可変な枠を作成する」のCSSソース中にミスがありました。

●誤：

.post_inner
　　{padding: 10px;
　　border: solid 5px #0c907c;
　　-webkit-border-image:
　　　　url("waku.png") 20 20 20 20 / 20px repeat;
　　-moz-border-image:
　　　　url("waku.png") 20 20 20 20 / 20px repeat;}

●正：

追加情報

■Opera10.50リリースに伴う追加情報（2010/03/09）

●P.151「CSS3のグラデーション／角丸／ドロップシャドウで見出しを装飾する」

Opera 10.5が角丸とドロップシャドウの表示をサポート。サンプルで対応するには以下の★の箇所のようにborder-radiusとbox-shadowの設定を追加します。グラデーションの表示には未対応です。

…略…
　　　border: solid 2px #ffcf59;
　　　-webkit-border-radius: 4px;
　　　-moz-border-radius: 4px;
★　 border-radius: 4px;
　　　-webkit-box-shadow: 2px 2px 2px #aaaaaa;
　　　-moz-box-shadow: 2px 2px 2px #aaaaaa;
★ 　box-shadow: 2px 2px 2px #aaaaaa;

　　　line-height: 34px;
…略…

●P.160「角丸の枠をスタイルシートで作成する」

Opera 10.50が角丸の表示をサポート。サンプルで対応するには、以下のようにborder-radiusの設定を追加します。

/* 枠のデザイン */
.menu　　 {background-color: #0088cc;
　　　　　　 -moz-border-radius: 15px;
　　　　　　 -webkit-border-radius: 15px;
★ 　　　　 border-radius: 15px;}

●P.160「角丸の罫線をスタイルシートで作成する」

Opera 10.50が角丸の表示をサポート。サンプルで対応するには、以下のようにborder-radiusの設定を追加します。

/* 枠のデザイン */
.menu_inner　　 {border: solid 5px #0088cc;
　　　　　　　　　　-moz-border-radius: 15px;
　　　　　　　　　　-webkit-border-radius: 15px;
★ 　　　　　　　　border-radius: 15px;
　　　　　　　　　　padding: 20px;}

●P.161「１枚の画像でサイズ可変な罫線を作成する」

Opera 10.50がborder-imageをサポート。サンプルで対応するには、以下のようにborder-imageの設定を追加します。

/* 枠のデザイン */
.menu_inner　　 {border: solid 5px #0088cc;
　　　　　　　　　　-webkit-border-image: url("border.png") 20 20 20 20 / 20px;
　　　　　　　　　　-moz-border-image: url("border.png") 20 20 20 20 / 20px;
★　　　　　　　　 border-image: url("border.png") 20 20 20 20 / 20px;
　　　　　　　　　　padding: 10px;}

●P.177「複数の背景画像を表示する」

Opera 10.50が複数の背景画像の表示をサポート。サンプルの修正は不要です。

●P.212「１枚の画像でサイズ可変な枠を作成する」

Opera 10.5がborder-imageをサポート。サンプルで対応するには、以下のようにborder-imageの設定を追加します。このとき、「/ 20px」と「repeat repeat」を一緒に指定すると機能しなくなるという問題が見られるため、border-imageで「/ 20px」は指定せず、border-widthで指定するようにしています。

.post_inner
　　　　　{padding: 10px;
　　　　　border: solid 5px #0c907c;
　　　　　-webkit-border-image: url("waku.png") 20 20 20 20 / 20px repeat repeat;
　　　　　-moz-border-image: url("waku.png") 20 20 20 20 / 20px repeat repeat;
★　　　 border-image: url("waku.png") 20 20 20 20 repeat repeat;
★ 　　　border-width: 20px;}