教科書

なかしまぁ先生のHTML5教室(初版)

正誤表

1年生 HTML編

5時限目

(12p) 最初のソースのmain要素、footer要素：右への字下げをしてください

<body>
	<div id="wrap>
		<header></header>
		<nav></nav>
		<main>
			<section></section>
			<section></section>
		</main>
		<aside><aside>
		<footer></footer>
	<div>
</body>

(13p) 3.nav要素　ソースの3~5行：href属性の値に「.html」をつける

<li><a href="page1.html">ページ1</a></li>
<li><a href="page1.html">ページ2</a></li>
<li><a href="page1.html">ページ3</a></li>

(15p) 8.section要素　8行目、12行目：h3要素はh4要素に修正

		<section>
			<h4>1-1-1.見出し</h4>
			<p>文章</p>
		<section>
		<section>
			<h4>1-1-2.見出し</h4>
			<p>文章</p>
		<section>

(15p) 8.section要素：ページ最下部の終了タグ「</section>」を開始タグに修正
```
<section>
```

(16p) 8.section要素　後方から２行目:「 </section> 」は不要

		<section>
			<h3>1-3.見出し</h4>
			<p>文章</p>
		<section>
	<section>

(17p) 9.article要素　後方から２行目：「img要素については画像のの」の２つ目の「の」は不要
```
img要素については画像の要素ですが、コンテナではないので次の時限で説明します。
```
(18p) 12.blockquote 後方１行目：「著作権なるほど質問箱（リンク）」は削除

6時限目

(22p) 9.span要素：ソース最後の行の末尾「います」を修正
```
…</span>します。
```
(24p) 14.sub・sub要素：タイトルを修正
```
14.sup・sub要素
```

(25p) 16.mark要素　3〜4行目：ソースコードになります

<p>ハイライト表示です。
例えば、コンテンツの引用時に<mark>引用者が注目してもらいたい
箇所</mark>を明らかにするためにマーカーをつけます。</p>

7時限目

(32p) 7.マルチメディア　2つめのソース5行目：ファイル名「audioSample.wav」を「sample/audio.wav」に修正
```
		<source src="sample/audio.wav">
```
(33p) 10.canvas要素　説明文２行目：「 canvas要素の詳細はJavaScript編で解説します」は削除。
(33p) 10.canvas要素　ソース５行目：「MYCANVAS」は「mycanvas」に修正
```
		const myctx = mycanvas.getContext("2d");
```

2年生 CSS編

2時限目

(40p) 2.classセレクタ：ソース下から1~2行目を修正
```
<p class="css1">本文2</p>
<p class="css1">本文3</p>
```

(40p) 3.idセレクタ：ソース下から1~2行目を修正

<p class="css1" id="id1">本文2</p>
<p class="css1">本文3</p>

(41p) 5.複数指定：説明文を修正

また、classは複数つけられますので、こんな指定もできます。

4時限目

(50p) 「6.ユーザアクション擬似クラス :focus()」の「()」を削除
```
6.ユーザアクション擬似クラス:focus
```
(50p) 「7.ターゲット擬似クラス :target()」の「()」を削除
```
7.ターゲット擬似クラス:target
```

5時限目

(54p) 「3.class属性セレクタ：ソース2行目のプロパティと値を変更
```
div[class~="css1"]{font-size:30px;}
```

7時限目

(60p) 2.widthとheight：ソースサンプルの５，６行目の値を修正。
```
	div{
		border:1px solid blue;
		width:200px;
		height:200px;
	}
```

9時限目

(67p) 1.background：2つめのソースの7行目:「background-image:url(bgimg.png)」の最後に「;(セミコロン)」を追加
```
background-image:url(bgimg.png);
```

10時限目

(71p) ページ中程の以下の行：「このラインより上のエリアが無料で表示されます。」は削除

16時限目

(91p) 2.keyframes：3つめのコードサンプルの4行目のtransformの値「translate」を「scale」に修正
```
		100%{transform:scale(1,1);}
```
(92p) 3.animation-fill-mode：最後の文章の1行目の「Flas」を修正
```
…ページのアイキャッチなどは従来はFlashという…
```

18時限目

(97p) 1.子要素にanimationプロパティ：３つめのコードサンプルのrotateYの値を「30deg」に修正

		@keyframes mystory{
			0%{
				transform:rotateY(30deg) translateX(-500px);
				opacity:0;
			}
			30%,70%{opacity:1;}

			100%{
				transform:rotateY(30deg) translateX(500px);
				opacity:0;
			}
		}

(98p) 1.子要素にanimationプロパティ：４つめのコードサンプルのrotateYの値を追加

		@keyframes mystory{
			0%{transform:rotateY(30deg) scaleX(0.5) scaleY(1);}
			50%{transform:rotateY(30deg) scaleX(1) scaleY(0.5);}
			100%{transform:rotateY(30deg) scaleX(0.5) scaleY(1);}
		}

19時限目

(100p) 1.メディアクエリ：1つめ、２つめのコードサンプルの「min-width:800px」を「max-width:800px」に修正
```
		@media(max-width:800px){
			#wrap{width:100%;}
		}
```

(100p) 1.メディアクエリ：ページ真ん中の説明文のmin-widthをmax-widthに、max-widthをmin-widthに変更

max-widthはメディア属性といいます。
このコードでは表示領域(viewport)が800px以下だったら
{}内のCSSを有効にする働きがあります。
(media属性はmax-widthの他にmin-widthもあります。)

(100p) 1.メディアクエリ：2つめのソースの4行目:「background-color:gray:」の最後の「:(コロン)」を「;(セミコロン)」に修正
```
		background-color:gray;
```

3年生 JavaScript編

4時限目

(112p) 1.input要素　5つめのソース：4~5行にソース「const input1 …」を挿入

<script>
	 const input1 = document.getElementById("input1");
	 const output1 = document.getElementById("output1");

5時限目

(116p) 1.style：以下のコードはソースになります。枠線をつけてください。
```
#box1{color:red;}
```
```
box1.style.color="red";
```

7時限目

(125p) 8.Math：
切り捨て、四捨五入、切り上げのMath…()内の数字を「1.414」から「3.14」に変更
```
let a = Math.floor(3.14);
```
```
let a = Math.round(3.14);
```
```
let a = Math.ceil(3.14);
```
(125p) 8.Math：「乱数」のコメントの「数宛ゲーム」を「数当てゲーム」に修正
```
これを先の数当てゲームに応用してみてください。
```

教科書全体

第２版以降は「１年生〜３年生」を「１学期〜３学期」に変更しています。