Q&A
質問文は編集できます。
HTMLの部分は、「```HTML」だけの行と「```」だけの行で囲むように書き、
CSSの部分は「```CSS」だけの行と「```」だけの行で囲むように書いてください。
「<HTML>」と「<CSS>」は、実際のファイルに書いてないのであれば消してください。
練習でHPを作成しているのですが、横並びになりません。
一体何が原因なのか詳しいかた教えていただきたいです。
＜HTML>
<body> <header class="page-header"> <h1><a href="index.html"><img class="logo" src="images/th.jpeg" alt="会社ロゴ"> </a></h1> <nav> <ul class="main"> <li><a href="index.html">Home</a></li> <li><a href="concept.html">Concept</a></li> <li><a href="fee.html">fee</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="active.html">Active</a></li> <li><a href="mail.html">Mail</a></li> </ul> </nav> </header> </body> </html></head>
<CSS>
@charset "utf-8";
html{
font-size: 100%;
}
body {
font-family: "Yu Gothic Medium","ゴシック medium", YuGothic,"ヒラギノ角ゴ Pro W3",
"sans-serif";
line-height: 1.7;
color: #432;
}
a{
text-decoration: none;
}
img{
max-width: 5%;
}
.logo{
width: 5px;
margin-top: 14px;
}
.main {
display: flex;
font-size: 1.25rem;
text-transform: uppercase;
margin-top: 34px;
list-style: none;
}
.main li{
margin-left: 36px;
}
.main a{
color:#432
}
.main a:hover{
color:#0bd;
}
.page-header {
display: flex;
}
横並びになっているように見えますが？
更新しましたか？
chromeならキャッシュのクリアしないとCSSが適用されなかったりします
回答1件
0
ベストアンサー
記載されているコードをそのまま実行しましたが、きちんとナビゲーションメニューが横並びに整列されていましたよ。pekopekoapricotさんの言う通りキャッシュが残っている場合があります。
F5ではなく、Ctrl+F5で一度確認してみてください。
](ae42411c031bbc6ac70a239dccec48e5.png)
投稿2020/10/28 04:37
編集2020/10/28 04:38
総合スコア74
Daregadaさん、pekopekoapricotさん、itzuakniami123さん、ありがとうございました！原因がわかりました。既存のCSSファイルのスペルが一部全角で打たれていて、それが原因でリンクしていませんでした！????キャッシュのやり方も今後試して見ます！本当にありがとうございます！☺️
良かったです！Ctrl+F5はchromeで検証する際によく使っています。仕様なのかたまにキャッシュを保持してしまい、ソースコードを変更したのに反映されないことがあります。
ということは、こっちに移す前のソースコードに問題があったということですね。
解決してよかったです。
あなたの回答
tips
プレビュー
