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

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

新規登録して質問してみよう
ただいま回答率
85.47%
div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

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

HTML

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

CSS

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

Q&A

1回答

1159閲覧

<a id="">と<div id="">を使った表示がされない

退会済みユーザー

退会済みユーザー

総合スコア0

div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/03/28 08:58

前提・実現したいこと

Navbarのリンクが押されたら、リンクによってページを変更せず文字を表示させたい

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

<a id=""><div id="">を使った表示がされない
Navbarのリンクが押されたら#でdivを呼び出せないか試したのですが、表示されません。

該当のソースコード

HTML5

1<!doctype html> 2<head> 3 <!-- Required meta tags --> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <!--text color--> 7 <style> 8 .text_red { 9 color: red; 10 } 11 </style> 12 <!-- Bootstrap CSS --> 13 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 14integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 15</head> 16 17<body> 18 <nav class="navbar navbar-expand-sm sticky-top navbar-dark bg-dark mt-3 mb-3" class="sticky-top"> 19 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" 20aria-expanded="false" aria-label="Toggle navigation"> 21 <span class="navbar-toggler-icon"></span> 22 </button> 23 <a class="text_red navbar-brand" href="#">CLANE STAR ONLINE</a> 24 <div class="collapse navbar-collapse"> 25 <ul class="navbar-nav"> 26 <li class="nav-item active"> 27 <a class="nav-link" href="#register">新規登録</a> 28 </li> 29 <li class="nav-item"> 30 <a class="nav-link" href="#data">データ一覧</a> 31 </li> 32 <li class="nav-item"> 33 <a class="nav-link" href="#exe">エクスポート</a> 34 </li> 35 </ul> 36 </div> 37 <!--div--> 38 <br><br> 39 <div id="register">ああ</div> 40 <div id="data">いい</div> 41 <div id="exe">うう</div> 42 <form class="form-inline"> 43 <input class="form-control mr-sm-1" type="search"> 44 <button class="btn btn-primary" type="submit">ログイン</button> 45 </form> 46 </nav> 47 48 <!-- Optional JavaScript --> 49 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 50 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 51integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 52 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 53integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 54 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 55integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 56</body> 57 58</html>

試したこと

divのid記入欄をid="#exe"に変えた

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

localhost
宜しければご回答よろしくお願いします。

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

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

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

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

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

guest

回答1

0

Navbarでしたらdata-targetで指定のIDと連携させるのでは(リンクはドキュメントURL直です)

投稿2020/03/28 09:19

編集2020/03/28 09:20
m.ts10806

総合スコア80854

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問