0

練習でHPを作成しているのですが、横並びになりません。
一体何が原因なのか詳しいかた教えていただきたいです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>company</title>
<meta name="description" content="会社の活動についてのサイト">
<link rel="stylesheet" href="https://unpkg.com/ress.min.css">
<link href="https://fonts.googleeapis.com/com/css?family=Philosopher" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

</head>

<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>
@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;
}

1 件の回答 1

1

cssのファイル(style.css)がcssフォルダに無いからでは?
以下のようなファイル・フォルダ構成になっていますか?
(ただしフォルダ名に「フォルダ」とか付いているのは説明のためなので実際には不要)

/サイトのルートフォルダ
    index.html
    concept.html
    fee.html
    blog.html
    active.html
    mail.html
    /css フォルダ
        style.css
    /images フォルダ
        th.jpeg

また、マルチポスト先では画面更新したか?等のコメントが付いているようです。


マルチポスト先に質問者のコメントがあり、実は質問の元ファイル?/パス?に全角文字が混入していたそうです。

原因がわかりました。既存のCSSファイルのスペルが一部全角で打たれていて、それが原因でリンクしていませんでした!😱

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。