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

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

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

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Bootstrap

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

Q&A

解決済

1回答

1217閲覧

Bootstrapのnavigationについて

momokae0416

総合スコア9

HTML5

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Bootstrap

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

0グッド

0クリップ

投稿2020/03/10 04:05

編集2020/03/10 04:17

BootstrapでレスポンシブHPのトップページを課題で作成しております。

閲覧画面がスマホサイズになったらハンバーガーアイコンを出して、アイコンをクリックするとnavのメニューが表示されるようにし、
PC幅以上になると、横並びで縦線区切りのnavメニューがでてくるようにしています。

以下のソースで(31行目)

<div class="text-center navbar-collapse collapse justify-content-center" id="nav-menu-4">

で、スマホサイズのハンバーガーメニューをクリックしたときにメニューが中央に表示されるようにtext-center、
PCサイズ以上だとメニューが中央に来るようにjustify-content-centerを指定しています。
同じflex-boxなのに、なんでこのようにセンタリングをするためにスマホ用とPC用2種類のセンタリングコードを
使わなければいけないのでしょうか。flex-boxはjustify-content-centerでセンタリングできると認識しています。

理由はよく分からず、2つ指定したらうまくいったという感じです。
なんでこのように指定しなきゃいけないのかを知りたいです・・・!

どうぞよろしくお願いします。

作成したページのURLはこちらです。
http://codecamp28958.lesson10.codecamp.jp//bootstrap/responsive_cookcamp2.html

HTMLのソースは以下の通りです。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>bootstrap課題</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <link rel="stylesheet" href="responsive_cookcamp.css"> <!-- Font Awesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> </head> <body> <header> <!-- ナビゲーション --> <nav class="navbar navbar-expand-md navbar-light bg-white fixed-top"> <div class="container-fluid"><!--navはサイト横幅可変にする--> <div class="row w-100 no-gutters"> <div class="text-center col-12"> <a href="#"><img class="logo" src="images/logo.png"></a> </div> <div class="col-12 text-right top-toggler-icon"> <button class="navbar-toggler border-white" data-toggle="collapse" data-target="#nav-menu-4"> <span class="navbar-toggler-icon"></span> </button> </div><!--//top-toggler-icon--> <div class="text-center navbar-collapse collapse justify-content-center" id="nav-menu-4"> <ul class="navbar-nav d-inline-flex"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown">新着レシピ</a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">季節野菜の彩り前菜</a> <a href="#" class="dropdown-item">簡単かぼちゃスープ</a> <a href="#" class="dropdown-item">ヘルシー米粉パン</a> <a href="#" class="dropdown-item">ぷりぷりエビ料理</a> </div> </li> <li class="nav-item"><a href="#" class="nav-link">料理から検索</a></li> <li class="nav-item"><a href="#" class="nav-link">食材から検索</a></li> <li class="nav-item"><a href="#" class="nav-link">旬の料理特集</a></li> <li class="nav-item"><a href="#" class="nav-link">ランキング</a></li> </ul> </div> </div><!--w-100--> </div><!--container-fluid --> </nav> <!-- コンテンツ --> <!-- カルーセル --> <div id="cl1" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#cl1" data-slide-to="0" class="active"></li> <li data-target="#cl1" data-slide-to="1" class=""></li> <li data-target="#cl1" data-slide-to="2" class=""></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images/key_visual.jpg" class="d-block w-100"> </div> <div class="carousel-item"> <img src="images/key_visual2.jpg" class="d-block w-100"> </div> <div class="carousel-item"> <img src="images/key_visual3.jpg" class="d-block w-100"> </div> </div> <a class="carousel-control-prev" href="#cl1" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#cl1" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </header> <!--検索フォーム--> <section class="container"> <div class="contents"> <form class="form-inline"> <div class="form-group w-100"> <div class="btn-group row w-100 ml-0"> <label for="search" class="sr-only">検索</label> <input class="d-inline form-control text-small col-8 col-md-4" type="text" id="search" placeholder="料理名・食材名で検索"> <button type="submit" class="btn btn-light text-small col-4 col-md-2 text-nowrap border">レシピ検索</button> </div> </div> </form> </div> </section><!--container--> <!--メインコンテンツ--> <!-- 以下にBootstrap用のJavaScriptを記述します --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script> </body> </html>

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

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

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

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

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

kei344

2020/03/10 04:10

質問タグの「Flex」はCSSのFlexboxとは無関係なのではずすことをお勧めします。
momokae0416

2020/03/10 04:18

ありがとうございます。知らずに大変失礼いたしました…!
guest

回答1

0

ベストアンサー

同じflex-boxなのに、なんでこのようにセンタリングをするためにスマホ用とPC用2種類のセンタリングコードを使わなければいけないのでしょうか。

.navbar-collapse クラスは、画面幅が 768px より小さいときに display プロパティが none になり、 flexbox が解除されます。また、ハンバーガーメニューをクリックした際に display プロパティに設定される値は block です。

このため、 .justify-content-center クラスが画面幅の小さい状態では動作していません。そこで .text-center クラスを付与することで、 .navbar-collapse クラスの子要素にあるインライン flex コンテナを中央寄せにすることが出来ます。

現状のままでも構わないと思いますが、後々 HTML を読んだときに混乱しないためにも、それらの整列用クラスを適用する要素を別途設ける、などの対処をしておいても良いと思います。

投稿2020/03/10 12:45

s8_chu

総合スコア14731

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

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

momokae0416

2020/03/10 13:21

ご回答ありがとうございます! navbar-collapseではnavbar-expand-mdで指定した大きさ以下になったら、displayがnoneになっていたんですね!!とても勉強になります…! そしてハンバーガーアイコンをクリックするとdisplayがblockになるんですね! それに対して、d-inline-flexを指定しているからインライン要素となり、text-centerでセンタリング ができるのですね。 追加でお伺いしたいのですが、 32行目<ul class="navbar-nav d-inline-flex"> でd-inline-flexを指定しているので、navbar-navにもともと付与されているdisplay:flexが画面幅が768px以上でもclassが上書きされて、display:inline-flexになってしまいそうなのですが、こちらはなぜdisplay:flexのままなのでしょうか…?
s8_chu

2020/03/10 13:28

> d-inline-flexを指定しているので d-inline-flexはそれを適用している要素自体には影響を及ぼさないため、上書きされたように振舞うことはありません。
momokae0416

2020/03/10 13:52

早速ご回答いただきありがとうございます!! navbar-navにd-inline-flexを指定しても navbar-navのdisplay:flexがすでに適用されているので上書きはされず、 .navbar-collapseではdisplayがnoneになったため、d-inline-flexが適用できるようになったという ことでしょうか…!
s8_chu

2020/03/10 13:55

`.navbar-collapse` と `.navbar-nav` の flexbox の設定は分けて考える必要があります。 > navbar-navにd-inline-flexを指定してもnavbar-navのdisplay:flexがすでに適用されているので上書きはされず、 いいえ、上書きされます。 > .navbar-collapseではdisplayがnoneになったため、d-inline-flexが適用できるようになったという `.navbar-collapse` での `display` と `.navbar-nav` での `d-inline-flex` は関係がありません。
momokae0416

2020/03/10 14:09

理解しました!ご丁寧に教えて頂き誠にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問