HTML5プロフェッショナル認定試験レベル1 サンプル問題
Ver2.0（旧バージョン）

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

1.2 CSS

例題2.33「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
上が赤で下が青のグラデーションにならない指定をすべて選びなさい。
  • linear-gradient(red, blue)
  • linear-gradient(0deg, red, blue)
  • linear-gradient(180deg, red, blue)
  • linear-gradient(to top, red, blue)
  • linear-gradient(to bottom, red, blue)

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2020年4月15日

答えはこちら

答えは B、D です。
linear-gradient( )関数でグラデーションの方向を省略すると「to bottom」になります。「to bottom」は「下へ」という意味ですので、方向としては「上から下」となり、AとEは上が赤で下が青のグラデーションになります。

Dは方向が「to top」となっていますのでこれらとは逆になり、下が赤で上が青のグラデーションになるため、これが答えの一つとなります。

方向を角度（deg）で指定した場合、「180deg」が「to bottom」と同じ「上から下」となります。したがって、「0deg」は「to top」と同じ「下から上」になり、グラデーションは赤が下で上が青となるため、これがもう一つの答えとなります。

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
HTML5レベル１認定者　大藤 幹 氏

例題2.32「1.2.3 カスケード（優先順位）」
レベル1の出題範囲「1.2.3 カスケード（優先順位）」からの出題です。
次のCSSセレクタの3桁の詳細度はどれか。正しいものを1つ選びなさい。 

*[lang] *#wrapper *.inner:only-child h3:first-of-type::before
  • 131
  • 132
  • 142
  • 145
  • 151

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2020年3月19日

答えはこちら

答えは C です。
まず、ユニバーサルセレクタ（*）は、詳細度の計算をするときは無視します。また、この例題には含まれていませんが、擬似クラスの「:not( )」が使用されている場合は( )内のセレクタのみ計算に加え、「:not( )」自体は無視します。おぼえておくべき例外は、この2点です。

あとはIDセレクタの数を3桁目、属性関連のセレクタの数を2桁目、要素関連のセレクタの数を1桁目とした数字を作ると詳細度になります。属性関連のセレクタには、クラスセレクタ（.）と属性セレクタ（[ ]）と擬似クラス（:で始まるセレクタ）が含まれます。要素関連のセレクタには、タイプセレクタ（要素名で指定するセレクタ）と擬似要素（::で始まるセレクタ）が含まれます。

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
HTML5レベル１認定者　大藤 幹 氏

例題2.31「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
次のCSSで表とセルの角を丸くしようとしたが、どのブラウザでも角は丸くならなかった。原因の説明として正しいものを1つ選びなさい。 

【CSS】
table, th, td {
  border: 1px solid;
  border-radius: 10px;
  border-collapse: collapse;
}
  • 表の角は仕様上丸くならない
  • Chromiumを採用しているブラウザでは表の角は丸くならない
  • borderの指定で色の値がないためエラーとなっている
  • border-collapseの値が「collapse」だとborder-radiusは無効になる
  • border-radiusをセルに対して指定するとtable要素への指定は無効になる

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2020年2月5日

答えはこちら

答えは D です。

次のようにborder-collapseの値を「separate」に変えると（もしくはborder-collapseの行を削除すると）角は丸くなります。「border-collapse: collapse;」が指定されていると表の角が丸くならないのは仕様です（「CSS Backgrounds and Borders Module Level 3」の「5.6. Effect on Tables」に記載されています）。 


【CSS】
table, th, td {
  border: 1px solid;
  border-radius: 10px;
  border-collapse: separate;
}

なお、表関連の要素でborder-radiusが有効となるのは、table要素とth要素、td要素だけです（正確にはdisplayプロパティの値が「table」「inline-table」「table-cell」の要素のみとなっています）。

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
HTML5レベル１認定者　大藤 幹 氏

例題2.30「1.2.1 スタイルシートの基本」
レベル1の出題範囲「1.2.1 スタイルシートの基本」からの出題です。
CSSの @import の書式として文法的に正しいものをすべて選びなさい。
  • @import "style.css";
  • @import 'style.css';
  • @import url("style.css");
  • @import url('style.css');
  • @import url(style.css);

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2020年1月23日

答えはこちら

答えは A、B、C、D、E です。
AとBは外部スタイルシートのURLを文字列として指定しています。文字列をあらわすにはダブルクォーテションでもシングルクォーテションでもかまいませんので、AとBは両方とも正しい書式です。

