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

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

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

1.2 CSS

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

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

答えはこちら

答えは E です。
A:3D変形の奥行感を指定することが出来る関数です。
B:要素を回転表示することが出来る関数です。
C:要素の3D縮尺比率を指定することが出来る関数です。
D:要素を3D方向に移動させることが出来る関数です。
E:透明度を指定するプロパティです。transformプロパティでは指定できません。

出題範囲の詳細

例題解説の提供:豊田 健次 氏

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

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

答えはこちら

答えは B です。
A:PHPやPerlなどのプログラミング言語で用いられる、先頭を大文字に変換する関数の名前です。
B:CSSにおいて、text-transformプロパティに設定することで、単語の先頭を大文字で表示することができますので、正解です。
C:CSSにおいて、すべての文字を大文字で表示することができます。
D:頭文字だけを大文字にして書く記法名称のひとつです。
E:表計算アプリケーション等で用いられる、先頭を大文字に変換する関数の名前です。

出題範囲の詳細

例題解説の提供:豊田 健次 氏

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

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

答えはこちら

答えは A です。
@keyframesの書式では、「0%」の代わりに「from」、「100%」の代わりに「to」が使用できます。よって、答えはAとなります。

キーワードではなくパーセント値を使用する場合には、必ず数値に「%」をつける必要があります。そのため、「0%」は正しい指定ですが、「0」は文法エラーとなります。
@keyframesの書式内においては、「%」は0でも省略できない点にも注意しましょう。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

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

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

答えはこちら

答えは B、C です。
CSS3からは、1つのボックスに複数の背景画像を指定できるようになりました。背景画像をカンマ区切りで指定すると、先(左側)に指定した背景画像ほど上(画面上で手前)に重なって表示されます。よってCは正しく、Dは間違いとなります。

カンマ区切りで指定した背景画像は個別の背景レイヤーに表示されますが、背景色はそれらすべての背景レイヤーのうち、一番下のレイヤーにのみ表示されます。そのため、背景色は一番下の背景レイヤーとなる一番右側の値の1つとして指定することになっています。よってEは間違いです。また、結果として背景色は値を1つしか指定できないことになり、Aは間違いで、Bは正しいことになります。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題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プロフェッショナル認定試験とは異なります。

答えはこちら

答えは A です。
box-shadowプロパティの値の数値は、2個・3個・4個のいずれかを連続して指定する必要があります。よって、数値が1つしか指定されていないAは間違いです。

影の「色」とキーワードの「inset」は、どちらもオプションです。BやCのように省略指定しても問題ありません。影の色を省略した場合のデフォルトは、colorプロパティの値となります。

数値は必ず連続して指定する必要がありますが、色とinsetはそれらの数値の前後いずれにでも指定可能です。よって、DとEも間違いではありません。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題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プロフェッショナル認定試験とは異なります。

答えはこちら

答えは B です。
CSS3の結合子で使用される記号とそれがあらわす意味をしっかり覚えているかどうかを確認する問題です。
Aはh3要素の中に含まれるp要素が適用対象となりますので、上のHTMLではどこに適用されません。
Cはh3要素の直後にあるp要素が適用対象となりますので、スタイルは段落3にのみ適用されます。
Dの結合子はCSS3では定義されていませんので、CSSの文法エラーとなります。
Eはh3要素の直接の子要素が適用対象となりますので、上のHTMLではどこに適用されません。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

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

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

答えはこちら

答えは text/css です。
HTML5よりも前のHTML/XHTMLでは、style要素のtype属性にはデフォルト値が設定されていなかったため、type属性は必ず指定する必要がありました。type属性にはスタイルシート言語の種類をMIMEタイプで指定することになっており、CSSであればその値は「text/css」となります。HTML5では、この「text/css」がデフォルト値として設定されたため、CSSを使用するのであればtype属性は省略可能となっています。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題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プロフェッショナル認定試験とは異なります。

答えはこちら

答えは A,B,C です。
Aの「:first-child」は、要素内容の先頭にある要素を適用対象とするセレクタです。よって、まずはこれが答えの1つとなります。

残りのB〜Eのセレクタは、すべて (an+b) 形式の式を持っています。 (an+b) 形式の式において、aが0の場合はanは省略できます。上の選択肢Cの (0n+1) ではaが0なので、0nは省略できます。省略するとBの (1) と同じになります。つまり、BとCの式は同じもので、両方とも1番目の要素を適用対象としますので、これらも答えに含まれることになります。

また、(an+b) 形式の式において、an+bのbが0の場合には+bが省略できます。上の選択肢Eの (1n+0) ではbが0なので、+bは省略でき、省略するとDの (1n) と同じになります。これらは1つめだけでなく、すべてのtr要素にスタイルを適用します。よって答えは A、B、C となります。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題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プロフェッショナル認定試験とは異なります。

答えはこちら

答えは D です。
tr要素に対するセレクタで背景色に#CCC(グレー)が指定されていますが、他のnth-child擬似クラスで指定されているスタイルの方が優先されます。
10番目の要素は「3n+1」の条件に適合するので#FDD(薄ピンク)となります。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 林 拓也 氏

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

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

答えはこちら

答えは B です。
SMACSSはスタイルをベース、レイアウト、モジュール、ステート、テーマに分類して管理・運用します。
OOCSはObject Oriented CSS(オブジェクト指向CSS)の略です。ある特定の要素専用のスタイルを定義するのではなく、小さいパーツの組み合わせで実現する手法です。Structure(構造)とSkin(見た目)を分離して管理します。
BEMはBlock、Element、Modifierの3つのレベルによる命名規則でクラス名を設定する手法です。
DOMはDocument Object Modelの略で、主にJavaScriptでHTMLの要素にアクセスするための仕組みのことです。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 林 拓也 氏

例題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プロフェッショナル認定試験とは異なります。

答えはこちら

答えは C です。
指定されているCSSが「ユーザーのスタイルシート」だけであった場合は、フォントサイズは最後の指定である12ポイントとなります。しかし、「制作者のスタイルシート」の1行目には !important が付けられているため、fontプロパティによる文字サイズの13ポイントが優先されて適用されます。「制作者のスタイルシート」の2行目と3行目の指定には !important が無いため無効となります。
!important が無い場合は「ユーザーエージェント(ブラウザ)のスタイルシート」「ユーザーのスタイルシート」「制作者のスタイルシート」の順に適用の優先度が高くなります。!important がある指定はそれらよりも優先度は高くなりますが、その場合の優先度は「ユーザーエージェント(ブラウザ)のスタイルシート」「制作者のスタイルシート」「ユーザーのスタイルシート」の順となります。つまり、!important を付けた場合はユーザーによる要求の優先度を最も高くすることで、アクセシビリティを向上させる仕組みとなっています。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

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

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

答えはこちら

答えは A、D、E です。
疑似クラスと疑似要素の違いを明確にするために、CSS3(Selectors Level 3)では疑似要素名の前にはコロンを2つ付けることになっています。疑似クラスについては、CSS2.1と同様にコロンは1つだけ付けます。
選択肢の中で、疑似要素はBとCだけで、それ以外は疑似クラスですので、書式として間違っているのは A、D、E となります。CSS3の仕様では、上の選択肢にある疑似要素以外では ::first-line と ::first-letter が定義されています。
なお、CSS1やCSS2.1との互換性を維持する目的で、ブラウザはコロンが1つだけの疑似要素を今後もサポートすることになっています。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題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プロフェッショナル認定試験とは異なります。

答えはこちら

答えは 3 です。
p要素に対してはleadクラスセレクタと、div>pの複合セレクタが競合することになります。
同一の要素に対する指定では、セレクタ内のIDが多いもの、クラスが多いもの、要素が多いものの順で優先度が決まります。
p要素に対してはleadクラスセレクタの優先度が高くなるので、文字サイズは18ピクセルとなります。
strong要素にはleadクラスセレクタの文字サイズ指定が継承されますが、直接strong要素セレクタで上書きしているので24ピクセルとなります。
継承や優先度はCSSの効率的な利用における重要なポイントとなります。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 林 拓也 氏

例題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プロフェッショナル認定試験とは異なります。

答えはこちら

答えは 3 です。
columnsプロパティは段組の幅と数を指定します。column-gapプロパティは段組間の余白を指定します。
2014年8月現在ベンダープレフィックスを用いた書式と併記するのが一般的です。
columnsプロパティで指定した段組幅は、段組幅の下限として扱われます。
ウィンドウ幅が450ピクセルの場合、段組を3つ構成するとcolumn-gapプロパティを指定している関係で段組1つあたりの幅がcolumnsプロパティで指定した150ピクセルを下まわることになります。この場合、段組数が減らされ2つになります。
columnsプロパティで指定した段組数は、段組数の上限として扱われます。
ウィンドウ幅が十分広い場合でも、指定した数の段組が構成されます。
段組関係のプロパティは、通常のWebページで使用するだけでなく、レスポンシブWebデザインと組み合わせたり、電子書籍で使用したりすることが考えられます。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 林 拓也 氏

例題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プロフェッショナル認定試験とは異なります。

答えはこちら

答え C、D
link要素にはrel属性の指定が必須です。よって、AとBは style.css を読み込みません。Cはtype属性が省略されていますが、HTML5ではrel属性の値が「stylesheet」の場合は「text/css」がデフォルト値として設定されているため、Cは style.css を読み込みます。Dは必要な属性が正しく指定されていますので問題なく style.css を読み込みます。Eは、CSS向けのMIMEタイプではない「text/plain」がtype属性の値として指定されていますので、style.css は読み込みまれません。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

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

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

答えはこちら

