ログイン
問題30

疑似要素のbeforeで画像を表示しよう

疑似要素の「::before」を使ってブラウザ上に画像を表示します。 beforeで画像を表示させるには、CSSのみで画像を指定することになります。 どのように指定するのかこの問題を通して学習していきましょう!

アイコン画像

問題30:疑似要素のbeforeで画像を表示しよう

beforeを使用して画像を表示してください。
画像は『 https://ninjacode.work/assets/img/kv.png 』こちらを使い、
width:250px;
height:140px;
に指定してください。

見本画像を参考にしてCSSに記述していきましょう。

エディターのアイコンあらかじめエディタに書くコード

                <span style="display: inline-block;background-color: black;"></span>
¥HTML¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <span style="display: inline-block;background-color: black;"></span>
¥HTML¥
            
              span::before {
    content: ";
    display: block;
    background-image: url(https://ninjacode.work/assets/img/kv.png);
    width: 250px;
    height: 140px;
    background-repeat: no-repeat;
    background-size: cover;
}
¥CSS¥
            

コメントのアイコン解説

beforeやafterで画像を表出する際は
background-imageで画像を指定します。

オプションとして、background-repeatでリピートの設定、
background-sizeでは画像の大きさの設定などがあります。

また、beforeやafterで画像を設定する際は
displayをblockまたはinline-blockで指定する必要があります。

contentは、空で付与する事が必須です。
覚えておきましょう。
ログインして解答を見る

コメントのアイコン補足

ここでは疑似要素と疑似クラスの違いを再確認しておきます。
・疑似要素
疑似要素は、HTMLには一切変更を加えることなく、ある要素の内容を変更したり追加することのできるものです。
::beforeや::afterを使って、選択した要素の先頭または文末に文章を追加したり、::first-lineや::first-letterを使って文章の1行目や1文字目の文字色やサイズを変化することなどができます。
・疑似クラス
疑似クラスは、マウスホバー時などの文書構造の範囲外にある情報やpタグの奇数だけにスタイルを指定するなどの単体セレクタでは表現できないものを選択する為に使用されます。
疑似要素は、要素の一部に対して影響を与えることができるのに対し、疑似クラスは指定した要素全体に対して影響を与えることができます。
完了にする!
twitterのアイコン
活動記録をTweetする
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる