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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

Bootstrap

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

Q&A

解決済

1回答

1048閲覧

Bootstrapのドロップダウンメニューの 表示をスマホではPCと別の表示にしたい

iura

総合スコア11

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

Bootstrap

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

0グッド

1クリップ

投稿2019/07/08 06:25

編集2019/07/08 06:34

前提・実現したいこと

デバイスによってナビゲーションを変更したい
・PC、ipad → 幅100% ドロップダウン した時に、タイル状の画像を配置
・スマホ → 文字のみのドロップダウン メニューにしたい

###使用言語
Bootstrap4、html5、css3

###質問
スマホの時だけ、文字のみに切り替えるにはどうしたらいいでしょうか。

該当のソースコード

<nav id="menu-wrap" class="navbar navbar-expand-lg navbar-light bg-white text-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- ロゴ --> <a class="navbar-brand" href="index.html" data-aos="zoom-in"><img src="images/logo.svg" width="96" height="61"></a> <!-- ナビゲーション --> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item m-2 dropdown"> <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">〇〇について</a> <div class="dropdown-menu p-5" aria-labelledby="navbarDropdown"> <h4 class="tit justify-content-center">〇〇について</h4> <div class="nav d-flex"> <ul class="mx-5"> <a href="#about" class="nav-link active"> <li class="nav-item">〇〇とは</li> <li class="nav-item mt-2"> <img src="images/gift_2.svg" width="160" height="160" data-holder-rendered="true"> </li> </a> </ul> <ul class="mx-5"> <a href="#about_us" class="nav-link active"> <li class="nav-item">〇〇の特徴</li> <li class="nav-item mt-2"> <img src="images/systra_2.svg" width="160" height="160" data-holder-rendered="true"> </li> </a> </ul> </div> </div> </li> <li class="nav-item m-2 dropdown"> <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> カリキュラム</a> <div class="dropdown-menu p-5" aria-labelledby="navbarDropdown"> <h4 class="tit justify-content-center">カリキュラム</h4> <div class="nav d-flex"> <ul class="mx-5"> <a href="#overview" class="nav-link active"> <li class="nav-item">概 要</li> <li class="nav-item mt-2"> <img src="images/overview_2.svg" width="160" height="160" data-holder-rendered="true"> </li> </a> </ul> <ul class="mx-5"> <a href="#goal" class="nav-link active"> <li class="nav-item">目 標</li> <li class="nav-item mt-2"> <img src="images/goal_2.svg" width="160" height="160" data-holder-rendered="true"> </li> </a> </ul> <ul class="mx-5"> <a href="#curriculum" class="nav-link active"> <li class="nav-item">科目内容</li> <li class="nav-item mt-2"> <img src="images/subjects_2.svg" width="160" height="160" data-holder-rendered="true"> </li> </a> </ul> </div> </div> </li> <li class="nav-item m-2 dropdown"> <a class="nav-link dropdown-toggle active" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">募集要項</a> <div class="dropdown-menu p-5" aria-labelledby="navbarDropdown"> <h4 class="tit justify-content-center">募集要項</h4> <div class="nav d-flex"> <ul class="mx-5"> <a href="#subject" class="nav-link active"> <li class="nav-item">対象者</li> <li class="nav-item mt-2"> <img src="images/target_2.svg" width="160" height="160" data-holder-rendered="true"> </li> </a> </ul> <ul class="mx-5"> <a href="#apply" class="nav-link active"> <li class="nav-item">申込方法</li> <li class="nav-item mt-2"> <img src="images/hellowa_2.svg" width="160" height="160" data-holder-rendered="true"> </li> </a> </ul> </div> </div> </li> <li class="nav-item m-2"> <a class="nav-link text-dark" href="#Qa">よくあるご質問</a> </li> <li class="nav-item m-2"> <a class="nav-link text-dark" href="contact.html">お問い合わせ</a></li> </ul> </div> </nav>

css

1@media screen and (min-width: 768px) { 2 /* ナビゲーション */ 3 .nav { 4 margin-bottom: 0; 5 } 6 .dropdown { 7 position: static; 8 } 9 .dropdown-menu { 10 width: 100%; 11 text-align: left; 12 } 13 .dropdown-menu>li { 14 display: inline-block; 15 } 16}

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

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

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

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

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

guest

回答1

0

ベストアンサー

ブロックに-lgとか-smとかを指定するとブレイクポイントが指定できるのでそこを駆使すればなんとかなりそうに思います。
※スマートフォンでも横画面のときどうするかとかは別途検討が必要と思いますが

投稿2019/07/08 07:03

m.ts10806

総合スコア80765

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

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

iura

2019/07/08 08:27

>mts10806さん 試してみます ありがとうございます。
m.ts10806

2019/07/08 08:33

できれば、なのですが「試して想定通り動いてから」解決としていただきたいです。 「やってみたけど結局できなかった」と別質問を立てるのもあまり意味がないかもしれませんし。 やってみた結果をこちらの質問で共有してもらってタイトルにある要件が完了するまで対応続けたほうが効率的には良さそうです。 ※もちろんちょっと見た感じいけそうという感覚が得られたのでしたらそれはそれで教えてほしいです。 https://teratail.com/help/question-tips#questionTips4-2
iura

2019/07/08 08:53

>mts10806さん おっしゃる通りでした。 上記のやり方では見た目が壊れたり、ドロップダウン がうまくいきませんでした。 結局スマホ画面時のみCSS(@Media Queries)で対応いたしました。 ご親切に指摘していただいてありがとうございます。 急いでいたので焦っていました。 今後は真摯に対応して頂いた方や、閲覧されている方を意識して中途半端な対応をしないよう気をつけます。
m.ts10806

2019/07/08 08:58 編集

たぶん、-smをつけた大きなブロックが必要なのかなとドキュメントを読みながら思いました。 つまり、「PC用」「スマートフォン用」で別々のHTMLを用意する感じになりますね。きちんと-lgや-smをつければ両方表示されるということはないはずなので。 ただ、他とのバランス調整が必要そうには思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問