【HTML】トレーニングドリル6 リストのアイコン画像をCSSで設定しよう
- 【練習問題】トレーニングドリル
2020.05.27
難易度： ★★
目標タイム：10分
問題
以下のリストを作成し、先頭にアイコンを表示させましょう。
【リンク文字色】#3999AD
【オンマウス時リンク文字色】#7DC6D5
【リストアイコン画像】以下の使用画像を右クリックして保存してお使いください。
使用画像
※クリックしやすいように拡大して表示しています。
完成図
ポイント
ひとつひとつのliに設定するのではなく、ulにidやclassを指定して、ul.クラス名 li に対してCSSでアイコンを設定すると、コードがスッキリします。
Chromeだけでなく、FireFoxでも表示確認してみてくださいね！（私が最初に書いたコードだと、FireFoxだと対応していないプロパティでした…）
リストの先頭をアイコンにすると、先頭が・のリストよりも、おしゃれに見えます！
GeekGirlLaboのお問い合わせページなどにも使われていますよ！
【模範解答】
https://github.com/geekgirllabo/drill/tree/master/html/drill6
※一例ですので、あくまでもご参考程度にお願いします
前の問題：【HTML】トレーニングドリル5 テーブルの背景色を設定しよう
次の問題：【HTML】トレーニングドリル7
時間や場所にとらわれずに
働きたいあなたへ
「スキル」と「実績」を身につけて
自由に働こう
“お悩み” ではありませんか？
- 仕事以外の自分の時間が足りていない
- 家族との時間が足りていない
- 家事と育児に追われ、パートをする時間がない
- Webサイトの仕組みを理解したい方
- 専門的スキルを持っておらず、将来が不安
無料カウンセリングは
こちらから
カウンセリングでは、プラン内容や料金体制、
学習後のイメージなど不安や疑問に
思われていることにお答えします。
あなたにピッタリな適性プラン診断をはじめ、
豪華特典がいっぱい
LINE限定配信動画プレゼント
女性・男性ともに生活の質（QOL）を高めたいニーズが高まっています。そんな中で、Webスキルを獲得すると、なぜ自由な働き方ができるのかを“限定動画”でお伝えします。
*数日間配信を見続けるとことで、限定動画が配布されます。
LINE限定配信動画
プレゼント
女性・男性ともに生活の質（QOL）を高めたいニーズが高まっています。そんな中で、Webスキルを獲得すると、なぜ自由な働き方ができるのかを“限定動画”でお伝えします。
*数日間配信を見続けるとことで、限定動画が配布されます。
未経験から始めるWEB
の
お仕事ガイド
スクールに通う前に必ず読んで欲しいガイドブックです。
仕事ガイドには、Webの仕事でQOLが上がる理由や、未経験から仕事獲得するまでの道筋を余すことなく掲載しています。
適性プラン診断
あなたの理想の働き方を実現するための最適な受講プランを診断します。
診断結果を参考に、効率よく理想の働き方を実現しましょう。
エンジニア適性診断
未経験でエンジニアに向いているか不安な方は、まず適性診断を受けましょう。
あなたの適性を知ることでスクールに通うべきか否かを知ることができます。
教材サンプルプレゼント
受講生が実際に使っているオンライン教科書を体験できます。
「実務研修」の教材の一部をプレゼント！
LINEに登録して特典を受け取る
