Qraft(クラフト) 資格・学習クイズアプリ

CSS基礎 練習問題 69:リスト:マーカーの画像指定

📊 Qraftユーザーの成績

  • 難易度 Bランク(レーティング1214)
  • 難易度 637位/2795問中
  • 正答率 75%(3/4回正解)
レーティングは解いた人の実力と正誤から算出する難しさ(初期値1200)。ランクはその全問題中の順位(S+が最難関、F-が最易)

箇条書きリスト(li要素)の先頭につく黒丸などのマーカーの代わりに、用意した独自の画像(icon.png)を表示したい場合、正しいCSSの書き方はどれか。

  1. list-image-url: url('icon.png');
  2. list-style-icon: url('icon.png');
  3. list-style-image: url('icon.png');
  4. marker-style-img: url('icon.png');
  5. bullet-image-url: url('icon.png');
正解と解説を見る
正解:list-style-image: url('icon.png');

リストのマーカー(ビュレット)に独自の画像を指定する場合は、「list-style-image」プロパティに画像のURLを渡すのが正解です。

【正解の理由】
「list-style-image」プロパティに対して「url('画像のパス')」という形式で値を指定することで、黒丸などの代わりに任意の画像アイコンをリストの先頭に表示できます。

【不正解の理由】
• 「list-image-urlプロパティを使う記述」は誤り。そのようなCSSプロパティは存在しない
• 「list-style-iconプロパティを使う記述」は誤り。マーカーに画像を指定する際の正しいプロパティ名は「-icon」ではない
• 「marker-style-imgプロパティを使う記述」は誤り。そのようなCSSプロパティは存在しない
• 「bullet-image-urlプロパティを使う記述」は誤り。箇条書きの点をビュレットと呼ぶことはあるが、CSSのプロパティ名としては存在しない

← 前の問題問題一覧次の問題 →
アプリで解いてレーティングを上げる(無料・登録不要)