HTML5プロフェッショナル認定試験 レベル1「CSSデザイン（レイアウト・装飾・アニメーション）」の一問一答

HTML5プロフェッショナル認定試験 レベル1のCSSデザイン（レイアウト・装飾・アニメーション）に関する一問一答（全75問）の正解と解説の一覧です。上の一問一答で実際に解いてから、ここで復習・確認できます。

1. 問1．box-sizingプロパティの初期値はcontent-boxであり、この場合widthプロパティで指定した値はコンテンツ領域の幅のみを表す。

   正解：○（正しい）

   解説：box-sizingの初期値はcontent-boxで、widthはコンテンツ領域の幅を指す。paddingやborderは加算される。

2. 問2．marginプロパティにはパーセント値を指定できない。

   正解：×（誤り）

   解説：誤り。正しくは、marginにはパーセント値を指定でき、その基準は包含ブロックの幅となる。

3. 問3．display:noneを指定した要素は、レイアウト上の領域を占有せず、画面に表示されない。

   正解：○（正しい）

   解説：display:noneは要素を完全に非表示にし、ボックスも生成されず領域を占有しない。

4. 問4．display:inlineを指定した要素には、widthとheightプロパティの指定が効果を持つ。

   正解：×（誤り）

   解説：誤り。正しくは、display:inlineの要素にはwidth・heightは適用されない。inline-blockやblockなら適用される。

5. 問5．display:inline-blockを指定した要素には、widthやheightの指定が一切効かない。

   正解：×（誤り）

   解説：誤り。正しくは、inline-blockは横並び配置を保ちつつwidth・heightの指定が有効になる。

6. 問6．position:absoluteを指定した要素は、最も近い位置指定された祖先要素を基準に配置される。

   正解：○（正しい）

   解説：absoluteはposition:static以外の最も近い祖先を基準に配置される。なければ初期包含ブロック基準。

7. 問7．position:relativeを指定すると、要素は通常のレイアウト位置から、その分の領域も詰めて移動する。

   正解：×（誤り）

   解説：誤り。正しくは、relativeは元の領域を保持したままtop/left等でオフセットされる。元の位置のスペースは残る。

8. 問8．positionプロパティの初期値はstaticである。

   正解：○（正しい）

   解説：positionの初期値はstaticで、通常のフローに従い配置される。top等は無効。

9. 問9．floatプロパティで要素を左右に回り込ませた後、その回り込みを解除するにはclearプロパティを使う。

   正解：○（正しい）

   解説：clearプロパティ（left/right/both）でfloatによる回り込みを解除できる。

10. 問10．overflow:scrollを指定すると、内容がはみ出すときだけスクロールバーが表示される。

    正解：×（誤り）

    解説：誤り。正しくは、scrollは常時スクロールバーを表示する。はみ出す時のみ表示するのはauto。

11. 問11．max-widthプロパティを指定すると、要素の幅がその値を超えないように制限される。

    正解：○（正しい）

    解説：max-widthは最大幅を制限する。widthがこれを超えると、max-widthの値が優先される。

12. 問12．borderプロパティはborder-width、border-style、border-colorをまとめて指定できるショートハンドである。

    正解：○（正しい）

    解説：borderは幅・スタイル・色をまとめて指定するショートハンドプロパティ。

13. 問13．border-styleの値にsolidを指定すると、点線の罫線が描画される。

    正解：×（誤り）

    解説：誤り。正しくは、solidは実線。点線はdotted、破線はdashedで描画される。

14. 問14．box-shadowプロパティのキーワードinsetを指定すると、影が要素の内側に描画される。

    正解：○（正しい）

    解説：insetを付けると外側ではなく内側に影が落ちる（内向きの影）。

15. 問15．opacityプロパティの値1は完全に透明、0は完全に不透明を意味する。

    正解：×（誤り）

    解説：誤り。正しくは、opacityは0が完全透明、1が完全不透明。

16. 問16．background-colorとbackground-imageを同時に指定した場合、背景色が背景画像より手前に表示される。

    正解：×（誤り）

    解説：誤り。正しくは、背景画像が背景色より手前（上）に描画される。背景色は最背面。

17. 問17．background-repeatの値no-repeatを指定すると、背景画像は繰り返されず1回だけ表示される。

    正解：○（正しい）

    解説：no-repeatは背景画像のタイル繰り返しを行わず1枚だけ表示する。

