HTML5プロフェッショナル認定試験 レベル1「CSSの基本とカスケード」の一問一答

HTML5プロフェッショナル認定試験 レベル1のCSSの基本とカスケードに関する一問一答（全75問）の正解と解説の一覧です。上の一問一答で実際に解いてから、ここで復習・確認できます。

1. 問1．タイプセレクタ(要素セレクタ)は、指定した名前のHTML要素すべてにスタイルを適用する。

   正解：○（正しい）

   解説：pやdivなど要素名を指定し、その種類の全要素を対象とするのがタイプセレクタである。

2. 問2．CSSのコメントは、//で始め行末までが対象となる。

   正解：×（誤り）

   解説：誤り。正しくは、CSSのコメントは/* ... */で囲む形式である。

3. 問3．クラスセレクタは、セレクタ名の前にシャープ記号(#)を付けて記述する。

   正解：×（誤り）

   解説：誤り。正しくは、クラスセレクタはピリオド(.)を前に付ける。#はIDセレクタである。

4. 問4．!importantを付けた宣言は、通常の詳細度の計算を上書きして優先的に適用される。

   正解：○（正しい）

   解説：!importantは詳細度やソース順に優先して適用される特別な指定である。

5. 問5．:visited疑似クラスは、まだ訪問していないリンクを選択する。

   正解：×（誤り）

   解説：誤り。正しくは、:visitedは訪問済みのリンクを選択する。未訪問は:linkである。

6. 問6．background(背景)プロパティは、子要素に継承される。

   正解：×（誤り）

   解説：誤り。正しくは、backgroundは継承しないプロパティである。

7. 問7．@import規則は、内部スタイルシート(<style>)の中では使用できない。

   正解：×（誤り）

   解説：誤り。正しくは、@importはstyle要素内でも先頭であれば使用できる。

8. 問8．外部スタイルシートをHTMLに適用するには、head要素内で<link rel="stylesheet" href="style.css">のように記述する。

   正解：○（正しい）

   解説：link要素のrel属性にstylesheetを指定し、hrefでCSSファイルを参照する正しい記述である。

9. 問9．同じid属性値を1つのHTML文書内で複数の要素に付けてもよい。

   正解：×（誤り）

   解説：誤り。正しくは、id属性値は文書内で一意でなければならない。

10. 問10．:last-child疑似クラスは、兄弟要素の中で最後の子要素を選択する。

    正解：○（正しい）

    解説：:last-childは親の中で最後の子要素にマッチする。

11. 問11．隣接兄弟結合子(+)は、指定要素の直後にある同じ親を持つ兄弟要素を選択する。

    正解：○（正しい）

    解説："h2 + p"はh2の直後にある最初のp(隣接兄弟)を選択する。

12. 問12．border(境界線)プロパティは、子要素に継承されるプロパティである。

    正解：×（誤り）

    解説：誤り。正しくは、borderは継承しないプロパティである。

13. 問13．@import規則は、スタイルシート内で他のすべてのCSS規則よりも後ろに記述しなければならない。

    正解：×（誤り）

    解説：誤り。正しくは、@importは@charsetを除く他のすべての規則よりも前(先頭)に記述する必要がある。

14. 問14．::first-line疑似要素は、ブロック要素の最初の行にスタイルを適用する。

    正解：○（正しい）

    解説：::first-lineはブロックレベル要素のテキスト最初の1行を対象とする。

15. 問15．HTML文書内に直接CSSを記述する内部スタイルシートは、<style>要素を使い通常はhead要素内に置く。

    正解：○（正しい）

    解説：style要素にCSSを記述し、head内に配置するのが一般的である。

16. 問16．link要素はbody要素内にのみ記述できる。

    正解：×（誤り）

    解説：誤り。正しくは、スタイルシート読み込みのlink要素は通常head要素内に記述する。

17. 問17．::before疑似要素は、要素の内容の前にコンテンツを生成して挿入する。

    正解：○（正しい）

    解説：::beforeはcontentプロパティと組み合わせ要素内容の前に生成内容を挿入する。

18. 問18．:link疑似クラスは、まだ訪問していないリンクを選択する。

    正解：○（正しい）

    解説：:linkは未訪問のリンク(a要素)にマッチする疑似クラスである。

19. 問19．font-sizeプロパティは、子要素に継承されないプロパティである。

    正解：×（誤り）

    解説：誤り。正しくは、font-sizeはテキスト関連で継承するプロパティである。

20. 問20．a:hover, a:focusのように疑似クラスを含むセレクタはグループ化(カンマ区切り)できない。

    正解：×（誤り）

    解説：誤り。正しくは、疑似クラスを含むセレクタもカンマで区切ってグループ化できる。

21. 問21．インラインスタイル(style属性)は、IDセレクタによる指定よりも詳細度が低い。

    正解：×（誤り）

    解説：誤り。正しくは、インラインスタイルはIDセレクタより詳細度が高い。

22. 問22．複数のセレクタにまとめて同じスタイルを適用するには、セレクタをカンマ(,)で区切る。

    正解：○（正しい）

    解説："h1, h2, h3"のようにカンマで区切るとグループ化され同じ宣言が適用される。

23. 問23．:first-child疑似クラスは、兄弟要素の中で最後の子要素を選択する。

    正解：×（誤り）

    解説：誤り。正しくは、:first-childは最初の子要素を選択する。最後はlast-childである。

24. 問24．ユニバーサルセレクタ(*)は、ルート要素にのみマッチする。

    正解：×（誤り）

    解説：誤り。正しくは、*はすべての要素にマッチするセレクタである。

25. 問25．子結合子(>)は、指定要素の直接の子要素のみを選択する。

    正解：○（正しい）

    解説："ul > li"のように>は直接の子要素だけにマッチする。

26. 問26．:nth-child(2n+1)は偶数番目の子要素を選択する。

    正解：×（誤り）

    解説：誤り。正しくは、2n+1はn=0,1,2…で1,3,5…となり奇数番目を選択する。

27. 問27．インラインスタイル(style属性)では、セレクタを記述する必要がない。

    正解：○（正しい）

    解説：style属性は対象要素自身に適用されるため、セレクタは不要で宣言のみを書く。

28. 問28．子孫結合子は、セレクタ間を半角スペースで区切って表す。

    正解：○（正しい）

    解説："div p"のようにスペースで区切るのが子孫結合子である。

29. 問29．:checked疑似クラスは、チェックされたチェックボックスやラジオボタンを選択する。

    正解：○（正しい）

    解説：チェックや選択状態の入力要素にマッチするのが:checkedである。

30. 問30．詳細度が同じ宣言が複数ある場合、後に記述された宣言が優先される(ソース順)。

    正解：○（正しい）

    解説：詳細度が等しい場合は後から書かれた規則が勝つ(カスケードのソース順)。

31. 問31．間接兄弟結合子(~)は、指定要素の直後の1つの兄弟要素だけを選択する。

    正解：×（誤り）

    解説：誤り。正しくは、~は同じ親を持つ後続のすべての兄弟要素を選択する。

32. 問32．:nth-child(2n)は、偶数番目の子要素を選択する。

    正解：○（正しい）

    解説：2nはn=0,1,2…で2,4,6…となり偶数番目の子要素にマッチする。

33. 問33．[href$=".pdf"]は、href属性の値が.pdfで終わる要素を選択する。

    正解：○（正しい）

    解説：$=は属性値が指定文字列で終わる要素にマッチする。

34. 問34．[class*="btn"]は、class属性の値にbtnという文字列を含む要素を選択する。

    正解：○（正しい）

    解説：*=は属性値に指定文字列を部分的に含む要素にマッチする。

35. 問35．[href^="https"]は、href属性の値がhttpsで終わる要素を選択する。

    正解：×（誤り）

    解説：誤り。正しくは、^=は値が指定文字列で始まる要素を選択する。終わるのは$=である。

36. 問36．ユニバーサルセレクタはアスタリスク(*)で表し、すべての要素を対象とする。

    正解：○（正しい）

    解説：*はすべての要素にマッチするユニバーサル(全称)セレクタである。

37. 問37．font-familyプロパティは、子要素に継承される。

    正解：○（正しい）

    解説：font-familyはテキスト関連のため継承するプロパティである。

38. 問38．特定の要素にのみスタイルを適用するインラインスタイルは、要素のstyle属性に記述する。

    正解：○（正しい）

    解説：style属性に直接プロパティを書くインラインスタイルの説明として正しい。

39. 問39．text-alignプロパティは継承しないため、親で指定しても子の文字配置には影響しない。

    正解：×（誤り）

    解説：誤り。正しくは、text-alignは継承するプロパティである。

40. 問40．margin(外側の余白)プロパティは、子要素に継承される。

    正解：×（誤り）

    解説：誤り。正しくは、marginはボックス関連のため継承しないプロパティである。

41. 問41．CSSの詳細度において、IDセレクタはクラスセレクタよりも優先度が高い。

    正解：○（正しい）

    解説：詳細度はID>クラス/属性/疑似クラス>要素の順で高く、IDが優先される。

42. 問42．同一の宣言ブロック内で同じプロパティを2回指定した場合、先に書いた値が優先される。

    正解：×（誤り）

    解説：誤り。正しくは、同一ブロック内では後に書いた値が優先される。

43. 問43．IDセレクタは、セレクタ名の前にシャープ記号(#)を付けて記述する。

    正解：○（正しい）

    解説：#idname のようにシャープを付けるのがIDセレクタの正しい記述である。

44. 問44．:not(.active)は、activeクラスを持つ要素のみを選択する。

    正解：×（誤り）

    解説：誤り。正しくは、:not()は括弧内の条件に合致しない要素を選択する否定疑似クラスである。

45. 問45．::first-letter疑似要素は、ブロック要素の最初の単語にスタイルを適用する。

    正解：×（誤り）

    解説：誤り。正しくは、::first-letterは最初の1文字に適用される。

46. 問46．次のうち、クラスセレクタの正しい記述はどれか。

    • ア．.menu
    • イ．#menu
    • ウ．menu
    • エ．*menu

    正解：ア．.menu

    解説：クラスセレクタはピリオドを前に付ける。.menuが正しい。

47. 問47．次のうち、属性値が指定文字列で「始まる」要素を選択する属性セレクタはどれか。

    • ア．[href^="a"]
    • イ．[href*="a"]
    • ウ．[href$="a"]
    • エ．[href~="a"]

    正解：ア．[href^="a"]

    解説：^=は値が指定文字列で始まる要素を選択する。

48. 問48．次のうち、要素の最初の1文字にスタイルを適用する疑似要素はどれか。

    • ア．::first-letter
    • イ．::before
    • ウ．::after
    • エ．::first-line

    正解：ア．::first-letter

    解説：::first-letterが最初の1文字を対象とする疑似要素である。

49. 問49．次のうち、子結合子を表す記号はどれか。

    • ア．>
    • イ．+
    • ウ．~
    • エ．

    正解：ア．>

    解説：子結合子は>(大なり記号)で表し、直接の子要素のみを選択する。

50. 問50．詳細度が最も高いのはどれか。

    • ア．インラインスタイル(style属性)
    • イ．クラスセレクタ
    • ウ．IDセレクタ
    • エ．要素セレクタ

    正解：ア．インラインスタイル(style属性)

    解説：インラインスタイルが最も詳細度が高い。次いでID、クラス、要素の順。

51. 問51．次のセレクタのうち、隣接兄弟結合子を使っているものはどれか。

    • ア．h2 + p
    • イ．h2 p
    • ウ．h2 > p
    • エ．h2 ~ p

    正解：ア．h2 + p

    解説：h2 + p の+が隣接兄弟結合子である。

52. 問52．外部スタイルシートを読み込むための正しいlink要素はどれか。

    • ア．<link rel="stylesheet" href="a.css">
    • イ．<link rel="style" src="a.css">
    • ウ．<style src="a.css">
    • エ．<css href="a.css">

    正解：ア．<link rel="stylesheet" href="a.css">

    解説：rel=stylesheetとhrefでCSSを参照するのが正しい。

53. 問53．次のうち、継承しないプロパティはどれか。

    • ア．margin
    • イ．color
    • ウ．font-size
    • エ．line-height

    正解：ア．margin

    解説：marginはボックス関連で継承しない。color/font-size/line-heightは継承する。

54. 問54．div.box p { } のセレクタの詳細度を構成する内訳として正しいのはどれか。

    • ア．ID1・要素2
    • イ．クラス1・要素2
    • ウ．クラス2・要素1
    • エ．ID1・クラス1

    正解：イ．クラス1・要素2

    解説：クラス1個(.box)・要素2個(div,p)で、クラス1・要素2となる。

55. 問55．次のうち、奇数番目の子要素を選択する記述として正しいものはどれか。

    • ア．:nth-child(even)
    • イ．:nth-child(odd)
    • ウ．:nth-child(2n)
    • エ．:last-child

    正解：イ．:nth-child(odd)

    解説：:nth-child(odd)または(2n+1)が奇数番目を選択する。

56. 問56．#main .item(ID1・クラス1)と .item.active(クラス2)が同じ要素にcolorを指定している。どちらが優先されるか。

    • ア．.item.active
    • イ．#main .item
    • ウ．ソース順で常に後者
    • エ．両方無効

    正解：イ．#main .item

    解説：#main .item はID1+クラス1、.item.active はクラス2。IDを含む前者が優先される。

57. 問57．次のうち、否定を表す疑似クラスはどれか。

    • ア．:checked
    • イ．:not()
    • ウ．:hover
    • エ．:nth-child()

    正解：イ．:not()

    解説：:not()は括弧内の条件に合致しない要素を選択する否定疑似クラスである。

58. 問58．ユニバーサルセレクタを表す記号はどれか。

    • ア．#
    • イ．*
    • ウ．.
    • エ．~

    正解：イ．*

    解説：*(アスタリスク)がすべての要素にマッチするユニバーサルセレクタである。

59. 問59．a:link, a:visited, a:hover, a:active を記述する推奨順序(LVHA)として正しいものはどれか。

    • ア．hover→active→link→visited
    • イ．link→visited→hover→active
    • ウ．active→hover→visited→link
    • エ．visited→link→active→hover

    正解：イ．link→visited→hover→active

    解説：link→visited→hover→activeのLVHA順が推奨される。

60. 問60．次のうち、内部スタイルシートを記述する要素はどれか。

    • ア．<link>
    • イ．<style>
    • ウ．<script>
    • エ．<css>

    正解：イ．<style>

    解説：内部スタイルシートはstyle要素にCSSを記述する。

61. 問61．p#intro { } のセレクタの詳細度を構成する内訳として正しいものはどれか。

    • ア．クラス1・要素1
    • イ．ID1・要素1
    • ウ．ID2
    • エ．要素2

    正解：イ．ID1・要素1

    解説：#introがID1個、pが要素1個でID1・要素1となる。

62. 問62．次のうち、属性値に指定文字列を「部分的に含む」要素を選択する属性セレクタはどれか。

    • ア．[class^="x"]
    • イ．[class$="x"]
    • ウ．[class*="x"]
    • エ．[class="x"]

    正解：ウ．[class*="x"]

    解説：*=は値に指定文字列を含む要素を選択する。

63. 問63．次のうち、間接(一般)兄弟結合子を表す記号はどれか。

    • ア．+
    • イ．>
    • ウ．~
    • エ．

    正解：ウ．~

    解説：~(チルダ)が間接兄弟結合子で、後続の兄弟要素すべてを選択する。

64. 問64．以下の指定で最終的にp要素のcolorはどうなるか。p { color: blue !important; } p { color: red; }

    • ア．red
    • イ．継承値
    • ウ．blue
    • エ．無効

    正解：ウ．blue

    解説：!important付きのblueが優先され、青になる。

65. 問65．次のうち、要素内容の前に生成内容を挿入する疑似要素はどれか。

    • ア．::after
    • イ．::first-line
    • ウ．::before
    • エ．::first-letter

    正解：ウ．::before

    解説：::beforeが要素内容の前に生成内容を挿入する。

66. 問66．li:nth-child(3) が選択するのはどの要素か。

    • ア．2番目のli
    • イ．最初のli
    • ウ．3番目のli
    • エ．最後のli

    正解：ウ．3番目のli

    解説：:nth-child(3)は親の中で3番目の子要素を選択する。

67. 問67．複数のセレクタにまとめてスタイルを適用する(グループ化する)際の区切り文字はどれか。

    • ア．セミコロン(;)
    • イ．スペース
    • ウ．カンマ(,)
    • エ．ピリオド(.)

    正解：ウ．カンマ(,)

    解説：グループ化はカンマ(,)でセレクタを区切る。

68. 問68．次の継承プロパティに関する記述のうち正しいものはどれか。

    • ア．borderは継承する
    • イ．marginは継承する
    • ウ．colorは継承する
    • エ．paddingは継承する

    正解：ウ．colorは継承する

    解説：colorなどテキスト関連は継承し、margin/border/paddingは継承しない。

69. 問69．input[type="text"] が選択するのはどの要素か。

    • ア．すべてのinput
    • イ．input以外の要素
    • ウ．type属性がcheckboxのinput
    • エ．type属性がtextのinput

    正解：エ．type属性がtextのinput

    解説：type属性の値がtextであるinput要素を選択する。

70. 問70．#nav { color: red; } と nav { color: blue !important; } が同じnav要素に適用される場合、色はどうなるか。

    • ア．red
    • イ．無効
    • ウ．ソース順で後者
    • エ．blue

    正解：エ．blue

    解説：!importantはIDの詳細度をも上回るため、blueが適用される。

71. 問71．次のうち、訪問済みのリンクを選択する疑似クラスはどれか。

    • ア．:link
    • イ．:active
    • ウ．:hover
    • エ．:visited

    正解：エ．:visited

    解説：:visitedが訪問済みリンクを選択する。

72. 問72．ul li a のセレクタが選択するのはどの要素か。

    • ア．すべてのa要素
    • イ．ul要素
    • ウ．li要素のみ
    • エ．ul内のliの子孫であるa要素

    正解：エ．ul内のliの子孫であるa要素

    解説：ul内のli内にあるa要素(子孫)を選択する。

73. 問73．詳細度が同じ2つの規則がある場合の優先決定方法として正しいものはどれか。

    • ア．ランダムに決まる
    • イ．先に書いた規則が優先
    • ウ．両方無効になる
    • エ．後に書いた規則が優先

    正解：エ．後に書いた規則が優先

    解説：詳細度が等しい場合は後に記述された規則(ソース順で後)が優先される。

74. 問74．button:hover の指定が適用されるのはどんな時か。

    • ア．クリックされた時
    • イ．フォーカスを得た時
    • ウ．読み込み完了時
    • エ．ポインタが上に乗っている時

    正解：エ．ポインタが上に乗っている時

    解説：:hoverはマウスポインタがbutton上にある時に適用される。

75. 問75．section > p { } が選択するのはどの要素か。

    • ア．section内の全階層のp
    • イ．sectionの親のp
    • ウ．sectionの兄弟のp
    • エ．sectionの直接の子であるp

    正解：エ．sectionの直接の子であるp

    解説：子結合子>はsectionの直接の子であるp要素のみを選択する。