ログイン

問題30 beforeを使って画像を出そう

HTML_CSSの問題

HTML_CSS

疑似要素の「::before」を使ってブラウザ上に画像を出します。 beforeを使用して画像表示させるには、CSSのみで画像を指定する必要があります。 どのように指定するのか覚えていきましょう!

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」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!