• 【HTML】トレーニングドリル6 リストのアイコン画像をCSSで設定しよう

    難易度: ★★
    目標タイム:10分

    問題

    以下のリストを作成し、先頭にアイコンを表示させましょう。

    【リンク文字色】#3999AD
    【オンマウス時リンク文字色】#7DC6D5
    【リストアイコン画像】以下の使用画像を右クリックして保存してお使いください。

    使用画像
    ※クリックしやすいように拡大して表示しています。

    完成図

    ポイント

    ひとつひとつのliに設定するのではなく、ulにidやclassを指定して、ul.クラス名  li に対してCSSでアイコンを設定すると、コードがスッキリします。

    Chromeだけでなく、FireFoxでも表示確認してみてくださいね!(私が最初に書いたコードだと、FireFoxだと対応していないプロパティでした…)

    リストの先頭をアイコンにすると、先頭が・のリストよりも、おしゃれに見えます!
    GeekGirlLaboのお問い合わせページなどにも使われていますよ!

     

    前の問題:【HTML】トレーニングドリル5 テーブルの背景色を設定しよう

     

    The following two tabs change content below.
    柳田 亜沙美

    柳田 亜沙美

    GeekGirlLabo代表。 文学部卒⇒事務職⇒SE(会社員)⇒未経験からフリーランスのWeb屋として独立。その直後にリーマンショック到来、数年後には震災。不況を生き抜いた経験とWebのスキルを活かし、女性×リモートワークを応援したい!と思い立ち、GeekGirlLaboを立ち上げる。 好きな言語はPHP。好きなフレームワークはCakePHP。
Comments are closed.