• このエントリーをはてなブックマークに追加

HTML5プロフェッショナル認定試験レベル1 サンプル問題

例題解説とその内容については、例題提供者の監修です。内容や試験問題に関わるお問い合わせにつきましては、LPI事務局ではお応えできませんのでご了承ください。
例題解説のご提供者さまを募集中です。LPI-Japan事務局までぜひご投稿ください。選ばれた方の例題解説は本サイトに掲載させていただきます。

1.2 CSS3 に関する問題

例題2.21「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
transformプロパティで指定できない関数を1つ選びなさい。
  • perspective
  • rotate3d
  • scale3d
  • translate3d
  • opacity

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.20「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
CSSを使って英単語の先頭だけを大文字表示する場合、text-transformプロパティに設定する値として正しいものを選びなさい。
  • ucfirst
  • capitalize
  • uppercase
  • camelcase
  • proper

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.19「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
CSS3のアニメーションの@keyframesの書式内において、「100%」の代わりに使用できるキーワードを1つ選びなさい。
  • to
  • end
  • over
  • last
  • finished

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.18「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
CSS3の背景に関する記述のうち正しいものをすべて選びなさい。
  • すべての背景関連プロパティは、カンマ区切りで複数の値を指定できる。
  • background-colorプロパティにはカンマ区切りの値を指定できない。
  • カンマ区切りで先(左側)に指定した背景画像ほど上(画面上で手前)に表示される。
  • カンマ区切りで後(右側)に指定した背景画像ほど上(画面上で手前)に表示される。
  • backgroundプロパティにカンマ区切りの値を指定する際、背景色は先頭(一番左)に指定する値の1つとして指定する。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.17「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
CSSのbox-shadowプロパティの値の指定方法として間違っているものをすべて選びなさい。
  • box-shadow: 1px;
  • box-shadow: 1px 1px;
  • box-shadow: 3px 3px 6px 2px;
  • box-shadow: 3px 3px 6px 2px inset;
  • box-shadow: rgba(0,0,0,0.5) 3px 3px 6px 2px inset;

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.16「1.2.1 スタイルシートの基本」
レベル1の出題範囲「1.2.1 スタイルシートの基本」からの出題です。
body要素の内容が次のようになっているとき、段落3と段落4にのみスタイルを適用するセレクタを1つ選びなさい。
<h1>見出し</h1> <h2>見出し</h2> <p>段落1</p> <p>段落2</p> <h3>見出し</h3> <p>段落3</p> <p>段落4</p>
  • h3 p
  • h3 ~ p
  • h3 + p
  • h3 < p
  • h3 > p

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.15「1.2.1 スタイルシートの基本」
レベル1の出題範囲「1.2.1 スタイルシートの基本」からの出題です。
HTML5のstyle要素にtype属性が指定されていない場合の、type属性のデフォルト値を記述しなさい。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.14「1.2.1 スタイルシートの基本」
レベル1の出題範囲「1.2.1 スタイルシートの基本」からの出題です。
1つめのtr要素にのみスタイルを適用するセレクタをすべて選びなさい。
  • tr:first-child
  • tr:nth-child(1)
  • tr:nth-child(0n+1)
  • tr:nth-child(1n)
  • tr:nth-child(1n+0)

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.13「1.2.3 カスケード(優先順位)」
レベル1の出題範囲「1.2.3 カスケード(優先順位)」からの出題です。
tr要素を12個含むtable要素があり次のCSSが適用された場合に、後述する設問に解答しなさい。
【CSS】 tr:nth-child(3n){ background-color:‪#‎FFC‬; } tr:nth-child(3n+1){ background-color:‪#‎FDD‬; } tr:nth-child(3n+2){ background-color:‪#‎DFD‬; } tr{ background-color:‪#‎CCC‬; }
10番目のtr要素の背景色は何色になるか、次の選択肢から1つ選びなさい。
  • グレー
  • 薄黄色
  • 薄ピンク
  • 薄緑

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.12「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
Web制作においてCSSの設定が複雑化し、ともすれば破綻しかねないケースがある。近年、Web制作のシーンでCSSを効率的に運用するための、運用・管理・命名規則などのルールや指針がいくつも発表されている。次の中で、CSSの効率的な運用方法のルール・指針と最も関係が薄いものはどれか。1つ選びなさい。
  • SMACSS
  • DOM
  • OOCSS
  • BEM

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.11「1.2.3 カスケード(優先順位)」
レベル1の出題範囲「1.2.3 カスケード(優先順位)」からの出題です。
1つのHTML文書に、次のような「ユーザーのスタイルシート」と「制作者のスタイルシート」が同時に指定されているとき、p要素のフォントサイズは何ポイントになるか。次の選択肢から選びなさい。
【ユーザーのスタイルシート】 p { font-style: italic !important } p { font-size: 11pt } p { font-size: 12pt } 【制作者のスタイルシート】 p { font: normal 13pt serif !important } p { font-size: 14pt } p { font-size: 15pt }
  • 11ポイント
  • 12ポイント
  • 13ポイント
  • 14ポイント
  • 15ポイント

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.10「1.2.1 スタイルシートの基本」
レベル1の出題範囲「1.2.1 スタイルシートの基本」からの出題です。
CSS3のセレクタのうち、書式が間違っているものをすべて選びなさい。
  • ::root
  • ::before
  • ::after
  • ::first-child
  • ::last-child

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.9「1.2.3 カスケード(優先順位)」
レベル1の出題範囲「1.2.3 カスケード(優先順位)」からの出題です。
次のようなHTMLとCSSの組み合わせがある場合に、後述する設問に解答しなさい。
【HTML】 <body>  <div>   <p class="lead"><strong>CSS</strong>はHTMLと共にWeb制作の中心となる技術で   す。</p>  </div> </body> 【CSS】 .lead {  font-size:18px; } div>p {  font-size:14px; } strong {  font-size: 24px; }
この場合のp要素(strong要素外)の文字サイズとstrong要素の文字サイズはそれぞれ何ピクセルか選びなさい。
  • p要素:18ピクセル/strong要素:18ピクセル
  • p要素:14ピクセル/strong要素:18ピクセル
  • p要素:18ピクセル/strong要素:24ピクセル
  • p要素:14ピクセル/strong要素:24ピクセル

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.8「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
次のようなHTMLとCSSの組み合わせがある場合に、後述する設問に解答しなさい。
【HTML】 <body>  <div>   <h1>タイトル</h1>   <p>本文…………………</p>  </div> </body> 【CSS】 body {  margin: 0;  padding: 0; } div {  columns: 150px 3;  column-gap: 20px; }
全てのCSSプロパティが適切に動作する前提で、ブラウザのウィンドウ幅が450ピクセルの場合と、1200ピクセルの場合の段組数はそれぞれいくつになるか。
なお「ブラウザのウィンドウ幅=div要素の幅」と考えて構わないものとする。
  • 450ピクセル:3つ/1200ピクセル:3つ
  • 450ピクセル:3つ/1200ピクセル:7つ
  • 450ピクセル:2つ/1200ピクセル:3つ
  • 450ピクセル:2つ/1200ピクセル:7つ

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.7「1.2.1 スタイルシートの基本」
レベル1の出題範囲「1.2.1 スタイルシートの基本」からの出題です。
次のlink要素のうち、style.css を正しく読み込む書き方をしているものはどれか。2つ選びなさい。
  • <link href="style.css">
  • <link href="style.css" type="text/css">
  • <link rel="stylesheet" href="style.css">
  • <link rel="stylesheet" href="style.css" type="text/css">
  • <link rel="stylesheet" href="style.css" type="text/plain">

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.6「1.2.1 スタイルシートの基本」
レベル1の出題範囲「1.2.1 スタイルシートの基本」からの出題です。
link要素で外部スタイルシートを読み込む際に、rel要素の値として指定する語を記述しなさい。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.5「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
CSSのwhite-spaceプロパティにおいて、ブラウザで表示させる際にもソースコード上の改行位置で改行させ、連続する半角スペース・タブ・改行コードを1つの半角スペースにまとめず、テキストがウィンドウの右端まで来たときには自動的に行を折り返すようにしたい場合に指定する値はどれか。正しいものを1つ選びなさい。
  • normal
  • pre
  • nowrap
  • pre-wrap
  • pre-line

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.4「1.2.3 カスケード(優先順位)」
レベル1の出題範囲「1.2.3 カスケード(優先順位)」からの出題です。
次に示すセレクタの中で、計算上もっとも優先順位が高くなる指定はどれか。1つ選びなさい。
  • *#abc ul
  • #abc #def ul
  • body#abc ul
  • #ab.cd.ef.gi.hj.kl.mn.op.qr.st.uv.wx.yz ul
  • *#ab.cd.ef.gi.hj.kl.mn.op.qr.st.uv.wx.yz ul

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.3「1.2.1 スタイルシートの基本」
レベル1の出題範囲「1.2.1 スタイルシートの基本」からの例題を解説します。
CSSにおけるシンプルセレクタのうち、ユニバーサルセレクタ(Universal selector)に関する説明として正しいものを選びなさい。
  • ドット(.)を~=の代わりとして利用し、クラス属性における特定の属性値を持つ要素を示す。
  • アスタリスク(*)を用いて表記され、全ての型の要素を示す。
  • タッシュタグ(#)の後にID型属性の値を記述し、特定のID属性を持つ要素を示す。
  • 要素名を記述し特定の要素型の要素を示す。
  • 任意の属性名と属性値を指定することで、その属性を指定している要素およびその属性値を持つ要素を示す。

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.2「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの例題を解説します。
CSS3において、div要素の背景色が半透明になる記述として正しいものを1つ選びなさい。
  • div {background-color: rgba(255,0,0,128);}
  • div {background-color: #FF000088;}
  • div {background-color: rgba(255,0,0,0.5);}
  • div {background-color: transparent;}
  • div {background-color: rgba(100%,0%,0%,50%);}

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

例題2.1「1.2.1 スタイルシートの基本」
レベル1の出題範囲「1.2.1 スタイルシートの基本」からの例題を解説します。
以下のHTMLにおけるテーブルについて、キャプションがテーブルの下の位置に配置されるように指定したい。この時、キャプションに対して指定するCSSの記述として正しいものを選択肢から選びなさい。
<!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" href="test.css" type="text/css"> </head> <body> <table border="1"> <caption> 果物の価格一覧 </caption> <tr> <th>りんご</th> <td>100円</td> </tr> <tr> <th>もも</th> <td>250円</td> </tr> <tr> <th>みかん</th> <td>50円</td> </tr> </table> </body> </html>
  • tr{caption-virtical: bottom;}
  • caption{caption-virtical: bottom;}
  • caption{caption-align: bottom;}
  • caption{caption-side: bottom;}
  • caption{caption-bottm: yes;}

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。

答えはこちら

このページの先頭へ