質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • HTML

    11434questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7516questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    5101questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2612questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

FontAwesomeに「display: none」が効かない

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 183

takeuchi-HU

score 3

タイトル通り「display: none」を指定しているにも関わらず、以下の画像の赤丸で囲った部分のようにFontAwesomeのメニューアイコンが消えずに困っています。

これはProgateのレスポンシブデザインの演習で扱った物で、本来はPCで見た時は「display: none」で非表示にして、スマホで見た時に「display: block」で表示する、といったものです。
しかし、それがローカルでFontAwesomeを4から5に変えた途端にこのように「display: none」が効かなくなってしまいました。
そこを変えた事と、それに伴ったclass名の変更以外はコードは全くいじっていないのですが、何が原因でしょうか?
ちなみに「visibility : hidden」を指定しても結果は同じでした。

どなたかご教授お願いいたします。

イメージ説明

    <header>
      <div class="container">
        <div class="header-left">
          <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
        </div>
        <i class="fas fa-bars"></i>
        <div class="header-right">
          <a href="#">レッスン</a>
          <a href="#">新規登録</a>
          <a href="#" class="login">ログイン</a>
        </div>
      </div>
    </header>
header {
  height: 65px;
  width: 100%;
  background-color: rgba(34, 49, 52, 0.9);
  position :fixed;
  top: 0;
  z-index: 10;
}

.logo {
  width: 124px;
  margin-top: 20px;
}

.header-left {
  float: left;
}

.header-right {
  float: right;
  margin-right: -25px;
}

.header-right a {
  line-height: 65px;
  padding: 0 25px;
  color: white;
  display: block;
  float: left;
  transition: all 0.5s;
}

.header-right a:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.fas {
  color: white;
  float: right;
  font-size: 25px;
  padding: 21px 0;
  display: none;
}
/* スマホ向けレイアウト */
@media all and (max-width: 670px) {
  .lesson {
    width: 100%;
  }

  .btn {
    width: 100%;
  }

  .facebook {
    margin-bottom: 10px;
  }

  .top-wrapper {
    text-align: left;
  }


  .header-right {
    display: none;
  }


  .fas {
    display: block;
  }

  .top-wrapper h1 {
    font-size: 24px;
  }

  .top-wrapper p {
    font-size: 14px;
  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • maisumakun

    2019/04/21 21:16

    Font AwesomeはCSS版かJavaScript版のどちらを使っているか教えていただけませんか?

    キャンセル

  • takeuchi-HU

    2019/04/23 17:36

    返信が遅れてしまい申し訳ありません。
    私が使っているのはCSS版になります。

    キャンセル

回答 3

+3

すでに解決積みですが、fontawesomeの読み込みよりも自分のCSSを後に読みこめばいいのでは

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="css/master.css">

自分はこの方法で解決しました。
!importantは少しならいいですが増えてくるとCSSがややこしくなるので僕はあまり使わないようにしています

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/29 20:38

    返信が遅れてしまい申し訳ありません。
    読み込む順番でも変わるんですね、知りませんでした。
    今後は意識していこうと思います。

    解決済みにもかかわらず、ご回答ありがとうございました。

    キャンセル

checkベストアンサー

+2

chormeのデペロッパーツールで確認したところ、デフォルト(all.css)で設定されている.fasのdisplay: inline-block;の優先順位が高く、display: noneは打消し線で無効になっています。

優先順位を上げるため、2ヶ所に!importantを追加してみてください。

.fas {
  display: none !important;
}

@media all and (max-width: 670px) {
 .fas {
    display: block !important;
  }
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/23 17:35

    返信が遅れてしまい申し訳ありませんでした。
    「!important」を追加してみたところ、思い通りの表示になりました。
    デフォルトのcssが優先されてしまう場合がある事や、そもそもこの表記自体も知らなかったのでとても勉強になりました。

    他の皆さんもご回答ありがとうございました!

    キャンセル

+1

アイコンを無効にしたいだけなのでしたら該当のクラスを外せば良いのではないでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/21 19:16

    すみません、説明不足でした。

    これはレスポンシブデザインの演習で、PCで見た時は「display: none」で非表示にして、スマホで見た時に「display: block」で表示する、といった感じのものなんです。
    なのでそれ自体を消してしまうのはNGで、それ意外の方法を教えていただければ有り難いです。

    キャンセル

  • 2019/04/21 19:20

    了解です。その旨質問に追記いただけますか?

    キャンセル

  • 2019/04/21 19:31

    お手数をおかけして申し訳ありません、追記しました。

    キャンセル

同じタグがついた質問を見る

  • HTML

    11434questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7516questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    5101questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2612questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。