18. 問18．background-attachmentの初期値はfixedであり、背景画像はビューポートに固定される。

    正解：×（誤り）

    解説：誤り。正しくは、background-attachmentの初期値はscrollで、背景は要素と共にスクロールする。固定はfixed。

19. 問19．linear-gradient()は放射状（円形）のグラデーションを生成する関数である。

    正解：×（誤り）

    解説：誤り。正しくは、linear-gradientは線形（直線方向）のグラデーション。放射状はradial-gradient。

20. 問20．font-weightプロパティのboldは太字を、normalは標準の太さを表す。

    正解：○（正しい）

    解説：font-weight:boldは太字、normalは通常。数値400がnormal、700がboldに相当。

21. 問21．font-familyに複数のフォントを指定した場合、最後に書いたフォントが最優先で適用される。

    正解：×（誤り）

    解説：誤り。正しくは、font-familyは先頭から順に探し、最初に利用可能なものが適用される。

22. 問22．text-align:centerを指定すると、インラインコンテンツが水平方向の中央に揃えられる。

    正解：○（正しい）

    解説：text-align:centerはテキスト等のインライン内容を中央揃えにする。

23. 問23．text-decoration:line-throughを指定すると、テキストに下線が引かれる。

    正解：×（誤り）

    解説：誤り。正しくは、line-throughは打ち消し線。下線はunderlineで引く。

24. 問24．text-transform:uppercaseを指定すると、英字がすべて小文字に変換されて表示される。

    正解：×（誤り）

    解説：誤り。正しくは、uppercaseは大文字に変換する。小文字化はlowercase。

25. 問25．text-shadowプロパティを使うと、テキストに影を付けることができる。

    正解：○（正しい）

    解説：text-shadowは水平・垂直オフセット、ぼかし、色でテキストに影を付ける。

26. 問26．letter-spacingプロパティは、文字と文字の間隔（字間）を調整する。

    正解：○（正しい）

    解説：letter-spacingは字間を、word-spacingは単語間の間隔を調整する。

27. 問27．vertical-alignプロパティはブロックレベル要素全体を上下中央に配置するためのものである。

    正解：×（誤り）

    解説：誤り。正しくは、vertical-alignはインライン要素やテーブルセル内の縦方向の揃えを指定する。ブロック全体の中央寄せ用ではない。

28. 問28．directionプロパティの初期値はrtlであり、テキストは右から左へ記述される。

    正解：×（誤り）

    解説：誤り。正しくは、directionの初期値はltr（左から右）。右から左はrtl。

29. 問29．list-style-typeにcircleを指定すると、リストマーカーが黒丸（●）になる。

    正解：×（誤り）

    解説：誤り。正しくは、circleは白丸（○）。黒丸（●）はdisc。

30. 問30．list-style-type:noneを指定すると、リストのマーカーが表示されなくなる。

    正解：○（正しい）

    解説：noneはリストマーカー（記号や番号）を非表示にする。

31. 問31．list-style-positionの値outsideは、マーカーをリスト項目のテキストの内側に配置する。

    正解：×（誤り）

    解説：誤り。正しくは、outsideはマーカーをボックスの外側に配置する。内側はinside。

32. 問32．border-collapse:collapseを指定すると、テーブルの隣接するセルの罫線が1本に結合される。

    正解：○（正しい）

    解説：collapseは隣接セルのボーダーを重ねて1本にまとめる。separateは分離。

33. 問33．caption-sideプロパティはテーブルのキャプション（caption要素）の表示位置を指定する。

    正解：○（正しい）

    解説：caption-sideはキャプションをtop（上）かbottom（下）に配置する。

34. 問34．empty-cellsプロパティは、内容が空のセルの罫線や背景を表示するかどうかを制御する。

    正解：○（正しい）

    解説：empty-cells:show/hideで空セルの枠線・背景の表示有無を制御する（separate時）。

35. 問35．transform-originプロパティは、変形（transform）の基準点を指定する。

    正解：○（正しい）

    解説：transform-originは回転・拡大などの基準点。初期値は要素中央（50% 50%）。

36. 問36．@keyframesルールは、アニメーションの途中経過（キーフレーム）を定義するために使う。

    正解：○（正しい）

    解説：@keyframesでアニメーションの各段階（0%〜100%やfrom/to）の状態を定義する。