CDEは、url( ) という関数形式の書式でURLを指定しています。この関数を使用する場合、URLをダブルクォーテションまたはシングルクォーテションで囲ってもかまいませんし、逆にそれらはなくても問題ありません。よって、CDEも正しい書式となります。

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
HTML5レベル１認定者　大藤 幹 氏

例題2.29「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
次のCSSが適用されたリンクをCSS3に未対応の古いブラウザで表示させると、リンクの下線は何色で表示されるか。 

【CSS】
a:link, a:visited {
    color: red;
    text-decoration: underline;
    text-decoration: dashed black underline;
}
  • red
  • black
  • blue
  • purple
  • ブラウザの環境設定で設定されているリンク色

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2019年9月18日

答えはこちら

答えは A です。
text-decorationプロパティはCSS3で仕様変更され、text-decoration-lineプロパティ・text-decoration-colorプロパティ・text-decoration-styleプロパティの値をまとめて指定できるショートハンド・プロパティとなっています。3つのプロパティの値の中から必要な値を1つ以上順不同で指定でき、値を指定していないプロパティの値は初期値に設定されます。

CSS3よりも前のtext-decorationプロパティとほぼ同じ機能を持っているのが現在のtext-decoration-lineプロパティで、指定可能な値も同じです。text-decoration-colorは線の色を指定するプロパティで、text-decoration-styleは線の種類（実線・点線など）を指定するプロパティです。

新しいブラウザで表示させた場合、指定されているCSSのすべての行が有効となるため、最後に指定してある「black」が有効となり、下線は黒で表示されます。

CSS3に未対応の古いブラウザで表示させた場合は、最後の（CSS3の新しい書式の）指定は無視されることになるため、「color: red;」と「text-decoration: underline;」だけが有効となり、下線は文字色と同じ赤で表示されます。

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
HTML5レベル１認定者　大藤 幹 氏

例題2.28「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
text-shadowプロパティの使い方として文法的に正しいものをすべて選びなさい。
  • text-shadow: 2px;
  • text-shadow: 2px 2px;
  • text-shadow: 2px 2px 4px black;
  • text-shadow: #000000 2px 2px 4px;
  • text-shadow: #000000 2px 2px 4px, #ffffff -2px -2px 4px;

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2019年9月4日

答えはこちら

答えは B、C、D、E です。
text-shadowプロパティにnone以外の値を指定する場合、数値（長さをあらわす値）を2つまたは3つ指定する必要があります。よって、数値が1つしかないAは文法エラーとなります。
Bは数値を2つ指定しているので問題ありません。影の色の値が省略されている場合、影の色はcolorプロパティの値と同じになります。
Cは数値を3つと、そのうしろに影の色が指定されています。影の色は数値の前にでも後ろにでも指定可能ですので、Cも正しい指定です。
Dはtext-shadowプロパティのもっとも一般的な指定方法で、文法的にも問題ありません。
Eはカンマ区切りで複数の影をしている例です。影は最低一つは必要ですが、上限はなく必要なだけいくつでも指定できます。

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
HTML5レベル１認定者　大藤 幹 氏

例題2.27「1.2.3 カスケード（優先順位）」
レベル1の出題範囲「1.2.3 カスケード（優先順位）」からの出題です。
次に示すCSSセレクタの中で、優先順位がもっとも低くなる指定はどれか。１つ選びなさい。
  • :hover:first-child
  • *:hover:first-child
  • div:hover:first-child
  • *:hover::first-letter
  • div:hover::first-letter

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2019年8月21日

答えはこちら

答えは D です。
セレクタによる優先順位は、「idセレクタの数」を3桁目、「属性関連セレクタの数」を2桁目、「要素関連セレクタの数」を1桁目にした数値を作り、大きいものほど高くなります。

:hover や :first-child などの擬似クラスは属性関連セレクタ（2桁目）で、::first-letter は要素関連セレクタ（1桁目）としてカウントされます。

Aは擬似クラス2つで構成されていますので20です。
BはAの先頭に * が追加されたものですが、* はカウントされないことになっているため、これもAと同じく20になります。
Cは擬似クラスが2つと、それらの前に要素が1つありますので21となります。
Dは * はカウントされず、擬似クラスが1つと擬似要素が1つですので11です。
Eは要素が1つと擬似クラスが1つと擬似要素が1つですので12となります。

よって正解はDです。

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
HTML5レベル１認定者　大藤 幹 氏

例題2.26「1.2.3 カスケード（優先順位）」
レベル1の出題範囲「1.2.3 カスケード（優先順位）」からの出題です。
次のようなHTML文書と3つの外部スタイルシート（s1〜s3.css）があったとき、h1要素のテキストは何色で表示されるか。以下の選択肢から1つ選びなさい。 

