【 検定科目はHTML5 】

教科書

なかしまぁ先生の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要素 後方から2行目:「 </section> 」は不要

    		<section>
    			<h3>1-3.見出し</h4>
    			<p>文章</p>
    		<section>
    	<section>
  • (17p) 9.article要素 後方から2行目:「img要素については画像のの」の2つ目の「の」は不要

    img要素については画像の要素ですが、コンテナではないので次の時限で説明します。
  • (18p) 12.blockquote 後方1行目:「著作権なるほど質問箱(リンク)」は削除

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要素 説明文2行目:「 canvas要素の詳細はJavaScript編で解説します 」は削除。

  • (33p) 10.canvas要素 ソース5行目:「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:ソースサンプルの5,6行目の値を修正。

    	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プロパティ:3つめのコードサンプルの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プロパティ:4つめのコードサンプルの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つめ、2つめのコードサンプルの「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:「乱数」のコメントの「数宛ゲーム」を「数当てゲーム」に修正

    これを先の数当てゲームに応用してみてください。
教科書全体
  • 第2版以降は「1年生〜3年生」を「1学期〜3学期」に変更しています。