fontawesomeがレスポンシブの際に表示されない（display:block;が効かない）

前提・実現したいこと

fontawesomeを使って、幅が1000px以下の時に、メニューアイコンを使って表示したい

発生している問題・エラーメッセージ

ヘッダーの右部分に設置している４つのメニューの要素を、幅が１０００px以下の場合、メニューアイコンを使って表示したいと考えています。

手順としては、
１　メニューアイコンの初期値は表示しない。
２　幅が１０００px以下の時、４つのメニューの要素を表示しない。
３　幅が１０００px以下の時、メニューアイコンを表示する。

とします。

この通り行うと、１と２は実装されます。１０００以下の時に、メニューアイコンの非表示と、４つのメニューの非表示となっていました。しかし、最後の３でメニューアイコンが表示されません。

ゴールとしては、３でメニューアイコンをcssに従って、実装することです。

該当のソースコード

HTML
1
2<div class="header-right">
3<a href="#">マルタの基本情報</a>
4<a href="#">マルタの留学ガイド</a>
5<a href="#">マルタの語学学校</a>
6<a href="#">みんなのマルタ留学</a>
7</div>
8<i class="fas fa-bars menu-icon"></i>
9

CSS
1.menu-icon{
2  color: white;
3  float: right;
4  font-size: 25px;
5  padding: 21px 0;
6  display: none;
7}

responsive
1@media (max-width: 1000px) {
2	.header-right{
3		display: none;
4	}
5
6	.menu-icon{
7		display: block;
8	}
9  
10}

試したこと

デペロッパーツールで確認すると、以下のように表示されており、display:block;が効いておりません。

また、このようにも表示されています。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

css
1.menu-icon{
2  display: none;
3}

よりも後に

css
1@media (max-width: 1000px) {
2    .menu-icon{
3        display: block;
4    }
5}

を記述していますか？
基本的に後に書いたものが優先されます。
http://www.htmq.com/csskihon/007.shtml

投稿2019/12/27 04:49

dit.

総合スコア3235

sokinawa4

2019/12/27 04:53

cssとレスポンシブは別ファイルに記載しています。

dit.

2019/12/27 04:54

では、読み込み順は大丈夫ですか？

sokinawa4

2019/12/27 05:00

dit.

2019/12/27 05:03

fontawesomeの読み込み順を一番上にしてみてください。

sokinawa4

2019/12/27 05:10

できました・・・！！！本当にありがとうございます！みなさんがよく使われているprogateでは、先ほどの記述の順番で問題なく表示されていたのですが、オリジナルサイトを作る時はなぜfontawesomeが一番上なのでしょうか？ご教授をお願い致します。

dit.

2019/12/27 05:28

解決できたようで何よりです。回答中にもありますが、CSSは後から書いたものが優先されます。外部ファイルの読み込み順、各CSS中の記述順、HTML側でstyleで記述していればそれが最優先ですし、まぁその辺は参考に出したURLや「css 優先順位」とかで調べて確認してください。今回の場合は同じiに対して3か所で異なるdisplay: ～;を指定してますよね。 fontawesome(all.css)でfasに指定されているinline-block responsive.cssで.menu-iconに指定されているblock stylesheet.cssで.menu-iconに指定されているnone 1000px以下にしたときでもstylesheet.cssが最後に読み込まれていればnoneが優先されます。（@media (・・・) {}でくくってないので全サイズに適用） fontawesome(all.css)が最後に読み込まれればinline-blockが効きます。 progateのどのような単元を元に書いたのかは私にはわかりませんが、displayに関係のない部分しか変更していないとか、iに対する記述じゃなくてpやdivに対して表示非表示をしていたとか、1001px以上の時に非表示にするように記述していたのではないかとか…。という憶測しかできないです。

sokinawa4

2019/12/27 07:03

お返事ありがとうございます！とてもわかりやすいご説明ありがとうございました！参考にしたprogateの単元はこちらになります。（https://prog-8.com/html/study/3/12#/25）

行動規範の内容に同意します