【HTML】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル文書</title>
<link rel="stylesheet" href="s1.css">
<style>h1 { color: red; }</style>
<link rel="stylesheet" href="s2.css">
<link rel="stylesheet" href="s3.css">
</head>
<body>
<h1>サンプル文書</h1>
</body>
</html>

【s1.css】
h1 { color: green; }

【s2.css】
* { color: blue; }

【s3.css】
* { color: yellow; }
  • red
  • green
  • blue
  • yellow
  • ブラウザで設定されている文字色

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2019年2月19日

答えはこちら

答えは A です。
CSSによる表示指定が競合した場合、セレクタの詳細度の高い指定が優先して適用されます。セレクタの詳細度が同じであれば、後の表示指定が前の表示指定を上書きします。

外部スタイルシートに書き込まれているCSSは、HTML文書のそれを読み込んでいる位置にあるものと見なされます。つまり上のサンプル問題では、まず最初に外部スタイルシート「s1.css」があり、その次にstyle要素のCSSがあって、さらにそのあとに「s2.css」「s3.css」という外部スタイルシートの指定がそれぞれ続いているものとして適用の優先順位が決定されます。

このサンプルで使用されているセレクタは「h1」と「*」のみです。「*」は詳細度の計算上は無視されますので、この場合はセレクタ「h1」の方が優先されます。「h1」を使っているのは、最初の「s1.css」とその直後にあるstyle要素のCSSの2箇所です。まったく同じセレクタですので、後の指定が優先される（上書きする）こととなり、結果としてstyle要素の「h1 { color: red; }」が最終的に適用されます。

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
HTML5レベル１認定者　大藤 幹 氏

例題2.25「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
ある要素にCSSで「display: flex;」と指定したところ、その中に含まれている5つの子要素が左から順に横に並んだ。これらの子要素のうち、一番右側の子要素にだけ「order: 3;」と指定すると、その子要素は左から何番目に配置されるか。
  • 左から1番目
  • 左から2番目
  • 左から3番目
  • 左から4番目
  • 左から5番目

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2019年2月5日

答えはこちら

答えは Eです。
orderプロパティは、「display: flex;」が指定された要素内の子要素の並ぶ順序を制御するためのプロパティです。値の小さなものほど左側に配置されます（ただし他のプロパティの値によっては並ぶ方向が変化する場合があります）。値が同じであれば、ソースコード上でその要素が登場する順番で配置されます。したがって、特にorderプロパティを指定していない場合は、子要素はHTML文書のソースコード順で左から配置されることになります。

orderプロパティの初期値は0です。上の設問では、一番右側の子要素にだけ「order: 3;」を指定したとありますので、初期値が適用されている子要素よりも後（右側）に並ぶことになります。

結果として、「order: 3;」を指定した子要素の順番は一番右側のままで変化しません。もし、初期値が適用されている要素よりも左側に配置したいのであれば、「-1」のように初期値の「0」よりも小さな整数を指定する必要があります。

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
HTML5レベル１認定者　大藤 幹 氏

例題2.24「1.2.1 スタイルシートの基本」
レベル1の出題範囲「1.2.1 スタイルシートの基本」からの出題です。
style要素に指定可能な属性を3つ選びなさい。
  • type
  • src
  • media
  • nonce
  • charset

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2019年1月22日

答えはこちら

答えは A、C、Dです。
Aのtype属性は、スタイルシートのMIMEタイプを指定する属性です。HTML5よりも前のHTML/XHTMLでは指定が必須でしたが、HTML5からはデフォルト値「text/css」が設定され、省略可能となっています。

Cのmedia属性は、もともとはスタイルシートの適用対象とする機器の種類（パソコン画面、プリンタ、プロジェクタなど）を指定する属性でした。現在では、この属性の値としてメディアクエリも指定可能となっています。

Dのnonce属性は、HTML 5.1 からstyle要素に指定可能となった属性です。値には、CSP3（Content Security Policy Level 3）というセキュリティ関連（主にXSS対策）の別仕様で定義されている暗号化されたテキストを指定します。

Bのsrc属性とEのcharset属性は、script要素には指定できますが、style要素には指定できません。

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
HTML5レベル１認定者　大藤 幹 氏

例題2.23「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
HTMLで作成したドキュメントの閲覧の際に、スクロールしても現在表示している箇所がどの章かがわかるように文章の表示中はその見出し(h1)を画面の上端(top:0)に表示されるようにしたい。
CSSのpositionプロパティに指定する値として最も適しているのは次のうちどれか。
  • fixed
  • relative
  • static
  • sticky
  • absolute

