カスタマイズ:グローバルナビゲーション②

こんにちは。「なり」です。

宿題の解答

以前から宿題になっていたグローバルナビゲーションの「・」ですが、

消すことができました!

↓以前のサイト

ナビゲーション例

消し方を書いていきます。

格闘の日々

私が実践したことは…

  1. 「a」タグの「list-style-type」だと思い、「none」の設定にする → 失敗!!
  2. Googleの検証機能を使い、何のCSSが適用されているか調べる
  3. 「content」プロパティが適用されていることに気付く
  4. 「content」プロパティとは!??? → 調べる
  5. 新しい知識を得て、消すことに成功!!

今日は「content」プロパティについて知ったことを書いていきます。

contentプロパティ

contentプロパティを使うことができるのは、:beforeと:afterだけ。

「:before、:afte」は疑似要素です。これは勉強しました。

指定の要素の前や後ろに文字や画像を入れることができます。

さらに、CSSを使って吹き出しが作れるみたいです。

CSSを使って文章中にかわいいアイコン画像を入れたり、

吹き出しが作れるなんて便利ですね。

今度ぜひ使ってみたいと思います。

そして、消し方ですが…

指定されていた色の設定を変更しました。

グローバルナビゲーションの色と同じにして見えなくしました。

とても簡単に解決したので、

悩んだ時間は何だったんだという気持ちになりました。

では、今日はここまでにします。