37. 問37．animation-iteration-countにloopを指定すると、アニメーションが無限に繰り返される。

    正解：×（誤り）

    解説：誤り。正しくは、無限ループの指定値はinfinite。loopという値は存在しない。

38. 問38．column-countプロパティは、要素の内容を分割する段組み（カラム）の数を指定する。

    正解：○（正しい）

    解説：column-countはマルチカラムレイアウトの列数を指定する。

39. 問39．column-ruleプロパティは、段組みの列と列の間に引く罫線のスタイルをまとめて指定する。

    正解：○（正しい）

    解説：column-ruleはカラム間の罫線の幅・スタイル・色をまとめて指定するショートハンド。

40. 問40．flex-directionの初期値はcolumnであり、フレックスアイテムは縦方向に並ぶ。

    正解：×（誤り）

    解説：誤り。正しくは、flex-directionの初期値はrowで、アイテムは横方向（主軸が水平）に並ぶ。

41. 問41．flex-wrapの初期値はwrapであり、フレックスアイテムは収まらないと自動的に折り返される。

    正解：×（誤り）

    解説：誤り。正しくは、flex-wrapの初期値はnowrapで折り返さない。折り返すにはwrapを指定する。

42. 問42．justify-content:space-betweenを指定すると、最初と最後のアイテムが両端に寄せられ、間が均等に配分される。

    正解：○（正しい）

    解説：space-betweenは両端のアイテムを端に置き、アイテム間を等間隔にする。

43. 問43．隣接するブロックレベル要素の上下のmarginは、重なって大きい方の値が採用されることがある（マージンの相殺）。

    正解：○（正しい）

    解説：上下marginは相殺（margin collapsing）が起こり、大きい方の値になる。

44. 問44．font-sizeの単位pxは、親要素のフォントサイズを基準とした相対値である。

    正解：×（誤り）

    解説：誤り。正しくは、pxは絶対的な長さの単位。親フォントサイズ基準の相対単位はem。

45. 問45．animation-fill-modeにbackwardsを指定すると、アニメーション終了後に最後のキーフレームの状態が維持される。

    正解：×（誤り）

    解説：誤り。正しくは、終了後に最終状態を維持するのはforwards。backwardsは開始前に最初の状態を適用する。

46. 問46．box-sizing:border-boxを指定し、width:200px、padding:20px、border:5pxとした要素のコンテンツ領域の幅はいくつになるか。

    • ア．150px
    • イ．250px
    • ウ．200px
    • エ．160px

    正解：ア．150px

    解説：border-boxではwidthに padding・borderが含まれる。200−（20×2）−（5×2）＝150px。

47. 問47．display:noneとvisibility:hiddenの違いとして正しいものはどれか。

    • ア．display:noneは領域を占有しないが、visibility:hiddenは領域を確保する
    • イ．どちらも領域を確保する
    • ウ．どちらも領域を占有しない
    • エ．visibility:hiddenは領域を占有しないが、display:noneは領域を確保する

    正解：ア．display:noneは領域を占有しないが、visibility:hiddenは領域を確保する

    解説：display:noneは領域を占有しないが、visibility:hiddenは見えなくても領域を確保する。

48. 問48．放射状（円形）のグラデーションを生成するCSS関数はどれか。

    • ア．radial-gradient()
    • イ．linear-gradient()
    • ウ．circle-gradient()
    • エ．round-gradient()

    正解：ア．radial-gradient()

    解説：radial-gradientが放射状グラデーション。linear-gradientは線形。

49. 問49．position:absoluteを指定した要素の配置基準となるのはどの要素か。

    • ア．position:static以外が指定された最も近い祖先要素
    • イ．常にbody要素
    • ウ．直近の親要素（positionに関係なく）
    • エ．常にビューポート

    正解：ア．position:static以外が指定された最も近い祖先要素

    解説：absoluteはposition:static以外で最も近い祖先を基準にする。なければ初期包含ブロック。

50. 問50．要素を斜体で表示するために使うCSSプロパティと値の組み合わせはどれか。

    • ア．font-style: italic
    • イ．font-weight: italic
    • ウ．text-style: italic
    • エ．text-decoration: italic

    正解：ア．font-style: italic

    解説：font-style:italicで斜体になる。font-weightは太さ、text-decorationは装飾線。

