HTML_CSS
Googleでログイン
問題30：疑似要素のbeforeで画像を表示しよう
beforeを使用して画像を表示してください。
画像は『 https://ninjacode.work/assets/img/kv.png 』こちらを使い、
width:250px;
height:140px;
に指定してください。
見本画像を参考にしてCSSに記述していきましょう。
画像は『 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¥
補足
ここでは疑似要素と疑似クラスの違いを再確認しておきます。
・疑似要素
疑似要素は、HTMLには一切変更を加えることなく、ある要素の内容を変更したり追加することのできるものです。
::beforeや::afterを使って、選択した要素の先頭または文末に文章を追加したり、::first-lineや::first-letterを使って文章の1行目や1文字目の文字色やサイズを変化することなどができます。
・疑似クラス
疑似クラスは、マウスホバー時などの文書構造の範囲外にある情報やpタグの奇数だけにスタイルを指定するなどの単体セレクタでは表現できないものを選択する為に使用されます。
疑似要素は、要素の一部に対して影響を与えることができるのに対し、疑似クラスは指定した要素全体に対して影響を与えることができます。
・疑似要素
疑似要素は、HTMLには一切変更を加えることなく、ある要素の内容を変更したり追加することのできるものです。
::beforeや::afterを使って、選択した要素の先頭または文末に文章を追加したり、::first-lineや::first-letterを使って文章の1行目や1文字目の文字色やサイズを変化することなどができます。
・疑似クラス
疑似クラスは、マウスホバー時などの文書構造の範囲外にある情報やpタグの奇数だけにスタイルを指定するなどの単体セレクタでは表現できないものを選択する為に使用されます。
疑似要素は、要素の一部に対して影響を与えることができるのに対し、疑似クラスは指定した要素全体に対して影響を与えることができます。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
background-imageで画像を指定します。
オプションとして、background-repeatでリピートの設定、
background-sizeでは画像の大きさの設定などがあります。
また、beforeやafterで画像を設定する際は
displayをblockまたはinline-blockで指定する必要があります。
contentは、空で付与する事が必須です。
覚えておきましょう。