※この例題は実際のHTML5プロフェッショナル認定試験とは異なります。
例題公開日：2018年6月19日

答えはこちら

答えは Dです。
要素の表示位置を指定するには、配置方法を指定するpositionプロパティと位置を指定するtop,bottom,left,rightプロパティを使用します。
Aのfixedは固定を意味し、指定すると最初から指定位置に表示され、スクロールしても移動しません。
そのため、複数の見出しが最初から上端に重なって表示され、目的に合わないので不正解です。
Bのrelativeは相対を意味し、指定すると親要素からの相対位置で表示され、スクロールにより移動し見えなくなり、不正解です。
Cのstaticはデフォルト値で、配置に関して何も指定しないのと同じ挙動で、スクロールにより移動して見えなくなるので不正解です。
Dのstickyは粘着を意味し、top:0と同時に指定すると画面内および下方ではスクロールにより移動しますが、画面の上端に達すると張り付いて表示され、目的に叶うので、正解です。
Eのabsoluteは絶対位置で指定され、親要素となるドキュメントの左上からの絶対位置に表示されますが、スクロールにより移動して見えなくなるので不正解です。

出題範囲の詳細

LPI-Japan
中谷　徹

例題2.22「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
親要素のCSSプロパティの設定を子要素に強制的に継承する際に指定する値は次のうちどれか。
  • clone
  • derived
  • fork
  • inherit

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

答えはこちら

答えは Dです。
CSS のプロパティには親要素から子要素に設定が継承されるものとされないものがありますが、inherit を指定することで強制的に継承することができます。
例えば長子要素にのみ指定する場合は疑似セレクタを使用して下記のように行います。

div:first-child {
    border: inherit;
    float: inherit;
}
逆に all, initial, unset で継承を回避することも可能です。allを使用するとすべてのプロパティ（例外を除く）を対象にでき、値に initial を指定すると初期値が適用できます。unset を指定すると上書きされた値がクリアされ、初期値または継承値を適用できます。
継承はプログラミングの効率化のための技術ですのでマスターすることで効率的なコードを書くことができます。

例題の選択肢には、他の分野での継承に似た効率化の手法です。
Aのclone は生物学や仮想化技術で使用される複製に関する用語です。
Bのderived は派生の意でC++, C#などの継承で使用されます。
Cのfork はLinuxのプロセス遷移の最初の手続きです。

出題範囲の詳細

LPI-Japan
中谷　徹

例題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レベル１認定者　大藤 幹 氏

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

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

答えはこちら

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

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

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
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プロフェッショナル認定試験とは異なります。

答えはこちら

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

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

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

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
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プロフェッショナル認定試験とは異なります。

答えはこちら

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

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
HTML5レベル１認定者　大藤 幹 氏

例題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レベル１認定者　大藤 幹 氏

例題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レベル１認定者　大藤 幹 氏

例題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レベル１認定者　林 拓也 氏

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

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

答えはこちら

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

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
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プロフェッショナル認定試験とは異なります。

答えはこちら

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

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
HTML5レベル１認定者　大藤 幹 氏

例題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レベル１認定者　大藤 幹 氏

例題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レベル１認定者　林 拓也 氏

例題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レベル１認定者　林 拓也 氏

例題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レベル１認定者　大藤 幹 氏

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

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

答えはこちら

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

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
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プロフェッショナル認定試験とは異なります。

答えはこちら

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

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
HTML5レベル１認定者　大藤 幹 氏

例題2.4「1.2.3 カスケード（優先順位）」
レベル1の出題範囲「1.2.3 カスケード（優先順位）」からの出題です。
次に示すセレクタの中で、計算上もっとも優先順位が高くなる指定はどれか。１つ選びなさい。
  • *#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レベル１認定者　大藤 幹 氏

例題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要素の背景色が半透明になる記述として正しいものを１つ選びなさい。
  • 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サービスの開発や、オープンソースシステムの構築・保守なども行っている。

メルマガ登録E-mail Magazine

受験を決めたら、まずメルマガ登録。
学習に役立つ例題解説付きメールマガジンを定期発行

氏名

ご提供いただく個人情報の取り扱いについて

ご提供いただいた情報につきましては、当団体内において管理し第三者には開示いたしません。 ご提供いただいた情報につきましては、当団体のオープンソース普及／促進活動のための統計データに反映し、Linux技術者認定事業サービスの充実に活用させて頂くとともに、当団体からの最新情報やイベント情報のご案内を差上げる目的に利用させていただきます。 当団体のプライバシーポリシーについてはこちらをご参照ください。

メルマガ登録する