51. 問51．テキストをすべて大文字に変換して表示するプロパティと値はどれか。

    • ア．text-transform: uppercase
    • イ．text-transform: capitalize
    • ウ．text-transform: lowercase
    • エ．font-variant: small-caps

    正解：ア．text-transform: uppercase

    解説：text-transform:uppercaseで大文字化。lowercaseは小文字、capitalizeは各単語頭文字を大文字化。

52. 問52．フレックスボックスで主軸（横方向のデフォルト）に沿った子要素の配置を制御するプロパティはどれか。

    • ア．justify-content
    • イ．align-items
    • ウ．align-content
    • エ．flex-direction

    正解：ア．justify-content

    解説：justify-contentが主軸方向の配置を制御。align-itemsは交差軸方向。

53. 問53．transformで要素を時計回りに45度回転させる正しい記述はどれか。

    • ア．transform: rotate(45deg)
    • イ．transform: skew(45deg)
    • ウ．transform: translate(45deg)
    • エ．transform: scale(45deg)

    正解：ア．transform: rotate(45deg)

    解説：rotate(45deg)で回転。translateは移動、scaleは拡大縮小、skewは傾斜。

54. 問54．アニメーションを無限に繰り返すためにanimation-iteration-countに指定する値はどれか。

    • ア．loop
    • イ．infinite
    • ウ．repeat
    • エ．always

    正解：イ．infinite

    解説：infiniteで無限ループ。数値は繰り返し回数を表す。

55. 問55．次のうち、テーブルの隣接セルの罫線を1本に結合するプロパティと値はどれか。

    • ア．border-spacing: 0
    • イ．border-collapse: collapse
    • ウ．border-collapse: separate
    • エ．empty-cells: hide

    正解：イ．border-collapse: collapse

    解説：border-collapse:collapseで罫線を結合。separateは分離。

56. 問56．段組み（マルチカラム）の列数を指定するプロパティはどれか。

    • ア．column-width
    • イ．column-count
    • ウ．column-gap
    • エ．columns-number

    正解：イ．column-count

    解説：column-countで列数を指定。column-widthは列幅、column-gapは列間隔。

57. 問57．box-shadowプロパティで影を要素の内側に描画するために付けるキーワードはどれか。

    • ア．inner
    • イ．inset
    • ウ．inside
    • エ．input

    正解：イ．inset

    解説：insetで内側の影になる。指定なしは外側の影。

58. 問58．opacity:0.5を指定した要素の状態として正しいものはどれか。

    • ア．完全に不透明
    • イ．半透明（50%の不透明度）
    • ウ．完全に透明
    • エ．非表示で領域も消える

    正解：イ．半透明（50%の不透明度）

    解説：opacity:0.5は半透明。0が完全透明、1が完全不透明。

59. 問59．次のうち、リストマーカーを非表示にするプロパティと値はどれか。

    • ア．list-style-type: disc
    • イ．list-style-type: none
    • ウ．list-style-position: outside
    • エ．list-style-image: none

    正解：イ．list-style-type: none

    解説：list-style-type:noneでマーカーを消す。discは黒丸、circleは白丸。

60. 問60．スクロールしても背景画像をビューポートに固定するbackground-attachmentの値はどれか。

    • ア．scroll
    • イ．fixed
    • ウ．local
    • エ．static

    正解：イ．fixed

    解説：fixedで背景をビューポート固定。scrollは要素と共にスクロール。

61. 問61．font-familyに「'Arial', 'Helvetica', sans-serif」と指定した場合、最初に適用されるフォントの決まり方として正しいものはどれか。

    • ア．最後に書いたものが優先される
    • イ．先頭から順に探し、最初に利用できるものが適用される
    • ウ．ランダムに選ばれる
    • エ．すべて同時に重ねて適用される

    正解：イ．先頭から順に探し、最初に利用できるものが適用される

    解説：先頭から順に探し、最初に利用可能なフォントが適用される。

62. 問62．背景画像をタイル状に繰り返さず1回だけ表示するbackground-repeatの値はどれか。

    • ア．repeat
    • イ．repeat-x
    • ウ．no-repeat
    • エ．space

    正解：ウ．no-repeat

    解説：no-repeatで繰り返しなし。repeatは縦横、repeat-x/yは一方向に繰り返す。

