\r\n \r\n\r\n\r\n
\r\n
\r\n \r\n\r\n\r\n\r\n\r\n
\r\n
\r\n \r\n\r\n\r\n\r\n\r\n
\r\n
\r\n\r\n\r\n```","answerCount":2,"upvoteCount":1,"datePublished":"2020-03-13T13:35:35.814Z","dateModified":"2020-03-13T13:35:35.814Z","acceptedAnswer":{"@type":"Answer","text":">右側と左側の両方にタブメニュー\r\n\r\nとりあえず、メニューを左右に分ければいいんでしょうか？\r\n```HTML\r\n
\r\n```\r\n↓\r\n```HTML\r\n
\r\n```","dateModified":"2020-03-14T04:10:01.358Z","datePublished":"2020-03-14T04:10:01.358Z","upvoteCount":2,"url":"https://teratail.com/questions/246957#reply-357836"},"suggestedAnswer":[{"@type":"Answer","text":"はい、ミスしてないです。\r\nおかしいところをご指摘お願いできればと思います。","dateModified":"2020-03-13T15:35:55.935Z","datePublished":"2020-03-13T15:35:55.935Z","upvoteCount":0,"url":"https://teratail.com/questions/246957#reply-357764","comment":[{"@type":"Comment","text":"これ何のために投稿したのか教えていただけませんか？","datePublished":"2020-03-14T02:40:31.391Z","dateModified":"2020-03-14T02:40:31.391Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","url":"https://teratail.com"},{"@type":"ListItem","position":2,"name":"タブに関する質問","url":"https://teratail.com/tags/%E3%82%BF%E3%83%96"},{"@type":"ListItem","position":3,"name":"タブ","url":"https://teratail.com/tags/%E3%82%BF%E3%83%96"}]}}}
teratail
回答率
85.29%
質問するログイン新規登録
トップタブに関する質問
タブ

コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

メニュー

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

Bootstrap

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

HTML

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

Q&A

解決済

2回答

1743閲覧

bootstrap4を使ってWebアプリ作成、右側と左側の両方にタブメニューを作成したい

daisukekubota
daisukekubota

総合スコア33

タブ

コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

メニュー

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

Bootstrap

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

HTML

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

1グッド

0クリップ

投稿2020/03/13 13:35

1

0

当方、初心者です。
Webアプリを作成したく、右側にLearning,Ajust,Edit,Fileのタブメニューを、左側にViewContorol、Measure,Settingのタブメニューを作成したいのですが療法がブラウザの中央に集まる状態になってしまいます。
どなたか何が間違ったかのご指摘と修正したHTMLのコードを記載の両方をお願いできませんでしょうか。
CSSはBootstrap4を使用しているつもりです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Document</title>
6    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
9    <script type="text/javascript" src="js/jquery-3.4.1.slim.js"></script>
10    <script type="text/javascript" src="js/bootstrap.js"></script>
11</head>
12<body>
13 <div class="container-fiuid">
14 <div class="container">
15    <nav class="navbar navbar-expand-lg navbar-light bg-light">
16      <a class="navbar-brand" href="#"></a>
17      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
18        <span class="navbar-toggler-icon"></span>
19      </button>
20      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
21        <div class="navbar-nav">
22        <div class="float-left">
23          <a class="nav-item nav-link active" href="#">Learning</a>
24          <a class="nav-item nav-link active" href="#">Ajust</a>
25          <a class="nav-item nav-link active" href="#">Edit</a>
26          <a class="nav-item nav-link active" href="#">File</a>
27        </div>
28        </div>
29      </div>
30    </nav>
31
32<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
33<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
34<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
35</div> 
36<div class="container">
37    <nav class="navbar navbar-expand-lg navbar-light bg-light">
38      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
39        <span class="navbar-toggler-icon"></span>
40      </button>
41      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
42        <div class="navbar-nav">
43        <div class="float-right">
44          <a class="nav-item nav-link active" href="#">ViewControl</a>
45          <a class="nav-item nav-link active" href="#">Measure</a>
46          <a class="nav-item nav-link active" href="#">Setting</a>
47        </div>
48        </div>
49      </div>
50    </nav>
51
52<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
53<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
54<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
55</div> 
56</div>
57</body>
58</html>
s.kが👍を押しています

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2020/03/13 13:40

つもりではなく、確定できるレベルまでコードを生成しましょう。 とりあえずコピペしたけど動かないには回答はつかないかと
daisukekubota
daisukekubota

2020/03/13 13:46

すいません、そういう回答は求めていません
kyoya0819
kyoya0819

2020/03/13 15:13

これ、コピペミスしていませんか？再度全てコピペしてみてください。色々おかしな点があります。
daisukekubota
daisukekubota

2020/03/13 15:37

はい、ミスしてないです。おかしいところをご指摘お願いできますでしょうか。
kyoya0819
kyoya0819

2020/03/13 15:48

まず一番に気になったのは <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 等のコードが複数回出ていることです。 まず普通ならこんなことはしないですし、ここまでコードをかける能力がおありならおかしい点であることはご理解いただけると思います。
daisukekubota
daisukekubota

2020/03/14 00:18

当方、初心者です。 それで何行目のどこをどう訂正すればいいのでしょうか。
退会済みユーザー

退会済みユーザー

2020/03/14 03:02

@asuchi0819 ここまで? 自分が最初にかいたけど　bootstrap 公式サイトのサンプルをコピペしてるだけだよ（テキスト部分が一部変更されてるけど ）
kyoya0819
kyoya0819

2020/03/14 11:51

@asahina1979 えっと、、どういう趣旨で書かれていますか？
guest

回答2件

0

ベストアンサー

右側と左側の両方にタブメニュー

とりあえず、メニューを左右に分ければいいんでしょうか？

HTML
1<div class="container">

↓

HTML
1<div class="container float-left">

投稿2020/03/14 04:10

Lhankor_Mhy
Lhankor_Mhy

総合スコア37634

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

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

daisukekubota
daisukekubota

2020/03/14 12:44

ありがとうございます。助かりました。
guest

0

はい、ミスしてないです。
おかしいところをご指摘お願いできればと思います。

投稿2020/03/13 15:35

daisukekubota
daisukekubota

総合スコア33

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

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

kyoya0819
kyoya0819

2020/03/14 02:40

これ何のために投稿したのか教えていただけませんか？
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問

トップタブに関する質問

bootstrap4を使ってWebアプリ作成、右側と左側の両方にタブメニューを作成したい