問題

31
HTML_CSS

疑似要素afterでアイコンを設置しよう

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

HTML_CSSの問題に挑戦しよう!

問題

疑似要素afterでアイコンを設置しよう

afterを使って文字の末尾にアイコンを設置しよう。
アイコン画像はこちらを使って下さい。
『 https://ninjacode.work/assets/img/shuriken.png 』

幅と高さはwidth:12px;height:12px;に指定してください。
見本画像を参考にしてCSSに記述していきましょう。

あらかじめエディタに書くコード

                    <span style="font-size: 12px;">文字の後にアイコンを入れましょう</span>
¥HTML¥
                

期待する画面

解答の画像

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

アイコンを文字と連結させる為にはdisplay: inline-block;が必須です。

また、文字との間隔を開けるにはmarginを使用します。
縦軸がずれる場合はvertical-alignで調整しましょう。

補足

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

インラインブロック要素の特徴は、以下の4つが挙げられます。
・横に要素が並ぶ(インライン要素の特徴)
・幅と高さが指定できる(ブロックレベル要素の特徴)
・余白を調整できる(ブロックレベル要素の特徴)
・要素の配置を指定できる(インライン要素の特徴)
このような特徴から利便性が高く、Web制作現場でもよく利用されているので覚えておきましょう!

さらにスキルアップしたい方は公式LINEから「HTML_CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET