HTML_CSS
Googleでログイン
問題31：疑似要素afterでアイコンを設置しよう
afterを使って文字の末尾にアイコンを設置しよう。
アイコン画像はこちらを使って下さい。
『 https://ninjacode.work/assets/img/shuriken.png 』
幅と高さはwidth:12px;height:12px;に指定してください。
見本画像を参考にしてCSSに記述していきましょう。
アイコン画像はこちらを使って下さい。
『 https://ninjacode.work/assets/img/shuriken.png 』
幅と高さはwidth:12px;height:12px;に指定してください。
見本画像を参考にしてCSSに記述していきましょう。
あらかじめエディタに書くコード
<span style="font-size: 12px;">文字の後にアイコンを入れましょう</span>
¥HTML¥
期待する画面
解答ソースコード
<span style="font-size: 12px;">文字の後にアイコンを入れましょう</span>
¥HTML¥
span::after {
content: ";
display: inline-block;
background-image: url(https://ninjacode.work//assets/img/shuriken.png);
width: 12px;
height: 12px;
background-repeat: no-repeat;
background-size: cover;
margin-left: 4px;
vertical-align: -1px;
}
¥CSS¥
補足
beforeやafterを使う際は、どちらもdisplayプロパティの設定を行ないました。
displayの値として指定できるinline-blockについて簡単に解説しておきます。
inline-blockとは、ブロックレベル要素とインライン要素の中間の要素にあたります。
インラインブロック要素は「要素は横並びにしたいけど、横幅・高さや余白を調整したい」などの場面で活躍します。
インラインブロック要素の特徴は、以下の4つが挙げられます。
・横に要素が並ぶ(インライン要素の特徴)
・幅と高さが指定できる(ブロックレベル要素の特徴)
・余白を調整できる(ブロックレベル要素の特徴)
・要素の配置を指定できる(インライン要素の特徴)
このような特徴から利便性が高く、Web制作現場でもよく利用されているので覚えておきましょう!
displayの値として指定できるinline-blockについて簡単に解説しておきます。
inline-blockとは、ブロックレベル要素とインライン要素の中間の要素にあたります。
インラインブロック要素は「要素は横並びにしたいけど、横幅・高さや余白を調整したい」などの場面で活躍します。
インラインブロック要素の特徴は、以下の4つが挙げられます。
・横に要素が並ぶ(インライン要素の特徴)
・幅と高さが指定できる(ブロックレベル要素の特徴)
・余白を調整できる(ブロックレベル要素の特徴)
・要素の配置を指定できる(インライン要素の特徴)
このような特徴から利便性が高く、Web制作現場でもよく利用されているので覚えておきましょう!
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
また、文字との間隔を開けるにはmarginを使用します。
縦軸がずれる場合はvertical-alignで調整しましょう。