レスポンシブしたいのですがなぜこのコードだと反映されないのでしょうか？

レスポンシブしたいのですがこのコードできないですけど何が間違っているのでしょうか？

今webページを制作していてレスポンシブしようとおもい。お手本をみながらコードをうっていたのですがお手本と同じはずなのになぜかできない。

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

レルポンシブできない

該当のソースコード

HTml
1<nav class="top-nav">
2      <ul id="menu">
3        <li class="hamburger"><a href="menu"><i class="fa fa-bars"></i></a></li>
4        <li><a href="#">会社名</a></li>
5        <li><a href="#">ホーム</a></li>
6        <li><a href="#">事業案内</a></li>
7        <li><a href="#">採用情報</a></li>
8        <li><a href="#">お問い合わせ</a></li>
9      </ul>
10    </nav>

css
1nav{
2  background-color: #FAF0E6;
3  color: black;
4}
5
6nav ul{
7  display: flex;
8  flex-float: row;
9  margin: 0;
10  padding: 6px;
11  list-style-type: none;
12}
13
14nav li.hamburger{
15  align-self: flex-end;
16}
17
18nav a{
19  display: block;
20  border-radius: 4px;
21  padding: 12px 24px;
22  color: black;
23  text-decoration: none;
24}
25
26nav li a:hover{
27  background-image: url(img/logo1.jpg);
28}
29
30@media only screen and(min-width:550px){
31  nav ul{
32    display: flex;
33    flex-flow: row;
34    margin: 0;
35    padding: 6px;
36    list-style-type: none;
37  }
38  nav li.hamburger{
39    display: none;
40  }
41}

###こうしたい

###現在

試したこと

お手本をコピーしてはってみたらできました

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

回答2件

ベストアンサー

下記の3箇所か間違いですね。

diff
1nav ul{
2  display: flex;
3- flex-float: row;
4+ flex-direction: column;
5
6  margin: 0;
7  padding: 6px;
8  list-style-type: none;
9}
10
11nav li.hamburger{
12  align-self: flex-end;
13}
14
15nav a{
16  display: block;
17  border-radius: 4px;
18  padding: 12px 24px;
19  color: black;
20  text-decoration: none;
21}
22
23nav li a:hover{
24  background-image: url(img/logo1.jpg);
25}
26
27-@media only screen and(min-width:550px){
28+@media only screen and (min-width: 550px){
29
30  nav ul{
31    display: flex;
32-   flex-flow: row;
33+   flex-direction: row;
34    margin: 0;
35    padding: 6px;
36    list-style-type: none;
37  }
38  nav li.hamburger{
39    display: none;
40  }
41}

投稿2020/08/03 03:19

hatena19

総合スコア33782

退会済みユーザー

2020/08/03 04:32

その三箇所を直したらできました！あれがとうございます！

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

お手本をコピーしてはってみたらできました

ということであれば、どこかで打ち間違いがあるとしか考えられないです。

WinMerge等のdiffツールを使ってコピーしたものと自分で打ったものの差分を調べてみてください。
＊最終的にはgitでバージョン管理して差分を記録できるようにすることをお勧めします。

投稿2020/08/03 03:01

tanat

総合スコア18713

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

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

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

質問する

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

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