Q&A
質問タグの「Flex」はCSSのFlexboxとは無関係なのではずすことをお勧めします。
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>
回答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
総合スコア14731
ご回答ありがとうございます！
navbar-collapseではnavbar-expand-mdで指定した大きさ以下になったら、displayがnoneになっていたんですね！！とても勉強になります…！
そしてハンバーガーアイコンをクリックするとdisplayがblockになるんですね！
それに対して、d-inline-flexを指定しているからインライン要素となり、text-centerでセンタリング
ができるのですね。
追加でお伺いしたいのですが、
３２行目<ul class="navbar-nav d-inline-flex">
でd-inline-flexを指定しているので、navbar-navにもともと付与されているdisplay:flexが画面幅が768px以上でもclassが上書きされて、display:inline-flexになってしまいそうなのですが、こちらはなぜdisplay:flexのままなのでしょうか…？
> d-inline-flexを指定しているので
d-inline-flexはそれを適用している要素自体には影響を及ぼさないため、上書きされたように振舞うことはありません。
早速ご回答いただきありがとうございます！！
navbar-navにd-inline-flexを指定しても
navbar-navのdisplay:flexがすでに適用されているので上書きはされず、
.navbar-collapseではdisplayがnoneになったため、d-inline-flexが適用できるようになったという
ことでしょうか…！
`.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` は関係がありません。
理解しました！ご丁寧に教えて頂き誠にありがとうございました！
あなたの回答
tips
プレビュー
