display: inline-block;を指定しても反映されない

【今やっていること】
HTML&CSSを使ってフルスクリーン型のWebページを作成しています。

【背景】
ヘッダーにあるメニューを、float: right; によって右寄りにしたいのですが、デフォルトでdisplay: block;と設定されており横並びができない状態でした。なので、この設定を display: inline-block;に変更しようとしていますが、なぜか反映されません。

【問題点】
どこにdisplay: inline-block;を記述すればいいのか、これが反映されないのは他に原因があるのか、が分かりません。

もしお時間ございましたら、ご教授頂けると幸いです。

該当するコードは以下の通りです????

HTML
1<!DOCTYPE html>
2<html lang="ja"></html>
3<head>
4  <meta charset="UTF-8">
5  <title>風景写真家「SNAPPERS」Official Website</title>
6  <link rel="stylesheet" href="style/css">
7  <link href="https://fonts.googleapis.com/css2?family=Bitter:wght@400;700&display=swap" rel="stylesheet">
8</head>
9<body id="index">
10  <header>
11    <div class="logo">
12      <img src="https://www.pngitem.com/pimgs/m/403-4033885_snapper-logo-png-transparent-snapper-logo-png-download.png" alt="SNAPPERS" width="150" height="75">
13    </div>
14      <ul class="menu">
15        <li><a href="#">Portfolio</a></li>
16        <li><a href="#">About</a></li>
17        <li><a href="#">Contact</a></li>
18      </ul>
19  </header>
20  <div class="contents">
21    <h1>Life is beautiful, Snap!Snap!</h1>
22    <p>このWebサイトは、学習用サンプルとして作成する「SNAPPERS」という架空の写真家のポートフォリオサイトです。<br>チュートリアル形式でHTMLとCSSを学びながら完成を目指します。楽しんで作成しましょう。
23    </p>
24    <p class="btn"><a href="">My Portfolio</a></p>
25  </div>
26  <footer>
27    <small>(C)2017 Hattori-studio</small>
28  </footer>
29</body>

CSS
1@charset "utf-8"
2body {
3  margin: 0;
4  padding: 0;
5  background-color: #cccccc; 
6  color: #333333; 
7  font-size: 15px;
8  line-height: 2; 
9}
10p, h1, h2, h3, h4, h5, h6 {
11  margin-top: 0;
12}
13img {
14  vertical-align: bottom; 
15}
16ul {
17  margin: 0;
18  padding: 0;
19}
20a {
21  text-decoration: none;
22  color: #3583aa;
23}
24a:hover {
25  text-decoration: underline; 
26}
27a:visited {
28  color: #788d98;
29}
30
31header {
32  width: 960px;
33  height: 100px;
34  margin: 0 auto;
35  display: inline-block; 
36}
37
38.logo {
39  float: left;
40}
41.menu {
42  float: right;
43}
44

m.ts10806

2020/09/07 08:27

そもそもfloatは回り込みを指定するもので寄せるものではないです。 inline-blockである必要もないとは思いますけど・・

mocchiri

2020/09/07 08:31

大前提として、CSSを読み込むコードに誤りがありますが、ここは正しく設定されていますか。 <link rel="stylesheet" href="style/css">

Kindy

2020/09/07 08:47

「寄せる」という表現が間違っていたのかもしれません。ご指摘ありがとうございます

Kindy

2020/09/07 08:48

ご指摘の通り、大前提としてCSSのリンクコードが間違っていました。教えていただきありがとうございます。

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

回答1件

ベストアンサー

ただメニューを横並びに設定する場合は、右寄り云々は関係なく、下記に当てはめると良いです。

css
1.menu li {
2  display: inline-block;
3}

投稿2020/09/07 08:35

mocchiri

総合スコア47

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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

display: inline-block;を指定しても反映されない

関連した質問