HTML5プロフェッショナル認定試験レベル1 例題解説

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

1.2 CSS

例題2.47「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
CSSのopacityプロパティに関する説明として正しいものをすべて選びなさい。
  • 不透明度を指定するプロパティである。
  • 初期値は0である。
  • すべての要素に指定できる。
  • 値として0を指定すると完全に不透明になる。
  • 値として100を指定すると完全に透明になる。

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

答えはこちら

答えは AとC です。

opacityプロパティは要素の不透明度を指定するプロパティで、初期値は 1 です。すべての要素に対して指定できます。よって B は間違った説明、 A と C は正しい説明となります。

値には数値（小数も可）が指定でき、0だと完全に透明、1だと完全に不透明になります。よって D と E は間違った説明となります。0～1の範囲外の数値が指定された場合は、エラーになるのではなく、0～1の範囲内に収まる数値に修正されます。したがって、E のように範囲外の大きな数値を指定した場合は、1を指定したときと同様に完全に不透明な状態になります。逆に負の値を指定すると0と同様の完全な透明になります。

出題範囲の詳細

例題解説の提供：大藤 幹 氏（HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　著者）

例題2.46「1.2.1 スタイルシートの基本」
レベル1の出題範囲「1.2.1 スタイルシートの基本」からの出題です。
拡張子が「.webp」の画像ファイルをsrc属性に指定しているimg要素だけを適用対象とする属性セレクタはどれか。もっとも適切なものを1つ選びなさい。
  • img[src$=".webp"]
  • img[src^=".webp"]
  • img[src*=".webp"]
  • img[src|=".webp"]
  • img[src~=".webp"]

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

答えはこちら

答えは A です。

属性セレクタで [属性名$="文字列"] のように指定すると、属性名で指定された属性を持つ要素のうち、その属性の値が指定された文字列で終わるものだけが適用対象となります。よって、A が正解となります。

それとは逆に、B の [属性名^="文字列"] のように指定すると、属性値が指定された文字列で始まるものが適用対象となります。

C の [属性名*="文字列"] は、位置には関係なく、値の中に指定された文字列が含まれていれば適用対象となります。したがって、img[src*=".webp"] と指定した場合、拡張子が「.webp」のファイルは適用対象となります。しかし、ファイル名やパス名によっては、拡張子が「.webp」以外のファイルが適用対象となってしまう可能性もあります。そのような意味では、この属性セレクタは適切な指定方法とは言えません。

Dの [属性名|="文字列"] は、主に属性値として言語コードを指定している要素を適用対象とする場合に使用します。たとえば、[lang|="en"] と指定すると、lang属性の値が「en」の要素だけでなく「en-US」の要素も適用対象となります（「en」と「en-○○○」の要素が対象となります）。

Eの [属性名~="文字列"] は、指定した文字列が、半角スペース区切りで指定されている複数の属性値のうちのどれかと一致すれば適用対象となる指定方法です（値が1つしかない場合でも適用対象となります）。したがって、[class|="abc"] と指定すると、クラスセレクタの .abc と適用対象が同じになります。

出題範囲の詳細

例題解説の提供：大藤 幹 氏（HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　著者）

例題2.45「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
CSSのテキストを装飾するプロパティに関する説明として正しいものをすべて選びなさい。
  • text-decoration-styleには、border-styleに指定可能な線種がすべて指定できる。
  • text-decoration-widthは、下線などの線の太さを指定するプロパティである。
  • text-decoration-colorという名前のプロパティは定義されていない。
  • text-decoration-verticalは、表示させる線の縦位置を指定するプロパティである。
  • text-decorationは、複数のtext-decoration-○○○の値をまとめて指定できるプロパティである。

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

答えはこちら

答えは E です。

CSS3以降では、text-decorationは複数のtext-decoration-○○○の値をまとめて指定できるショートハンドプロパティに変更されています。よって、選択肢Eは正しい説明となります。

その複数のtext-decoration-○○○とは、具体的には次の3つのプロパティを指します。

・text-decoration-line
・text-decoration-style
・text-decoration-color

text-decoration-lineには「underline」「overline」「line-through」などの値が指定できます。つまり、要素に対して追加する装飾（線）の種類を指定するプロパティです。CSSでは線の縦位置を指定するためのプロパティは定義されていないため、選択肢Dは間違った説明となります。