答え stylesheet
link要素で外部スタイルシートを読み込む場合、rel属性には値として「stylesheet」を指定します(「rel="stylesheet"」)。rel属性はリンクされている他のリソースファイルのタイプを指定します。
外部スタイルシートのリンク以外に使用する場合には異なる値を指定することになりますが、指定する値はいずれも大文字・小文字を区別しません。
つまり「STYLESHEET」や「StyleSheet」と記述しても正解です。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 林 拓也 氏

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

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

答えはこちら

答えD
white-spaceプロパティの値と表示との関係は次の表のようになっています。表の「改行」はソースコード上の改行位置で改行するかどうか、「まとめ」は連続する半角スペース・タブ・改行コードを1つの半角スペースにまとめるかどうか、「折り返し」はテキストがウィンドウの右端まで来たときに行を折り返すかどうかを示しています。正解は、表で「する」「まとめない」「折り返す」と書かれているpre-wrapとなります。
  改行 まとめ 折り返し
--------------------------------------------------------------
normal しない まとめる 折り返す
pre する まとめない 折り返さない
nowrap しない まとめる 折り返さない
pre-wrap する まとめない 折り返す
pre-line する まとめる 折り返す
--------------------------------------------------------------

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

例題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プロフェッショナル認定試験とは異なります。

答えはこちら

答え B
セレクタによる適用の優先順位は、セレクタに含まれる「idセレクタの数」「属性関連セレクタ(classセレクタ・属性セレクタ・疑似クラス)の数」「要素関連セレクタ(タイプセレクタ・疑似要素)の数」で3桁の数字を作り、その数字が大きいものほど高くなります。このとき、ユニバーサルセレクタ(*)は無視されます。
しかしこの計算においては、いずれかの桁の数字が10以上になったとしても、決して繰り上がることはないルールになっている点に注意してください(つまり10進数ではなく、たとえば100進数の3桁のような数字として計算するということです)。
ここで、便宜的に16進数でこれらの3桁をあらわしてみると、Aは101、Bは201、Cは102、Dは1C1、Eも1C1となり、Bが一番大きな数字となります(10進数の12は、16進数のCであるため)。よって正解はBです。

出題範囲の詳細

例題解説の提供:HTML5アカデミック認定校 株式会社クリーク・アンド・リバー社
HTML5レベル1認定者 大藤 幹 氏

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

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

答えはこちら

答えB
Aはクラスセレクタに関する説明なので間違いです。
Bはユニバーサルセレクタに関する説明なので正解です。
CはIDセレクタに関する説明なので間違いです。
Dはタイプセレクタに関する説明なので間違いです。
Eは属性セレクタに関する説明なので間違いです。

出題範囲の詳細

例題解説の提供:メディアスケッチ株式会社
代表取締役 兼 株式会社コーデセブン 取締役CTO 伊本 貴士 氏
ITコンサルタント業を中心に、Webサービスの開発や、オープンソースシステムの構築・保守なども行っている。

例題2.2「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの例題を解説します。
CSSにおいて、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プロフェッショナル認定試験とは異なります。

答えはこちら

答えC

background-colorプロパティにおいて、半透明の色を指定する場合は、rgba()またはhsla()で色を指定する必要があります。
rgba()で色を指定する場合、r値・g値・b値の3つの値は0-255の値で指定し、4つめのアルファ値は0-1の範囲で指定します。
アルファ値は色の透明度を指定する値で、この値が0の場合は透明度が100%(完全な透明色)になり、1の場合は透明度が0%となります。
よって正解はCです。

Aはアルファ値を128と指定しており、最大値の1を超えているので不正解です。
Bのように#で始まる書き方で半透明を指定する事はできません。
Dのtransparentは、完全な透明色を指定する値で半透明にはなりません。
Eは、アルファ値を%で指定しているので半透明にならず不正解です。rgbの各値は%指定可能なのでアルファ値が0.5とかであれば半透明になります。

出題範囲の詳細

例題解説の提供:メディアスケッチ株式会社
代表取締役 兼 株式会社コーデセブン 取締役CTO 伊本 貴士 氏
ITコンサルタント業を中心に、Webサービスの開発や、オープンソースシステムの構築・保守なども行っている。

例題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プロフェッショナル認定試験とは異なります。

答えはこちら

答えD
この場合、キャプションの文字はcaptionタグで指定しています。問題のコードにおけるtr要素はcaption要素を含んでいません。よって、Aはプロパティの名前に関係なく間違いです。 テーブルにおけるキャプション位置は、caption-sideプロパティで行います。 A,B,C,Eのプロパティは、CSSにおいては存在しません。 よって、答えはDです。

出題範囲の詳細

例題解説の提供:メディアスケッチ株式会社
代表取締役 兼 株式会社コーデセブン 取締役CTO 伊本 貴士 氏
ITコンサルタント業を中心に、Webサービスの開発や、オープンソースシステムの構築・保守なども行っている。

このページの先頭へ