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

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

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

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

HTML5

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

解決済

レスポンシブ対応で横スクロールした際、ヘッダーのナビゲーションが表示されない

web83740439
web83740439

総合スコア8

CSS3

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

HTML5

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

1回答

0リアクション

0クリップ

199閲覧

投稿2022/09/17 13:05

レスポンシブ対応をしています。
ヘッダーのロゴとナビゲーションを横並びにしているのですが、横スクロールした際にナビゲーションが消えてしまい、指定した600ピクセルになると出てくるという状況です。
全ての画面においてロゴとナビゲーションを表示させたいのですが、
どうしたら良いでしょうか。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Logo</title> <meta name="viewport" content="width=device-width,initial-scale=1">
<!----css----> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="style.css">
</head> <body> <header class="page-header"> <h1>LOGO</h1> <nav> <ul class="main-nav"> <li><a href="home.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header>
<div class="top-wrapper"> </div> <h2>Feature</h2> <div class="about wrapper"> <article> <h3>What is “Coding Basics”?</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea. commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu. </p> <a class="button" href="#">Read More</a> </article> <aside> <img src="images/sample@2x.png" alt="パソコンを見る女性"> </aside> </div> <footer> <div class="logo"><small>LOGO</small></div> <p>&copy; 2020 LOGO All rights reserved.</p> </footer>
</body> </html>

@charset "UTF-8";

/* 共通部分
--------------------*/
html {
font-size: 100%;

}

body {
font-family: Arial;
line-height: 1.7;
min-width: 100%;
color: #432;

}

a {
text-decoration: none;
}

img {
width: 100%;
}

/* ボタン */
.button {
color: #fff;
background: #EFA358 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
border-radius: 10px;
padding: 15px 56px;
opacity: 1;
}

/* header
----------------------*/
header {
background: #EFA358;
height: 80px;
width: 100%;
min-width: 1300px;
margin: auto;
}

h1 {
color: #fff;
font-size: 28px;
margin-left: 0px;
}

.main-nav {
display: flex;
font-size: 20px;
list-style: none;
}

.main-nav li {
margin-left: 16px;
}

.main-nav a {
color: #fff;
}

.page-header {
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
}

.wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 0 4%;
}

/* home
----------------------/
/
大きな画像 */
.top-wrapper {
background: url("images/fv@2x.png");
min-height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 1;
}

h2 {
text-align: center;
font-size: 32px;
margin-bottom: 30px;
padding: 20px;
}

/* about
---------------------*/

.about {
display: flex;
justify-content: space-around;
margin-bottom: 50px;
}

/*記事部分 */
article {
text-align: left;
width: 45%;
order: 2;
}

/*小さな画像 */
aside {
width: 480px;
height: 329px;
order: 1;

}

h3 {
font-size: 32px;

}

article p {
font-size: 16px;
letter-spacing: 0px;
text-align: left;
letter-spacing: 0px;
line-height: 24px;
margin-bottom: 40px;
width: 394px;
height: 161px;
}

/フッター
----------------------
/

footer {
background: #EFA358;
text-align: center;
margin-top: 100px;
padding: 26px 0;
height: 100px;
}

.logo {
color: #fff;
font-size: 24px;
}

footer p {
color: #fff;
font-size: 12px;
}

/* モバイル版
-------------------*/
@media (max-width:600px) {

/* header */ .page-header { display: block; flex-direction: column; align-items: center; } h1 { padding: 0 20px; } .main-nav { font-size: 1rem; margin-top: 10px; } .main-nav li { margin: 0 20px; text-align: left; } /* about */ .about { flex-direction: column; } .article, .aside { width: 100%; } h3 { font-size: 2rem; } .article { text-align: center; }

}

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

CSS3

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

HTML5

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