text-decoration-styleは、テキスト装飾の線のスタイルを指定するプロパティです。ただし、border-styleほど多くの線種はサポートされておらず、指定できるのは「solid」「double」「dotted」「dashed」「wavy（波線）」だけです。「groove」や「inset」などの値は指定できないため、Aも間違った説明です。

text-decoration-colorは、テキスト装飾の線の色を指定するプロパティです。このプロパティは仕様書で定義されていますので、選択肢Cも間違った説明となります。

最後に残った選択肢Bのtext-decoration-widthは、CSSの仕様書では定義されていません（現在のところテキスト装飾の線の太さはCSSでは指定できません）。よって、Bも間違った説明となります。

出題範囲の詳細

例題解説の提供：大藤 幹 氏（HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　著者）

例題2.44「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
HTML文書に次のCSSを適用した場合にh1要素に継承される行の高さはどれか。正しいものを1つ選びなさい。 
             
             body {
               font-size: 10px;
               line-height: 200%;
             }
            h1 {
               font-size: 24px;
             }
  • 20px
  • 24px
  • 48px
  • 200%
  • 行の高さは継承されない

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

答えはこちら

答えは A です。

line-heightプロパティは、それが指定された要素の内部に含まれる要素にも同じ値を継承するプロパティです。しかしCSSで値を継承する際には「プロパティに指定された値そのもの」ではなく「計算結果の値」を継承するというルールがあります。

つまり、line-heightプロパティの値として指定されている「200%」を継承するのではなく、font-sizeプロパティの値である「10px」の「200%」である「20px」という計算結果の値を継承するわけです。そのため、この例題のh1要素の行の高さは、フォントサイズよりも小さい「20px」となってしまいます。

のようになってしまうことを避ける目的で用意されているのが、line-heightプロパティの「単位を付けないで指定する値」です。たとえば「line-height: 2.0;」と指定することで、計算結果の値ではなく「2.0倍にする」という値をそのまま継承させることができます。そのため、line-heightプロパティには単位をつけない値を指定するのが一般的となっています。

出題範囲の詳細

例題解説の提供：大藤 幹 氏（HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　著者）

