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

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

ただいまの
回答率

87.35%

CSS:ナビゲーションメニュー内の企業ロゴと項目を横並びにしたい。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,123

score 12

前提・実現したいこと

現在CSSのレイアウトを勉強中なのですがナビゲーションメニュー内の企業ロゴと項目を横並びにできず困っております。
以下の画像内のBrainというロゴと水色のメニューを横並びにしたいと考えています。
(わかりやすくするためメニューを水色にしています。)
イメージ説明
以下の画像のように作るにはどのようなコードを書けば良いのでしょうか?
イメージ説明

該当のソースコード

<!DOCTYPE html>

<html lang="ja">
<head>
  <meta charset="utf-8">
    <title>Brainナビバー</title>

    <link rel=stylesheet href="Brain%E3%83%8A%E3%83%93%E3%83%90%E3%83%BC%E7%B7%B4%E7%BF%92.css">

</head>

<body>

<header>

<div class="navbar">
    <h1 class="logo">
    <img src="logo.png">
    </h1>

<nav>

  <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Access</a></li>
  <li><a href="#">Blog</a></li>
 </ul>

</nav>

</div>

</header>

        </body>
</html>

@charset="utf-8";

h1{
     padding: 0;
     margin: 0;
}

nav ul{ 
    padding: 0;
    margin: 0;
    font-size: 0;
}

nav ul li{
    list-style-type: none;
    display: inline-block;
    font-size: 16px;
    background-color: skyblue;
    padding: 10px;
}

nav ul li a{
    display: block;
    text-decoration: none;
    color: black;
}

nav ul li a:hover{
    color: gray;
}

試したこと

h1タグとnavタグをブロック要素化してfloat:leftで横並びになるかなと思ったのですができませんでした。
まだ勉強を始めたばかりなので支離滅裂なことを言っているかもしれませんがどうかご教授お願いいたします。

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

ブラウザ:GoogleChrome
エディタ:Brakets

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yasutomi

    2019/07/28 17:20

    コードブロックを使用してください。
    ```html
    ここにコード
    ```

    キャンセル

  • この投稿は削除されました

  • x_x

    2019/07/29 11:18

    DOCTYPE や 属性の引用符、@charset に細かいミスがみられるので修正願います。

    キャンセル

回答 1

checkベストアンサー

+1

私も初心者なので、上級者の方が訂正・詳解してくださることを望みながら書き込みます。なお、参考書「いちばんやさしいHTML&CSS3の教本」(インプレス)からの要約ですのでご容赦ください。displayプロパティでインラインやインラインブロックにしても、横並びのレイアウトにすることは可能ですが、インラインブロックの要素は、HTML上で前後に改行がある場合、それを半角スペースとして認識するため意図して指定した幅プラス余計なスペースが発生してしまい、意図しないレイアウト崩れが起きてしまう場合があるそうです。そこで、私が今回試みたのは<li></li>間の改行を無くしてることでした。するとロゴとメニューが横一列に並びます。あとは細かい調整で済むかと思います。案外、場面によってはfloatを使った方がシンプルかもしれませんね。
あと、<li>タグ内の#の前後につくダブルクォーテーションですが、その他の字体と異なっているので訂正されますようお願いします。
では、私の拙いhtmlとcssを貼っておきます。
-----------------------------------html-----------------------------------------
<!HTML html>

<html lang="ja">
<head>
<meta charset="utf-8">
<title>Brainナビバー</title>
<link rel=stylesheet href="styles.css">
</head>

<body>

<header>
<div class="navbar">
<div class="logo"></div>
<img src="logo.png" class="logo_img">
<nav>
<ul>
<li><a href="#">Home</a></li><li><a href="#">News</a></li><li><a href="#">About</a></li><li><a href="#">Access</a></li><li><a href="#">Blog</a></li>
</ul>
</nav>
</div>
</header>

</body>
</html>
-------------------------------------css----------------------------------------
@charset="utf-8";

h1 {
padding: 0;
margin: 0;
}

.logo_img {
float: left;
}

nav ul { 
padding: 0;
margin: 0;
font-size: 0;
float: right;
}

nav ul li {
list-style-type: none;
display: inline-block;
font-size: 16px;
background-color: skyblue;
padding: 10px;
}

nav ul li a {
display: block;
text-decoration: none;
color: black;
}

nav ul li a:hover {
color: gray;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/29 13:24

    ありがとうございます。
    ご提示いただいたコードで試してみると横並びにすることができました。
    試しにclass="logo"と<nav>にfloat:leftを付与することでも横並びにできました。
    また、<li>間の改行は今回あまり関係がないようでした...。

    pandatrio様ご回答ありがとうございました。
    今後の参考にさせていただきます。

    キャンセル

  • 2019/11/15 20:15

    すごく綺麗なコードですよ。でも、できれば<code>に入れた方が見やすいし、インデントもした方が伝わりやすいと思います。

    キャンセル

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

  • ただいまの回答率 87.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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