『これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん』サポートサイト
このページは『これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん』のサポートページです。
サンプルファイル
本書で使用しているサンプルファイルをダウンロードできます。
ダウンロードはこちら → samplefiles.zip
訂正情報
■sanitize.cssのバージョンアップについて
本書で使用しているsanitize.cssはバージョン4.0.0ですが、公式サイトで配布されているバージョンは随時上がっています。公式サイトで配布されているバージョンをお使いになりますと、本書の内容と画面が異なることがあります。本書で勉強する際は、以下のバージョン4.0.0をお使いください。
以下の訂正がございます。ご迷惑をおかけして大変申し訳ございません。
===================
- ●82ページ :最後のコードの見出しが「index.html」となっておりましたが、「style.css」の誤りです。ご迷惑をおかけいたしました(2刷にて修正)。
===================
- ●125ページ :3つ目のCSSのコード5行目のコードにて、「and」が抜けていました。ご迷惑をおかけいたしました(2刷にて修正)。
- 誤)
- @media only screen (max-width:600px) {
- 正)
- @media only screen and (max-width:600px) {
===================
- ●127ページ :ソースコードの10行目から12行目のコードが不要でした。ご迷惑をおかけいたしました(3刷にて修正)。
- 削除)
-
.description h1 {
font-size: 14px; /* 文字サイズを少し小さくする */
}
===================
- ●154ページ :ソースコード4行目にて、不要な表記がありました。ご迷惑をおかけいたしました(3刷にて修正)。
- 誤)
- <form action="https://h2o-space.com/html-book/sample04/" method="post">
- 正)
- <form method="post">
===================
===================
- ●211ページ :比較演算子の表3行目(見出し行含む)にて、誤りがありました。ご迷惑をおかけいたしました(3刷にて修正)。
- 誤)
- A => B
- 正)
- A >= B
===================
- ●238ページ :index.htmlの9行目にて、誤りがありました。ご迷惑をおかけいたしました(3刷にて修正)。
- 誤)
- this.classList.remove('btn-default');
- 正)
- this.classList.remove('btn-primary');
===================
- ●240ページ :前のページから続くindex.htmlの10行目にて、誤りがありました。ご迷惑をおかけいたしました(3刷にて修正)。
- 誤)
- this.classList.remove('btn-default');
- 正)
- this.classList.remove('btn-primary');
===================
- ●240ページ :2つめのindex.htmlの6行目にて、誤りがありました。ご迷惑をおかけいたしました(3刷にて修正)。
- 誤)
- this.classList.remove('btn-default');
- 正)
- this.classList.remove('btn-primary');
===================
- ●247ページ :前のページから続くstyle.cssの52 行目は不要でした。ご迷惑をおかけいたしました(3刷にて修正)。
- 削除)
- font-color: #666; /* 文字色をグレーに */
- ●256ページ :「値のインデックスを取得する - indexOf」のコード2行目で、閉じカッコが1つ足りませんでした。ご迷惑をおかけいたしました(2刷にて修正)。
- 誤)
alert(pref.indexOf(' 青森県'); // 1 - 正)
alert(pref.indexOf(' 青森県')); // 1
===================
- ●262ページ :index.htmlの12 行目に誤りがありました。ご迷惑をおかけいたしました(3刷にて修正)。
- 誤)
- …+ images[i].date + …
- 正)
- …+ images[i].name + …
- ●272ページ :index.htmlの15行目が、JSONデータのキーと対応しておりませんでした。ご迷惑をおかけいたしました(2刷にて修正)。
- 正)
caption.innerHTML = '<p>' + data.caption + '<span>' + data.name + '</span></p>'; -
- ●277ページ :index.htmlの14-17行目において、<div class="container">の位置が間違っておりました。<div class="container">はheader要素の外側においてください。ご迷惑をおかけいたしました(2刷にて修正)。
- 誤)
<div class="container">
<header>
<h1>My Photos</h1>
</header>
<div id="img_unit"> -
- 正)
<header>
<h1>My Photos</h1>
</header>
<div class="container">
<div id="img_unit">
===================
- ●282ページ :1つ目のスクリプトコードで、クオテーションが1つ足りませんでした。100pxの前に追加します。ご迷惑をおかけいたしました(2刷にて修正)。
- 正)
- $('#img_unit').html(' ここに、画像リストが表示されます').css('margin-top', '100px');
===================
- ●293ページ :P.277と同様に、index.htmlの14-19行目において、「<div class="container">」の位置が間違っておりました。<header>は<div class="container">の外側においてください。ご迷惑をおかけいたしました(2刷にて修正)。
- 誤)
<div class="container">
<header>
<h1>My Photos</h1>
</header>
<div id="img_unit">
正)<header>
<h1>My Photos</h1>
</header>
<div class="container">
<div id="img_unit"> -
-
- ●294ページ :index.htmlの31行目(1刷では32行目)が、JSONデータのキーと対応しておりませんでした。ご迷惑をおかけいたしました(2刷にて修正)。
- 誤)
.append('<div class="inner"><p>' + data[i].memo + '<span>' + data[i].date + '</span></p></div>') - 正)
.append('<div class="inner"><p>' + data[i].caption + '<span>' + data[i].name + '</span></p></div>') -
補足情報
AppendixのP.304から紹介している「Node.js」ですが、Windows環境ではインストール時にエラーが出てしまうことが多いようです。お手数をおかけしますが、以下のサイトなどをご参考にしてください。
・Windows の Node.js 開発環境構築 最小手順
・Windowsでnpm installの赤いエラーに悩まされているアナタへ
- ●170ページ :ソースコード2行目にて、誤りがありました。ご迷惑をおかけいたしました(3刷にて修正)。
- 誤)
- @media screen and (max-width: 992px) {
- 正)
- @media only screen and (max-width: 992px) {