例題2.43「1.2.3 カスケード（優先順位）」
レベル1の出題範囲「1.2.3 カスケード（優先順位）」からの出題です。
次のCSSセレクタの詳細度はどれか。正しいものを1つ選びなさい。 
             
             *:not(#abc)
  • 000
  • 010
  • 100
  • 110
  • 111

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

答えはこちら

答えは C です。

CSSセレクタの詳細度は、IDセレクタの数を3桁目、属性関連のセレクタの数を2桁目、要素関連のセレクタの数を1桁目とした3桁の数字です。

しかしユニバーサルセレクタ「*」と否定擬似クラス「:not( )」だけは例外的に扱う必要があります。まず、「*」は要素関連のセレクタではありますが、詳細度の計算においてはカウントせずに無視します。「:not( )」は擬似クラスではありますが、それ自体はカウントせずに ( ) 内のセレクタだけをカウントする仕様となっています。

したがって、「*」と「:not( )」は無視され、「#abc」だけが詳細度の計算対象となります。よって上記のセレクタの詳細度は「100」となります。

出題範囲の詳細

例題解説の提供：大藤 幹 氏（HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　著者）

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

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

答えはこちら

答えは C、D、E です。

この問題は、選択肢は異なりますが2019年に公開されたサンプル問題と同じものです。style要素に指定可能な属性は当時と今とでは異なっているため、その確認の意味での再出題です。

style要素には元々src属性は指定できません。

かつては「type="text/css"」のように指定されていたtype属性は、HTML4.01やXHTML1.0では必須の属性でした。それがHTML5では省略可能となり、現在では仕様書からも削除されて指定する必要のない属性となっています。

media属性については、CSSを適用する対象のメディアやメディアクエリを書き込むための重要な属性ですので、現在でも問題なく使用できます。

nonce属性は、2019年当時はstyle要素とscript要素にしか指定できない属性でしたが、現在ではグローバル属性になっているため全要素に指定できます。

blocking属性は2019年には無かった属性ですが、その後追加されています。現在のところ指定可能な値は「render」のみで、「blocking="render"」と指定するとブラウザは外部CSSの読み込み中はレンダリングを中断します（それによってCSSが適用されていない状態で表示されることを防ぎます）。

出題範囲の詳細

例題解説の提供：大藤 幹 氏（HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　著者）

例題2.41「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
次に示したのは、CSSのカウンターの典型的な使用例である。①②③の部分に指定すべきプロパティの組み合わせを１つ選びなさい。 

  h1 { ①: chapter; }
  h2 { ①: section; }
  h2::before {
    ②: chapter;
    ③: "第" counter(chapter) "章 ";
  
  }
  h3::before {
    ②: section;
    ③: counter(chapter) "-" counter(section) " ";
  
  }
  • ①content, ②counter-increment, ③counter-reset
  • ①counter-increment, ②content, ③counter-reset
  • ①counter-reset, ②content, ③counter-increment
  • ①counter-increment, ②counter-reset, ③content
  • ①counter-reset, ②counter-increment, ③content

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

答えはこちら

答えは E です。

③のプロパティでは、値として文字列とcounter()関数を指定しています。セレクタには::before疑似要素を使用して、見出しの前に「第1章 」や「1-1 」のように表示させています。このようなことが可能なプロパティは「content」です。

このcontentプロパティで「第1章 」や「1-1 」と表示させる直前にあるのが②のプロパティで、値としては表示させるカウンターの名前を指定しています。選択肢から、②はcounter-resetプロパティまたはcounter-incrementプロパティのいずれかであることがわかります。表示させる直前に毎回値をリセットしてしまっては同じ数字しか表示されなくなりますので、②に該当するのはcounter-resetプロパティではなく、カウンターの値を1増やすcounter-incrementプロパティであることがわかります。

以上のことから、①はcounter-resetプロパティとなります。h1要素が出現したときにh2要素の前に表示させるカウンター「chapter」の値を0にし、h2要素が出現したときにh3要素の前に表示させるカウンター「section」の値を0にしています。

CSSの正しいソースコードは次のとおりです。


  h1 { counter-reset: chapter; }　/* chapterを0にリセット */
  h2 { counter-reset: section; }　/* sectionを0にリセット */
  h2::before {
    counter-increment: chapter;　/* chapterを1増やす */
    content: "第" counter(chapter) "章 ";　/* 「第△章 」 */
  
  }
  h3::before {
    counter-increment: section;　/* sectionを1増やす */
    content: counter(chapter) "-" counter(section) " ";　/* 「△-□ 」 */
  
  }

出題範囲の詳細

例題解説の提供：大藤 幹 氏（HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　著者）

例題2.40「1.2.3 カスケード（優先順位）」
レベル1の出題範囲「1.2.3 カスケード（優先順位）」からの出題です。
次のHTML文書をブラウザで表示させると、テキストは何色で表示されるか。正しいものを1つ選びなさい。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>例題</title>
<style>
  p#s1 { color: red }
  p.t1 { color: green }
  *#s1 { color: blue }
  p    { color: yellow }
</style>
</head>
<body>
<p id="s1" class="t1" style="color: black">
このテキストは何色で表示されますか？
</p>
</body>
</html>
  • red
  • green
  • blue
  • yellow
  • black

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

答えはこちら

答えは E です。

一見セレクタの詳細度による優先順位の計算問題のように見えますが、実際にはstyle属性の優先度を知っていれば（style属性が指定されていることに気付けば）一瞬で答えのわかる問題です。

たとえセレクタでどのように指定されていたとしても、その適用先にstyle属性が指定されていれば、そのstyle属性の値のCSSが最優先で適用されます。CSS3以降のセレクタの詳細度の計算は3桁で行いますが、CSS2の仕様書では4桁になっており、その4桁目は「style属性による指定であれば1、そうでなければ0」とする仕様でした。style属性はセレクタとは関係がないため、CSS3以降の詳細度の計算は3桁で行われるようになりましたが、style属性による指定が最優先される仕様は現在でも変わっていません。

仮に例題のHTML文書にstyle属性による指定が無かったとしたら、style要素の内部のセレクタの詳細度は順に「101」「011」「100」「001」となり、その場合の答えは A となります。

出題範囲の詳細

例題解説の提供：大藤 幹 氏（HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　著者）

例題2.39「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
CSSのアニメーションの再生時間（再生にかける秒数）を指定するプロパティを1つ選びなさい。
  • animation-time
  • animation-seconds
  • animation-duration
  • animation-direction
  • animation-timing-function

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

答えはこちら

答えは C です。

A と B のプロパティは、CSSでは定義されていない架空のものです。

英語で時刻をあらわす際は「time」を使いますが、再生時間のような継続的な時間をあらわす場合には「duration」という単語を使用します。よって C が正解となります。

D の animation-direction は、アニメーションを逆再生させる際に使用するプロパティです。アニメーションを繰り返させる際に、順再生と逆再生を交互に繰り返させることもできます。

E の animation-timing-function は、アニメーションのイージングの指定をおこなうプロパティです。アニメーションの速度に緩急をつけたい場合などに使用します。

出題範囲の詳細

例題解説の提供：大藤 幹 氏（HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　著者）

例題2.38「1.2.1 スタイルシートの基本」
レベル1の出題範囲「1.2.1 スタイルシートの基本」からの出題です。
CSSセレクタ「.inner」と適用先がまったく同じになる属性セレクタを1つ選びなさい。
  • [class="inner"]
  • [class~="inner"]
  • [class|="inner"]
  • [class^="inner"]
  • [class*="inner"]

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

答えはこちら

答えは B です。

Aの [class="inner"] はclass属性の値全体が「inner」と一致する場合にのみに適用対象とするセレクタです。一見「.inner」と同じようにも思えますが、「.inner」の場合は「class="inner outer"」のように空白区切りでほかのクラス名が指定されている場合でも適用対象となります。よって適用対象が「まったく同じ」にはなりません。

それに対してBの [class~="inner"] は「.inner」と同様に「class="inner outer"」のように空白区切りでほかの名前が指定されている場合でも適用対象とする指定方法です。よってこれが正解となります。

Cは主に「lang="ja"」のような言語コードの指定されている要素を適用先として指定する場合に使用される属性セレクタです。たとえば、[lang|="en"] と指定すると「lang="en"」が指定されている要素だけでなく「lang="en-US"」が指定されている要素も適用対象となります。

Dの [class^="inner"] は、属性値が「inner」で始まる場合に適用対象とする属性セレクタです。逆に属性値が「inner」で終わる要素に適用する場合は [class$="inner"] と指定します。

Eの [class*="inner"] は、属性値のどこかに「inner」が含まれている場合に適用対象とする属性セレクタです。

出題範囲の詳細

例題解説の提供：大藤 幹 氏（HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　著者）

例題2.37「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
次の選択肢にあるCSSプロパティだけを使用して、画像の上にマウスポインタをのせたときに1秒間かけて画像の大きさを1.2倍に拡大したい。この場合に最低限使用する必要のあるCSSプロパティを3つ選びなさい。
  • transform
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

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

答えはこちら

答えは A、C、D です。

Aのtransformは、要素の拡大縮小・回転・移動などのできるプロパティです。選択肢にあるプロパティで画像の大きさを1.2倍に拡大するには、このプロパティを使用します。

Bのtransition-delayはトランジションの開始を遅らせるためのプロパティですので、この問題では特に使用する必要はありません。

Cのtransition-durationは、トランジションにかける時間を指定するプロパティです。画像の大きさを変えるときに1秒間かけるように指定するには、このプロパティを使用します。

Dのtransition-propertyは、どのプロパティの値が変更されたときにトランジションを実行させるのかを指定するプロパティです。transformプロパティで大きさが変更されたときにトランジションを実行させるには、このプロパティを使用します。

Eのtransition-timing-functionは、トランジションのイージング（変化の加減速）を指定するためのプロパティですので、この問題では特に使用する必要はありません。

CSSの指定例としては次のようになります。


img:hover {
  transform: scale(1.2, 1.2);
}
img {
  transition-property: transform;
  transition-duration: 1s;
}

出題範囲の詳細

例題解説の提供：大藤 幹 氏（HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　著者）

例題2.36「1.2.3 カスケード（優先順位）」
レベル1の出題範囲「1.2.3 カスケード（優先順位）」からの出題です。
CSSの !important の指定方法として文法的に誤りであるものをすべて選びなさい。
  • p { font-size: 16px !important }
  • p { font-size: 16px ! important }
  • p { font-size: 16px !important; }
  • p { font-size: 16px !important /* 重要 */ ; }
  • p { font-size: 16px; !important }

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

答えはこちら

答えは E です。
CSSの指定が競合した場合に適用の優先度を上げる「!important」の指定方法に関する問題です。「!important」は、プロパティの最後の値となるように指定します。

AとCの違いは、宣言の最後にセミコロン(;)があるかどうかだけです。これらはもっとも普通に見られる指定方法で、文法的に正しい指定方法です。

Bでは「!」と「important」のあいだに半角スペースが入っています。この指定方法は間違いのようにも思えますが、実は正しい指定方法です。CSS 2.1 の仕様書には、「!」と「important」のあいだに半角スペースを入れた例が掲載されています。
https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#important-rules

Dでは値の最後にコメントが配置されています。「!」と「important」は、値の最後の2つとなるように指定する必要がありますが、コメントは値とは見なされないのでこれも正しい指定方法となります。

Eではセミコロン（;）のあとに「!important」が指定されています。この位置に値は指定できませんので、この指定方法は文法的に誤りとなります。

出題範囲の詳細

例題解説の提供：大藤 幹 氏（HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　著者）

例題2.35「1.2.1 スタイルシートの基本」
レベル1の出題範囲「1.2.1 スタイルシートの基本」からの出題です。
body要素内に配置可能な要素をすべて選びなさい。
  • <style>p { color: #333; }</style>
  • <link rel="next" href="next.html">
  • <link rel="alternate" href="en.html">
  • <link rel="stylesheet" href="style.css">
  • <link rel="icon" href="favicon.png" sizes="16x16" type="image/png">

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

答えはこちら

答えは D です。
style要素は HTML 5.2 ではbody要素内に配置可能でしたが、HTML Living Standard では配置できなくなっています。したがって選択肢Aはbody要素内には配置できません。

link要素をbody要素内に配置できるかどうかは、rel属性に指定するキーワードによって決まります。HTML 5.2 では「rel="stylesheet"」の場合のみbody要素内に配置可能とされていましたが、HTML Living Standard ではrel属性に次のキーワードが指定されている場合に限りbody要素内に配置可能となっています。

・dns-prefetch
・modulepreload
・pingback
・preconnect
・prefetch
・preload
・stylesheet

したがって、body要素内に配置可能な要素は「rel="stylesheet"」が指定されている選択肢Dのみとなります。

出題範囲の詳細

例題解説の提供：大藤 幹 氏（HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　著者）

例題2.34「1.2.2 CSSデザイン」
レベル1の出題範囲「1.2.2 CSSデザイン」からの出題です。
CSSのbackground-sizeプロパティの値として指定可能なキーワードをすべて選びなさい。
  • auto
  • fill
  • cover
  • include
  • contain

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

答えはこちら

答えは A、C、E です。
background-sizeは背景画像の表示サイズを設定するプロパティで、初期値は「auto」です。よって選択肢Aは指定可能なキーワードです。

background-sizeには1つまたは2つの値が指定でき、値を2つ指定した場合は1つ目が背景画像の幅、2つ目が高さとなります。単位を付けた数値または「auto」のいずれかを1つだけ指定した場合は、2つ目の値（高さ）は「auto」であると見なされます。

「auto」を単位付きの数値と組み合わせて指定した場合、数値で指定された方の長さに合わせて、他方を「画像の縦横の比率を保つ長さ」にします。「auto」を単体で指定すると、画像本来の大きさで表示されます。

選択肢Bの「fill」は、background-sizeプロパティには指定できません。

選択肢Cの「cover」は単体でのみ指定可能な値で、画像を「背景画像単体で表示領域全体を覆う最小サイズ」にします。

選択肢Dの「include」は、background-sizeプロパティには指定できません。

選択肢Eの「contain」も単体でのみ指定可能な値です。このキーワードを指定すると「画像の全体が表示される最大サイズ」で表示されます。

出題範囲の詳細

例題解説の提供：大藤 幹 氏（HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集　著者）

例題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が11と最も小さく、優先順位が低くなるので正解です。

出題範囲の詳細

例題解説の提供：株式会社クリーク・アンド・リバー社
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技術者認定事業サービスの充実に活用させて頂くとともに、当団体からの最新情報やイベント情報のご案内を差上げる目的に利用させていただきます。 当団体のプライバシーポリシーについてはこちらをご参照ください。

メルマガ登録する