63. 問63．transformの変形における基準点を変更するプロパティはどれか。

    • ア．transform-base
    • イ．transform-point
    • ウ．transform-origin
    • エ．transform-center

    正解：ウ．transform-origin

    解説：transform-originで基準点を指定。初期値は中央（50% 50%）。

64. 問64．はみ出した内容を切り取り、スクロールバーも表示しないoverflowの値はどれか。

    • ア．visible
    • イ．scroll
    • ウ．hidden
    • エ．auto

    正解：ウ．hidden

    解説：hiddenははみ出しを切り取り表示しない。scrollは常にバー、autoは必要時のみ。

65. 問65．flex-directionプロパティの初期値はどれか。

    • ア．column
    • イ．row-reverse
    • ウ．row
    • エ．column-reverse

    正解：ウ．row

    解説：初期値はrowで、主軸が水平方向（横並び）になる。

66. 問66．CSSのカウンタ機能で連番を表示する際、値を1ずつ増加させるプロパティはどれか。

    • ア．counter-reset
    • イ．counter-set
    • ウ．counter-increment
    • エ．content

    正解：ウ．counter-increment

    解説：counter-incrementでカウンタを加算。counter-resetは初期化。

67. 問67．テキストに下線を引くプロパティと値の組み合わせはどれか。

    • ア．text-decoration: line-through
    • イ．text-decoration: overline
    • ウ．text-decoration: underline
    • エ．text-style: underline

    正解：ウ．text-decoration: underline

    解説：text-decoration:underlineで下線。line-throughは打ち消し線、overlineは上線。

68. 問68．テーブルのキャプションの表示位置（上下）を指定するプロパティはどれか。

    • ア．caption-position
    • イ．caption-align
    • ウ．caption-side
    • エ．table-caption

    正解：ウ．caption-side

    解説：caption-sideでtop/bottomを指定する。

69. 問69．position:relativeを指定し、top:10px・left:20pxとした要素の挙動として正しいものはどれか。

    • ア．元の領域は詰められ、後続要素が前に詰まる
    • イ．ビューポート基準で配置される
    • ウ．親要素の左上に固定される
    • エ．元の位置を基準に下10px・右20pxずれ、元の領域は残る

    正解：エ．元の位置を基準に下10px・右20pxずれ、元の領域は残る

    解説：relativeは元の位置から相対的にずれ、元の領域（スペース）はそのまま残る。

70. 問70．transitionやanimationで使われ、変化の速度の緩急（イージング）を指定するプロパティはどれか。

    • ア．animation-delay
    • イ．animation-fill-mode
    • ウ．animation-direction
    • エ．animation-timing-function

    正解：エ．animation-timing-function

    解説：animation-timing-function（transition-timing-function）で緩急を指定する。easeやlinear等。

71. 問71．box-sizingプロパティの初期値はどれか。

    • ア．border-box
    • イ．padding-box
    • ウ．margin-box
    • エ．content-box

    正解：エ．content-box

    解説：初期値はcontent-boxで、widthはコンテンツ領域のみを表す。

72. 問72．アニメーション終了後に最後のキーフレームの状態を維持するanimation-fill-modeの値はどれか。

    • ア．backwards
    • イ．none
    • ウ．both
    • エ．forwards

    正解：エ．forwards

    解説：forwardsは終了後に最終状態を保持。backwardsは開始前に最初の状態を適用。

73. 問73．floatによる回り込みを解除するために使うプロパティはどれか。

    • ア．clip
    • イ．clip-path
    • ウ．clearfix
    • エ．clear

    正解：エ．clear

    解説：clearプロパティ（left/right/both）でfloatの回り込みを解除する。

74. 問74．白丸（○）のリストマーカーを指定するlist-style-typeの値はどれか。

    • ア．disc
    • イ．square
    • ウ．decimal
    • エ．circle

    正解：エ．circle

    解説：circleが白丸。discは黒丸、squareは四角。

75. 問75．z-indexプロパティが効果を発揮するための前提条件として正しいものはどれか。

    • ア．positionがstaticであること
    • イ．displayがinlineであること
    • ウ．floatが指定されていること
    • エ．positionがstatic以外に指定されていること

    正解：エ．positionがstatic以外に指定されていること

    解説：z-indexはposition:static以外（relative/absolute/fixed等）が指定された要素にのみ効く。