HTML5 プロフェッショナル認定試験レベル1 想定問題一覧

[問題ページ一覧]
>> Q.1～15 : HTMLの基礎知識、HTML5で変更・廃止・追加された要素
>> Q.16～30 : HTML4.01以前からある要素、ほか
>> Q.31～45 : CSSの基礎知識、CSS3の主な新機能、ほか
>> Q.46～60 : CSSの各種プロパティと値、ほか
>> Q.61～ : レスポンシブWebデザイン、ほか

Q46. CSSの各種プロパティと値(1) Webフォントの書式

【問題】 Webフォントを指定する際に使用する書式は以下のうちのどれか。1つ選びなさい。

A.　@import { … }
B.　@charset { … }
C.　@web-font { … }
D.　@font-face { … }
E.　@font-family { … }

>> 答えはこちら

Q47. CSSの各種プロパティと値(2) text-decoration要素

【問題】 CSS3で下線・上線・取消線の表示と非表示を指定可能なプロパティは以下のうちのどれか。該当するものをすべて選びなさい。

A.　text-decoration
B.　text-decoration-line
C.　text-decoration-color
D.　text-decoration-style
E.　text-decoration-border

>> 答えはこちら

Q48. CSSの各種プロパティと値(3) word-breakプロパティのbreak-all

【問題】 word-breakプロパティの値として「break-all」を指定するとどのような効果があるか。以下の中から正しいものを1つ選びなさい。。

A.　テキストの折り返しが一切行われなくなる
B.　テキストの折り返しがどこででも行われるようになる
C.　テキストの折り返しが単語間でのみ行われるようになる
D.　テキストの折り返しがの位置でのみ行われるようになる
E.　テキストの折り返しがwbr要素の位置でのみ行われるようになる

>> 答えはこちら

Q49. CSSの各種プロパティと値(4) hyphensプロパティ

【問題】 hyphensプロパティで、が入力されている箇所でのみハイフネーションが行われるようにしたい場合に指定すべき値はどれか。以下より1つ選びなさい。

A.　shy
B.　wbr
C.　soft
D.　hard
E.　manual

>> 答えはこちら

Q50. CSSの各種プロパティと値(5) 画像の下の隙間

【問題】背景色を指定したブロックレベル要素の中にコンテンツとして画像を1つだけ入れたら、画像の下に隙間ができていた。この隙間をなくすためにimg要素に指定すべき宣言は以下のうちどれか。適切なものを1つ選びなさい。

A.　margin: 0;
B.　padding: 0;
C.　border: none;
D.　text-align: bottom;
E.　vertical-align: bottom;

>> 答えはこちら

Q51. CSSの各種プロパティと値(6) marginプロパティ

【問題】 margin: 10px 20px 30px; と指定した場合、上下左右のマージンはそれぞれ何ピクセルになるか。正しいものを以下より1つ選びなさい。

A.　上：10px　下：20px　左：30px　右：30px
B.　上：10px　下：20px　左：20px　右：30px
C.　上：10px　下：30px　左：20px　右：20px
D.　上：10px　下：10px　左：20px　右：30px
E.　上：20px　下：20px　左：10px　右：30px

>> 答えはこちら

Q52. CSSの各種プロパティと値(7) box-sizingプロパティの初期値

【問題】 box-sizingプロパティの初期値は以下のうちのどれか。1つ選びなさい。

A.　margin-box
B.　border-box
C.　padding-box
D.　content-box
E.　auto

>> 答えはこちら

Q53. CSSの各種プロパティと値(8) カウンタ機能のプロパティ

【問題】 CSSで自動的に連番を表示させるカウンタ機能を利用する際に使用するプロパティはどれか。該当するものを以下よりすべて選びなさい。

A.　content
B.　counter-name
C.　counter-reset
D.　counter-increment
E.　counter-iteration-count

>> 答えはこちら

Q54. レスポンシブWebデザイン(1) レスポンシブWebデザインの説明

【問題】レスポンシブWebデザインの説明で正しいものをすべて選びなさい。

A.　複数のHTMLをデバイスの特性に応じて選択して表示する
B.　1つのHTMLでデバイスの特性に応じてCSSを切り替えることでレイアウトやデザインを変更する
C.　URLが同じとなるためSEO的に有利となる可能性がある
D.　デバイスの特性に応じて画面を切り替えるためにJavaScriptの利用が必須である
E.　画面サイズさえ合えば、現在存在しないデバイスにも対応可能となる

>> 答えはこちら

Q55. レスポンシブWebデザイン(2) レスポンシブWebデザインの技術名

【問題】レスポンシブWebデザインに必要な技術でないものをすべて選びなさい。

A.　Media Queries
B.　Fluid Box
C.　Fluid Grid
D.　Fluid Image
E.　ビューポート

>> 答えはこちら

Q56. レスポンシブWebデザイン(3) メディアクエリの説明

【問題】メディアクエリの説明で正しいものをすべて選びなさい。

A.　CSSの仕様の1つで、デバイスの特性に応じCSSを切り替える
B.　link要素のmedia属性を利用してCSSを切り替える
C.　media要素を利用してCSSを切り替える
D.　CSS内で@mediaを利用する
E.　CSS内で@queryを利用する

>> 答えはこちら

Q57. レスポンシブWebデザイン(4) メディアクエリで指定できないメディア特性

【問題】メディアクエリを利用する場合に指定できないメディア特性をすべて選びなさい。

A.　width
B.　screen-height
C.　orientation
D.　screen-width
E.　height

>> 答えはこちら

Q58. レスポンシブWebデザイン(5) リセットCSSの説明

【問題】リセットCSSの説明で正しいものをすべて選びなさい。

A.　リセットCSS専用のプロパティが存在する
B.　リセットCSSはJavaScriptの定義も初期化する
C.　リセットCSSにメディアクエリの定義を含まなければならない
D.　各WebブラウザのデフォルトCSSの差異を揃えるために利用する
E.　各WebブラウザのデフォルトCSSとして利用する

>> 答えはこちら

Q59. レスポンシブWebデザイン(6) CSSスプライトの説明

【問題】 CSSスプライトの説明で正しいものをすべて選びなさい。

A.　複数の画像を連結して1つにまとめ、HTMLで表示範囲を指定して各画像を使用する
B.　画像の数だけHTTPリクエストが発生するところを1つにまとめられるため、通信が遅く不安定なモバイル機器に有効である
C.　画像の数だけHTTPリクエストが発生するが、画像サイズを小さくできるため、通信が遅く不安定なモバイル機器に有効である
D.　background-imageで画像を表示し、表示範囲を指定する
E.　複数の画像を連結して1つにまとめ、CSSで表示範囲を指定して各画像を使用する

>> 答えはこちら

Q60. レスポンシブWebデザイン(7) 電話発信用リンクの設定

【問題】スマートフォンで電話発信用リンクを設定する方法をすべて選びなさい。

A.　a要素にhref=”phoneto: 電話番号”と指定する
B.　link要素にhref=”tel: 電話番号”と指定する
C.　a要素にhref=”tel: 電話番号”と指定する
D.　link要素にhref=”phoneto: 電話番号”と指定する
E.　電話発信用リンクは設定できない

>> 答えはこちら