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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

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

HTML5

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

HTML

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

CSS

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

Q&A

解決済

3回答

1652閲覧

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

take-t.t.

総合スコア360

CSS3

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

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/04/21 09:22

編集2019/05/29 07:02

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

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

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

イメージ説明

HTML

1 <header> 2 <div class="container"> 3 <div class="header-left"> 4 <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png"> 5 </div> 6 <i class="fas fa-bars"></i> 7 <div class="header-right"> 8 <a href="#">レッスン</a> 9 <a href="#">新規登録</a> 10 <a href="#" class="login">ログイン</a> 11 </div> 12 </div> 13 </header>

CSS

1header { 2 height: 65px; 3 width: 100%; 4 background-color: rgba(34, 49, 52, 0.9); 5 position :fixed; 6 top: 0; 7 z-index: 10; 8} 9 10.logo { 11 width: 124px; 12 margin-top: 20px; 13} 14 15.header-left { 16 float: left; 17} 18 19.header-right { 20 float: right; 21 margin-right: -25px; 22} 23 24.header-right a { 25 line-height: 65px; 26 padding: 0 25px; 27 color: white; 28 display: block; 29 float: left; 30 transition: all 0.5s; 31} 32 33.header-right a:hover { 34 background-color: rgba(255, 255, 255, 0.3); 35} 36 37.fas { 38 color: white; 39 float: right; 40 font-size: 25px; 41 padding: 21px 0; 42 display: none; 43}

css

1/* スマホ向けレイアウト */ 2@media all and (max-width: 670px) { 3 .lesson { 4 width: 100%; 5 } 6 7 .btn { 8 width: 100%; 9 } 10 11 .facebook { 12 margin-bottom: 10px; 13 } 14 15 .top-wrapper { 16 text-align: left; 17 } 18 19 20 .header-right { 21 display: none; 22 } 23 24 25 .fas { 26 display: block; 27 } 28 29 .top-wrapper h1 { 30 font-size: 24px; 31 } 32 33 .top-wrapper p { 34 font-size: 14px; 35 } 36}

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2019/04/21 12:16

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

2019/04/23 08:36

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

回答3

0

ベストアンサー

すでに解決積みですが、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/24 22:49

ryuto.nakamura

総合スコア60

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

take-t.t.

2019/04/29 11:38

返信が遅れてしまい申し訳ありません。 読み込む順番でも変わるんですね、知りませんでした。 今後は意識していこうと思います。 解決済みにもかかわらず、ご回答ありがとうございました。
hajini10

2021/06/17 00:56

私もprogateのHTML&CSS上級編のサイトを模写コーディングしている時に同様のトラブルで詰まりました。progateのレッスン内では自分で実際にfontawesomeにアカウント登録してcdnを読むなんて工程はやりませんもんね。 サイトは一度作ると小まめにアップデートするもの(むしろそうであるべき)なので、その時の保守性の高さを考えると、あまり!importは使わないようにした方が、他の人が改修する時に悩まなくて済みます。
guest

0

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

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

CSS

1.fas { 2 display: none !important; 3} 4 5@media all and (max-width: 670px) { 6 .fas { 7 display: block !important; 8 } 9}

投稿2019/04/22 02:26

otamunote

総合スコア281

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

take-t.t.

2019/04/23 08:35

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

0

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

投稿2019/04/21 09:31

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

take-t.t.

2019/04/21 10:16

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

2019/04/21 10:20

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

2019/04/21 10:31

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問