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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Twitter Bootstrap

Twitter Bootstrapはウェブアプリとウェブサイトの開発をすぐに始めることができるツイッターのフロントエンドのフレームワークです。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1417閲覧

ハンバーガメニュー左寄せについて

CodOsk

総合スコア6

Twitter Bootstrap

Twitter Bootstrapはウェブアプリとウェブサイトの開発をすぐに始めることができるツイッターのフロントエンドのフレームワークです。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/12/30 04:25

前提・実現したいこと

ハンバーガメニューを右寄せにしたい。
ここに質問の内容を詳しく書いてください。
bootstrapを使用しLP作成を行っています。
メニューバーを入力すると、左端にあるロゴの横にきてしまいます。

別件にはなりますが、下記エラーはどのように解消したらよろしいでしょうか、ご教示願います。

発生している問題・エラーメッセージ

Tag must be paired, missing: [ </div> ], start tag match failed [ <div id="home"> ] on line 15.(tag-pair)

エラーメッセージ Tag must be paired, missing: [ </div> ], start tag match failed [ <div id="home"> ] on line 15.(tag-pair) ### 該当のソースコード ```ここに言語名を入力 ソースコード <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Nuno - Responsive Bootstrap Theme</title> <link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="css/fixed.css"> </head> <body data-spy="scroll" data-target="#navbarResponsive"> <!--- Start Home Section --> <div id="home"> <!--- Navigation --> <nav class="navbar-expand-md navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="#"><img src="img/nuno.png"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse navbar-right" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#course">Course</a> </li> <li class="nav-item"> <a class="nav-link" href="#features">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#resources">Resources</a> </li> <li class="nav-item"> <a class="nav-link" href="#clients">Clients</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </nav> <!--- End Navigation --> <!--- End Home Section --> <!--- Start Course Section --> <div id="course" class="offset"> </div> <!--- End Course Section --> <!--- Start Features Section --> <div id="features" class="offset"> </div> <!--- End Features Section --> <!--- Start Resources Section --> <div id="resources" class="offset"> </div> <!--- End Resources Section --> <!--- Start Clients Section --> <div id="clients" class="offset"> </div> <!--- End Clients Section --> <!--- Start Contact Section --> <div id="contact" class="offset"> </div> <!--- End Contact Section --> <!--- Script Source Files --> <script src="js/jquery-3.3.1.min.js"></script> <script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script> <script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script> <!--- End of Script Source Files --> </body> </html> ### 試したこと mr-auto など試しましたが、改善されませんでした。 ここに問題に対して試したことを記載してください。 ### 補足情報(FW/ツールのバージョンなど) vs ここにより詳細な情報を記載してください。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s8_chu

2019/12/31 04:57

ソースコードはコードブロックで囲んでいただけませんか?
guest

回答1

0

ベストアンサー

  1. <div id="home"> という div 要素の開始タグに対する終了タグが存在しないため、そのようなエラーが発生しています。
  2. .navbar クラスを nav 要素へ付与することで、 justify-content プロパティへ space-between が設定され、各 flex アイテムは flex コンテナの中で主軸方向に均等に配置されます

How it works

Here’s what you need to know before getting started with the navbar:

  • Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
  • Use our spacing and flex utility classes for controlling spacing and alignment within navbars.

以上 2 点を修正すると、以下のようになり、質問者さんの実現したいことが行えます (動作確認用リンク)。

HTML

1<!DOCTYPE html> 2<html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>Nuno - Responsive Bootstrap Theme</title> 8 <link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css"> 9 <link rel="stylesheet" href="style.css"> 10 <link rel="stylesheet" href="css/fixed.css"> 11 </head> 12 13 <body data-spy="scroll" data-target="#navbarResponsive"> 14 15 <!--- Start Home Section --> 16 <div id="home"> 17 18 <!--- Navigation --> 19 <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> 20 <a class="navbar-brand" href="#"><img src="img/nuno.png"></a> 21 <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarResponsive"> 22 <span class="navbar-toggler-icon"></span> 23 </button> 24 25 <div class="collapse navbar-collapse navbar-right" id="navbarResponsive"> 26 <ul class="navbar-nav ml-auto"> 27 <li class="nav-item"> 28 <a class="nav-link" href="#home">Home</a> 29 </li> 30 <li class="nav-item"> 31 <a class="nav-link" href="#course">Course</a> 32 </li> 33 <li class="nav-item"> 34 <a class="nav-link" href="#features">Features</a> 35 </li> 36 <li class="nav-item"> 37 <a class="nav-link" href="#resources">Resources</a> 38 </li> 39 <li class="nav-item"> 40 <a class="nav-link" href="#clients">Clients</a> 41 </li> 42 <li class="nav-item"> 43 <a class="nav-link" href="#contact">Contact</a> 44 </li> 45 </ul> 46 </div> 47 </nav> 48 <!--- End Navigation --> 49 50 <!--- End Home Section --> 51 52 <!--- Start Course Section --> 53 <div id="course" class="offset"> 54 55 </div> 56 <!--- End Course Section --> 57 58 <!--- Start Features Section --> 59 <div id="features" class="offset"> 60 61 </div> 62 <!--- End Features Section --> 63 64 <!--- Start Resources Section --> 65 <div id="resources" class="offset"> 66 67 </div> 68 <!--- End Resources Section --> 69 70 <!--- Start Clients Section --> 71 <div id="clients" class="offset"> 72 73 </div> 74 <!--- End Clients Section --> 75 76 <!--- Start Contact Section --> 77 <div id="contact" class="offset"> 78 79 </div> 80 <!--- End Contact Section --> 81 82 </div> 83 <!--- Script Source Files --> 84 <script src="js/jquery-3.3.1.min.js"></script> 85 <script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script> 86 <script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script> 87 <!--- End of Script Source Files --> 88 89 </body> 90 91</html> 92

投稿2019/12/31 04:58

編集2019/12/31 05:28
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

CodOsk

2020/01/03 09:09

ご連絡が遅れてしまい、申し訳ありません。 ご丁寧に回答していただきまして、誠に有り難う御座いました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問