習得度テスト／CSS3でアニメーション
HTML5+CSS3習得度テスト
（１）aside要素の使い方の中で不適切なものをひとつ選びなさい
1. 細目（注釈）を表記するとき
2. 注意事項ページなどで複数の文章を囲むとき
3. メールアドレスを表記するとき
4. 文字を小さくしたいとき ○
解説：そもそもHTMLに装飾要素ない
（２）a要素が内包できる要素を次の中からひとつ選びなさい
1. iframe要素
2. section要素 ○
3. a要素
4. button要素
解説：ボタンはクリックイベントなので、a要素の機能とダブる
（３）セクショニング・コンテンツではないものをひとつ選びなさい
1. nav要素
2. section要素
3. aside要素
4. article要素
5. h1要素 ○
（４）canvas要素 にはアニメーションを描画するAPIが存在する
1. YES
（５）video要素 について述べた以下の中から誤ったものをひとつ選びなさい
1. DRM等でコンテンツ保護ができない
2. サポートしてるコーディックがブラウザによって違う
3. video要素に対応したすべてのブラウザにおいて、プラグイン無しでフルスクリーン表示を実装できる ○
4. コントローラーのデザインはブラウザ独自のUIが利用される
解説：「すべて」のブラウザでフルスクリーンにできるとは限らない
（６）Geolocation APIの位置情報オブジェクトから取得できないものをひとつ選びなさい
1. 国 ○
2. 緯度・経度
3. 標高
4. 方角
5. 進行速度
解説：数字で表せないもの
（７）以下の記述でCSSが適用される要素はいくつあるか選びなさい
3. 2個
<section> <h1>items</h1> <p>itemA</p> /*←ここ！*/ <p>itemA</p> <p>itemA</p> <div id="sample"> <p>itemB</p> /*←ここ！*/ <p>itemB</p> <p>itemB</p><!-- /#sample --> </div> </section>
section p:first-of-type { color: #c00; }
アニメーション
マーキー
<link rel="stylesheet" href="style.css" media="only screen and (max-width:480px)"> <style> #mq{ overflow: -webkit-marquee; } </style> </head> <body> <p id="mq">4月20日まで期間限定セール実施中！</p> </body>
<title>幅から文字がはみ出すマーキー</title> <link rel="stylesheet" href="style.css" media="only screen and (max-width:480px)"> <style> #mq{ overflow: -webkit-marquee; white-space:nowrap; width: 100%; } </style> </head> <body> <p id="mq">4月20日まで期間限定セール実施中！ 2000円以上お買い上げのお客様に、もれなく粗品プレゼント！</p> </body>
<title>角度を変更した要素のマーキー</title> <link rel="stylesheet" href="style.css" media="only screen and (max-width:480px)"> <style> #mq{ overflow: -webkit-marquee; -webkit-transform:rotate(45deg); width: 50%; white-space: nowrap; position: absolute; top: 0.5em; right: -2.5em; } </style> </head> <body> <p id="mq">4月20日まで期間限定セール実施中！ 2000円以上お買い上げのお客様に、もれなく粗品プレゼント！</p> </body>
<title>角度を変更した要素のマーキー</title> <link rel="stylesheet" href="style.css" media="only screen and (max-width:480px)"> <style> #mq{ overflow: -webkit-marquee; -webkit-transform:rotate(45deg); width: 50%; white-space: nowrap; position: absolute; top: 0.5em; right: -2.5em; } </style> </head> <body> <p id="mq">4月20日まで期間限定セール実施中！ 2000円以上お買い上げのお客様に、もれなく粗品プレゼント！</p> </body>
CSS 条件付きで背景装飾
#mq { background-color: #903; background-image: -webkit-gradient(linear, left top, right top, from(#903), to(#903), color-stop(0.4, #f00), color-stop(0.6, #f00)); color: #fff; border: inset #999 1px; padding: 3px 0; }
連続移動背景
<meta name="viewport" content="width=device-width"> <title>無限背景</title> <style> body { background-image: url("ipod_sazae.gif"); background-repeat: repeat-x; -webkit-animation: bck_move 360s linear 0 infinite; } @-webkit-keyframes 'bck_move' { from { background-position-x:left; } to { background-position-x:-2753px; } } </style> </head>
元：Studio-蔵
