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

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

ただいまの
回答率

87.37%

「同じコードで表示に違いが出る件」と「Bootstrapが正しく作動しない件」

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 811

前提・実現したいこと

Bootstrapを使用してポートフォリオを作成中です。

Navbar-Togglerを使い、ハンバーガーを正しく作動させたいです。

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

トップページ(index.html)だけやたらとNavbarが大きく表示されます。

また、Navbar-Togglerが正しく作動せず、タイトルと被ってしまいます。

該当のソースコード

<html lang="ja">
  <head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">

    <!-- Favicon -->
    <link rel="icon" href="img/favicon-glasses_64.png">

    <!-- Font Awesome -->
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

    <!-- Font Awesome Animation -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />

    <title>めがねん's Portfolio</title>

  </head>

  <body>

    <nav class="navbar navbar-expand-md navbar-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="img/mylogo50pxblack.png" alt="ロゴ"></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" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="index.html">Home</a>
          </li>
            <li class="nav-item">
              <a class="nav-link" href="about.html">About</a>
          </li>
            <li class="nav-item">
              <a class="nav-link" href="works.html">Works</a>
          </li>
            <li class="nav-item">
              <a class="nav-link" href="contact.html">Contact</a>
          </li>
          </ul>
        </div>
      </div>
      </nav>

  <div id="main" class="container-fluid">
    <h2 class="page-title">why don't you work with me?</h2>
    <h4 class="sub-title">I can cording your web site.</h4>
  </div>

    <footer>
      <p>&copy;meganen2020</p>
      <a href="https://twitter.com/iammeganen"><i class="fab fa-twitter-square faa-bounce animated"></i></a>
    </footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <!-- <script src="script.js"></script> -->
    </body>
    </html>
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Gotu&display=swap');

html {
  font-size: 100%;

}
body {
  width: 100%;
  position: relative;
  padding-bottom: 100px;
  box-sizing: border-box;
  font-family: 'Gotu', sans-serif;
  line-height: 1.7;
  background: rgb(255, 238, 0);
  color: #432;
}
a {
  color: #432;
  text-decoration: none;
}
img {
  width: 80%;
}
.logo {
  width: 50px;
  margin-top: 14px;
}
.page-header {
  display: flex;
  justify-content: space-between;
  max-width: 100%;
}
.wrapper {
  max-width: 1300px;
  margin: 0 4%;
  text-align: center;
}
nav {
  width: 100%;
  height: 50px;
  position: relative;
  font-size: 20px;
  z-index: 1;
}
.navbar {
  padding: .8rem;
}
.navbar-nav li {
  padding-right: 10px;
}
#main {
  width: 100%;
  min-height: 100vh;
  padding-top: 5rem;
  text-align: center;
  color: black;
  background-image: url(../img/gate.jpg);
  background-color: rgb(255, 238, 0);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-title {
  font-size: 4rem;
  text-transform: uppercase;
  font-weight: bold;
  color: black;
}
.sub-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: black;
}
/* footer */
footer {
  position: absolute;
  width: 100%;
  height: 100px;
  background: royalblue;
  color: white;
  padding: 5px 0 5px 5px;
  bottom: 0;
  text-align: center;
  display: flex;
  justify-content: space-between;
}
footer p {
  padding: 1rem 0 1rem 1rem;
}
.fa-twitter-square{
  color: white;
  font-size: 2em;
  margin: .5rem 1rem 1rem 1rem;
}
.fa-twitter-square:hover {
  color: yellow;
  font-size: 2.5rem;
}




@media (max-width: 1200px) {
  nav {
    height: 4rem;
  }  
  .home-content {
    margin: 0 auto;
    text-align: center;
  }
  .page-title {
    font-size: 3.5rem;
  }
  .page-sentence {
    font-size: 2rem;
  }
  .main-nav {
    font-size: 1rem;
    margin-top: 10px;
    color: black;
  }
  .nav-link {
    font-size: 1.5em !important
  }
  .container-fluid {
    width: 100%;
    height: 100%;
  }

  footer {
    width: 100%;
  }
}

