やってみよう - web-0127のブログ

HTML5実力テスト

nav要素

nav要素の用法として、最も不適切なものを選べ

サイトのグローバルナビゲーション
フッターに設置したグローバルナビゲーション
グローバルナビゲーションの下に設置したパンくずナビゲーション
サイトマップページのサイト内リンク

section要素

section要素に関する以下の記述について、最も不適切なものを選べ

h1〜h6の見出し要素を必ずしも内包する必要はない。
セクショニング・コンテンツに分類される
article要素、およびaside要素を内包してはいけない
フロー・コンテンツの1つにsection要素がある

廃止

以下の要素のうち、HTML5で廃止となった要素を選べ

embed
strike
map
small

デザイン

以下の HTML/CSS を Webkit系ブラウザで表示した時に、最も期待されるデザインを選べ

《HTML》

<div id="box">実力テスト</div>

《CSS》

#box {
  width: 200px; 
  padding: 20px 0; 
  background: #FBA; 
  border: solid 10px #FF0;
  box-shadow: inset 5px 5px 10px 0 #F00;
  box-sizing: border-box; 
  text-align: center;
}
#box:before {
  content: "HTML5";
}

列挙属性

以下の中から、列挙属性でないものを選べ

contenteditable
autocomplete
draggable
autoplay

figure要素

figure要素に関する以下の記述について、最も不適切なものを選べ

写真、表などのキャプションが付くコンテンツを内包する
内包するfigcaption要素はfigure要素内で最初か最後でなければならない
figcaption要素とimg要素を内包した場合、img要素のalt属性を省略できる
写真、表に対するキャプションはfigcaption要素でマークアップする

CSS3

以下のうち、CSS3で定義されていないセレクタを選べ

.example:local-link { … }
.example:empty { … }
.example:nth-last-of-type(5) { … }
.example:not(.example2) { … }

CSSプロパティ

以下のうち、存在しないCSSプロパティを選べ

object-position
background-transform
ruby-align
column-gap

マークアップ

以下のマークアップ例のうち、不適切なものを選べ

1.《HTML》

<section><a href="..."><div>テキスト</div></a></section>

2.《HTML》

<p><a href="..."><video  src="..."></video></a></p>

3.《HTML》

<ruby><em>全国</em>統一<rt><em>ぜんこく</em>とういつ</rt></ruby>

4.《HTML》

<ul><li>...</li><ins><li>...</li></ins></ul>

デザイン

ブラウザのウインドウサイズが600pxのとき、以下のHTML/CSSで、最も期待されるデザインを選べ

《HTML》

<header>Header</header>
<div class="content">
<section class="section1">Content1</section>
<section class="section2">Content2</section>
</div>

《CSS》

header, section {
  height: 100px;
  line-height: 100px;
  color: white;
}
.content {
  display: table;
  width: 100%; 
  background: gray;
}
section {
  display: table-cell;
}
@media screen and (min-width: 500px) {
  header { background: blue; }
  .section1 { background: gold; }
  .section2 { background: yellowgreen; }
}
@media screen and (max-width: 700px) {
  header { background: black; } 
  .section1 { background: orange; }
}
@media screen and (max-width: 500px) {
  header { background: red; } 
  .section2 { background: green; }
}

HTML5で新しく追加された属性

以下の、要素とその要素にHTML5で新しく追加された属性の組み合わせのうち、間違っているものを選べ

要素：script　新しく追加された属性：async
要素：iframe　新しく追加された属性：seamless
要素：textarea　新しく追加された属性：accesskey
要素：style　新しく追加された属性：scoped

画像のドラッグ操作を禁止

画像のドラッグ操作を禁止するための以下の指定のうち、期待通りに動作しないものを以下から選べ（Webkit系ブラウザであるとする）

1.《HTML》

<img  src="sample.png" draggable="false" />

2.《HTML》

<img  src="sample.png" ondrag="return false;"  />

3.《HTML》

<img  src="sample.png" onmousedown="event.preventDefault();"  />

4.《HTML》

<img  src="sample.png" style="-webkit-user-drag:  none;" />

CSSアニメーション

以下のCSSアニメーションを指定した際の、最も期待できる挙動を選べ（Webkit系ブラウザであるとする）

《css》

.box {
  -webkit-animation-name: "html5test"; 
  -webkit-animation-duration: 3s; 
  -webkit-animation-timing-function: cubic-bezier( 1, 0, 0, 1 ); 
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}
@-webkit-keyframes "html5test" {
  0% {
    -webkit-transform: translate( -50px, 0 );
  } 
  25% {
    -webkit-transform: translate( 0, -50px );
  }
  50% {
    -webkit-transform: translate( 50px, 0 );
  }
  75% {
    -webkit-transform: translate( 0, 50px );
  }
  100% {
    -webkit-transform: translate( -50px, 0 );
  }
}

form要素

以下の画像のような入力候補を表示するテキストボックスを、実装するためのHTMLを以下から選べ

1.《HTML》

<input type="text" autocomplete="on" list="words" placeholder="Search…">
<datalist id="words">
<option value="KEYWORD1">
<option value="KEYWORD2">
<option value="KEYWORD3">
</datalist>

2.《HTML》

<input type="listbox" autocomplete="on" target="words" placeholder="Search…">
<datalist id="words">
<option value="KEYWORD1">
<option value="KEYWORD2">
<option value="KEYWORD3">
</datalist>

3.《HTML》

<details>
<summary>Search…</summary>
<ul>
<li>KEYWORD1</li>
<li>KEYWORD2</li>
<li>KEYWORD3</li>
</ul>
</details>

4.《HTML》

<details>
<summary>Search…</summary>
<option value="KEYWORD1">
<option value="KEYWORD2">
<option value="KEYWORD3">
</details>

audio要素

以下のaudioサウンドに、自動再生およびくり返し再生の機能を追加するために、audioタグに必要な論理属性の組み合わせを以下から選べ

《HTML》

<audio  id="bgm" controls preload><source src="http://calmbooks.me/materials/sound/pon.ogg"  /><source src="http://calmbooks.me/materials/sound/pon.mp3"  /></audio>

autoplay と loopplay
loop と autocomplete
loop と autoplay
autoplay と infinite