ログイン

問題31 afterを使ってアイコンを設置しよう

HTML_CSSの問題

HTML_CSS

疑似要素「::after」を使ってテキストの文末にアイコンを設置します。 ひとつ前の問題を通して疑似要素の使い方を理解できていれば、難無くクリアできる問題だと思います!

afterを使ってアイコンを設置しよう

問題

afterを使って文字の末尾にアイコンを設置しよう。
アイコン画像はこちらを使って下さい。
『 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¥
            
答えのアイコン

解説

初級参拾の問題とほぼ解答は一緒ですが、
アイコンを文字と連結させる為にはdisplay: inline-block;が必須です。

また、文字との間隔を開けるにはmarginを使用します。
縦軸がずれる場合はvertical-alignで調整しましょう。
ログインして解答を見る
beforeやafterを使う際は、どちらもdisplayプロパティの設定を行ないました。
displayの値として指定できるinline-blockについて簡単に解説しておきます。
inline-blockとは、ブロックレベル要素とインライン要素の中間の要素にあたります。
インラインブロック要素は「要素は横並びにしたいけど、横幅・高さや余白を調整したい」などの場面で活躍します。

インラインブロック要素の特徴は、以下の4つが挙げられます。
・横に要素が並ぶ(インライン要素の特徴)
・幅と高さが指定できる(ブロックレベル要素の特徴)
・余白を調整できる(ブロックレベル要素の特徴)
・要素の配置を指定できる(インライン要素の特徴)
このような特徴から利便性が高く、Web制作現場でもよく利用されているので覚えておきましょう!
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!