@media (max-width: 992px) {
  #main {
    padding-top: 2rem;
  }
    .page-title {
    font-size: 2rem;
    margin: 0 auto;
  }
  .sub-title {
    font-size: 1rem;
  }
  .page-sentence {
    font-size: 1rem;
  }
  .main-nav {
    font-size: 1rem;
    margin-top: 10px;
  }
}

試したこと

ためしに同じコードで別名のファイルを作り、
ブラウザで表示させると正しいサイズで表示されましたが(写真右側)、
この正しく表示された方のファイル名を「index.html」と書き換えると
また表示が崩れてしまいました(写真左側)。

ファイル名に依存する要因などは何か考えられますでしょうか?

よろしくお願い致します。

イメージ説明

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • tomohikohanano

    2020/04/18 14:49

    asahina1979さん BEKKOさん

    ありがとうございます。
    スーパーリロードをしてみても、変化はありませんでした。

    キャンセル

  • kai0310

    2020/04/18 16:29

    一つの質問に複数の問題を記述することは良くないでしょう。

    キャンセル

  • tomohikohanano

    2020/04/18 16:37

    k011510さん

    大変失礼致しました。非常識でした。

    ご指摘いただいてありがとうございます。

    キャンセル

回答 3

+1

こんにちは。
まずは、一つずつ解決していきましょう。

トップページ(index.html)だけやたらとNavbarが大きく表示されます。
ファイル名に依存する要因などは何か考えられますでしょうか?

ファイル名に依存することはないです。index.htmlとhello.htmlでデザインが変わってしまってはダメですからね。

では、なぜ現状として見た目が変わってしまっているのでしょうか。

同じコードではなかったのではないかと思いますので、もう一度複製してみてください。
また、ダメな場合は両方のソースコードの提示をお願いします。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/04/18 17:05

    asahina1979さん

    開閉状態違いましたね。
    ツメが甘かったです。反省します。

    キャンセル

  • 2020/04/18 17:06

    了解しました。では、回答本文にもある様にコードの提示を行えますでしょか?

    キャンセル

  • 2020/04/18 18:02

    申し訳ありません。

    バカな質問かもしれませんが「コードの提示」とはどういうことでしょうか?

    該当ページのコードは上に載せているのがすべてなのですが…

    キャンセル

+1

両方のページでキーボードのCtrl+0を押してみてください。(マックなら+0

【Google Chrome でページ画面を拡大縮小(ズーム)する - パソコントラブルQ&A】
https://www.724685.com/weekly/qa191023.htm

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/04/18 23:16

    OneDriveの外でrenameしてね結構コンフリクトで戻されるときがあるから

    キャンセル

  • 2020/04/19 00:40

    その可能性があるんですね
    検証方法を検索してみます

    ちなみにですが、Bootstrapが上手く作動しない件に関しては海外サイトに似たような質問があり、どうにか解決できました

    キャンセル

  • 2020/04/19 00:49

    kei344さん

    たしかに「左右のコードはまったく同じです」が成り立たないですね
    最初に質問させていただいたあとにまた色々といじって検証していたので、原型をとどめていませんが、今あらためて冷静に「main.html」という名前で上手く表示されているものを「index.html」に名前を変えたら表示が崩れました。

    キャンセル

check解決した方法

0

Bootstrapのnavbar-toggleがその下の画像に被ってしまう減少に関しては「navbar-toggler overlay」で検索したところ、似たような質問を発見し、それを参考に解決できました。

要は「逃し場所」を用意していなかったので、以下のようなコードを書いたところ、解決できました。

<figure class="fixed-wrap">
    <div id="fixed">
    </div>
</figure>
  /*--- Fixed Background Image --*/
  figure {
    position: relative;
    width: 100%;
    height: 60%;
    margin: 0!important;
  }
  .fixed-wrap {
    clip: rect(0, auto, auto, 0);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #fixed {

    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    will-change: transform;
  }

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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