写真サイト作成ヘッダーの画像を表示させたい

前提・実現したいこと

サイト作成について
ヘッダーの画像を表示させたい

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>Ropeace Project</title>
6  <link rel="stylesheet" type="text/css" href="base.css">
7</head>
8<body>
9  <header>
10    <h1 class="title" img src="images/logo.png">
11      ROPEACE PROJECT
12    </h1>
13    <ul class="menu-group">
14      <li class="menu-item">Top</li>
15      <li class="menu-item">About</li>
16      <li class="menu-item">Join</li>
17      <li class="menu-item">contact</li>
18    </ul>
19  </header>
20</body>
21</html>

CSS
1header {
2  display: flex;
3  align-items: center;
4}
5
6.title {
7  margin-right: auto;
8}
9
10.menu-item {
11  list-style: none;
12  display: inline-block;
13  padding: 10px;
14	color: gray;
15}

補足情報（FW/ツールのバージョンなど）

見本サイトを追加したのでご覧ください。

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

回答1件

ベストアンサー

おそらくfloatのせいかと思われます。

根本的な解決にならないかもしれませんがflex boxを使用してはいかがでしょうか？

html
1<header>
2  <h1>
3    <img src="images/logo.png" alt="ROPEACE PROJECT">
4  </h1>
5  <ul>
6        <li>contact</li>
7        <li>Join</li>
8        <li>About</li>
9        <li>Top</li>
10      </ul>
11</header>

css
1li {
2    list-style: none;
3    color: gray;
4}
5header{
6  display:flex;
7  justify-content:space-around;
8  align-items:center;
9 }
10ul{ display:flex;
11  justify-content:space-around;
12  width:50%;
13  }
14

これで解決するかと思われます。
（かなりHTMLいじってしまいすみません。ただ、この方がすっきりと見やすくなるかと思います。）
ご参考ください。

よければテストサイトもご参考ください。↓
テストサイト：https://jsfiddle.net/5xc91yae/

投稿2021/08/24 07:44

編集2021/08/24 07:51

morimorinoki

総合スコア84

osaya

2021/08/24 08:19

ありがとうございます！あれからずっとググって調べていてHTML,CSSをかなり変更しました・・・仰る通りflexboxが良いようで、こちらも取り入れたのですが今度はヘッダーの画像が表示されなくなってしまいました。ちなみにaltも試しましたがaltを使うとタイトルが表示されません。。 ```HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ropeace Project</title> <link rel="stylesheet" type="text/css" href="base.css"> </head> <body> <header> <h1 class="title" img src="images/logo.png"> ROPEACE PROJECT </h1> <ul class="menu-group"> <li class="menu-item">Top</li> <li class="menu-item">About</li> <li class="menu-item">Join</li> <li class="menu-item">contact</li> </ul> </header> </body> </html> ``` ```CSS header { display: flex; align-items: center; } .title { margin-right: auto; } .menu-item { list-style: none; display: inline-block; padding: 10px; color: gray; } ```

osaya

2021/08/24 08:33

質問に反映させました。

morimorinoki

2021/08/24 08:37

返信ありがとうございます。おそらく<h1>タグのタイプミスではないでしょうか？私の方で検証した結果、問題なく画像は反映されております。ご参考ください。 https://jsfiddle.net/morimorinoki/sy5xvk10/5/

osaya

2021/08/24 08:46

ありがとうございます。画像のすぐ横にタイトルを表示させたいのです・・・ ●＝画像だとしたら ●ROPEACE PROJECT みたいな感じで・・・テストサイトを拝見し、以下のように修正したら画像は表示されましたが、今度は画像のすぐ下にROPEACE PROJECTが表示されてしまいました・・・ <h1 class="title"><img src="images/logo.png"> ROPEACE PROJECT </h1> ちなみにcssで .title { margin-right: auto; display: inline-block; } これでなんとか横並びにしようと試みましたが無理でした・・・

morimorinoki

2021/08/24 09:42

なるほど、それは失礼しました。では、h1にflexを掛けてみてはいかがでしょう？また、以下のようにするとなお良いと思います。 <h1 class="title"><img src="images/logo.png"> <span>ROPEACE PROJECT</span> </h1> 恐らくこれで解決するかと思います。ご参考ください

morimorinoki

2021/08/25 00:16

すみません、少し親切でなかったので補足します。正確には＝＝＝ <header> <h1> <span><img=" " alt=" "></span> <span>ROPEACE PROJECT</span> </h1> ~~~~~~~ ~~~~~~~ </header> とし、cssには<h1>タグに flex を span(imgの方)を:first-of-typeで指定し、大きさ調整。 span imgにwidthを100%に設定。そうすると横並びになるかと思います。実際にテストしてみたものがこちらになります。 https://jsfiddle.net/morimorinoki/sy5xvk10/13/ 仕上がりイメージはこんな感じでしょうか？ご参考ください。

osaya

2021/08/25 06:23

ありがとうございます！！！無事できました！

morimorinoki

2021/08/25 08:57

よかったです！

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