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

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

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

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

レスポンシブWebデザイン

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

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

5100閲覧

cssフレームワークBulmaのモバイル対応について

ao_love

総合スコア441

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

レスポンシブWebデザイン

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

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2017/03/03 07:57

お世話になっております。
CSSフレームワークのBlumaを利用して、レスポンシブ対応のサイトを作成しています。
navの部分ですが、PCでブラウザ幅を変更した場合には反応するのですが、chromeでiPhoneやiPad等の見え方を確認すると反応しておらず、見にくいですしタップもしにくいです。(iPhoneの実機でも同じ状況でした)

bulmaの公式サイトでは同様にchromeで確認すると対応しているので、方法はあるはずなのですが、見つけることができませんでした。
単純な見落とし等なのかもしれませんが、お力添えいただけますでしょうか?

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

html

1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>管理画面</title> 6 <link rel="stylesheet" href="css/bulma.css" type="text/css" /> 7</head> 8<body> 9 10<nav class="nav has-shadow"> 11 <div class="nav-left"> 12 <a class="nav-item"> 13 <img src="img/logo.png" alt="logo"> 14 </a> 15 <a class="nav-item is-tab is-hidden-mobile" href="item.php">商品登録・修正</a> 16 <a class="nav-item is-tab is-hidden-mobile is-active" href="category.php">カテゴリ追加・修正</a> 17 <a class="nav-item is-tab is-hidden-mobile" href="brand.php">ブランド追加・修正</a> 18 <a class="nav-item is-tab is-hidden-mobile" href="detail.php">詳細項目追加・修正</a> 19 </div> 20 <span class="nav-toggle"> 21 <span></span> 22 <span></span> 23 <span></span> 24 </span> 25 <div class="nav-right nav-menu"> 26 <a class="nav-item is-tab is-hidden-tablet" href="item.php">商品登録・修正</a> 27 <a class="nav-item is-tab is-hidden-tablet is-active" href="category.php">カテゴリ追加・修正</a> 28 <a class="nav-item is-tab is-hidden-tablet" href="brand.php">ブランド追加・修正</a> 29 <a class="nav-item is-tab is-hidden-tablet" href="detail.php">詳細項目追加・修正</a> 30 <a class="nav-item is-tab">ログアウト</a> 31 </div> 32</nav> 33 34<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script> 35<script> 36jQuery(document).ready(function ($) { 37 38 var $toggle = $('.nav-toggle'); 39 var $menu = $('.nav-menu'); 40 41 $toggle.click(function() { 42 $(this).toggleClass('is-active'); 43 $menu.toggleClass('is-active'); 44 }); 45 46}); 47</script> 48</body> 49</html>

css

1/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */ 2html, 3body, 4p, 5ol, 6ul, 7li, 8dl, 9dt, 10dd, 11blockquote, 12figure, 13fieldset, 14legend, 15textarea, 16pre, 17iframe, 18hr, 19h1, 20h2, 21h3, 22h4, 23h5, 24h6 { 25 margin: 0; 26 padding: 0; 27} 28 29h1, 30h2, 31h3, 32h4, 33h5, 34h6 { 35 font-size: 100%; 36 font-weight: normal; 37} 38 39ul { 40 list-style: none; 41} 42 43button, 44input, 45select, 46textarea { 47 margin: 0; 48} 49 50html { 51 box-sizing: border-box; 52} 53 54* { 55 box-sizing: inherit; 56} 57 58*:before, *:after { 59 box-sizing: inherit; 60} 61 62/* 中略 */ 63 64.nav-toggle { 65 cursor: pointer; 66 display: block; 67 height: 3.5rem; 68 position: relative; 69 width: 3.5rem; 70} 71 72.nav-toggle span { 73 background-color: #4a4a4a; 74 display: block; 75 height: 1px; 76 left: 50%; 77 margin-left: -7px; 78 position: absolute; 79 top: 50%; 80 -webkit-transition: none 86ms ease-out; 81 transition: none 86ms ease-out; 82 -webkit-transition-property: background, left, opacity, -webkit-transform; 83 transition-property: background, left, opacity, -webkit-transform; 84 transition-property: background, left, opacity, transform; 85 transition-property: background, left, opacity, transform, -webkit-transform; 86 width: 15px; 87} 88 89.nav-toggle span:nth-child(1) { 90 margin-top: -6px; 91} 92 93.nav-toggle span:nth-child(2) { 94 margin-top: -1px; 95} 96 97.nav-toggle span:nth-child(3) { 98 margin-top: 4px; 99} 100 101.nav-toggle:hover { 102 background-color: whitesmoke; 103} 104 105.nav-toggle.is-active span { 106 background-color: #00d1b2; 107} 108 109.nav-toggle.is-active span:nth-child(1) { 110 margin-left: -5px; 111 -webkit-transform: rotate(45deg); 112 transform: rotate(45deg); 113 -webkit-transform-origin: left top; 114 transform-origin: left top; 115} 116 117.nav-toggle.is-active span:nth-child(2) { 118 opacity: 0; 119} 120 121.nav-toggle.is-active span:nth-child(3) { 122 margin-left: -5px; 123 -webkit-transform: rotate(-45deg); 124 transform: rotate(-45deg); 125 -webkit-transform-origin: left bottom; 126 transform-origin: left bottom; 127} 128 129@media screen and (min-width: 769px) { 130 .nav-toggle { 131 display: none; 132 } 133} 134 135.nav-item { 136 -webkit-box-align: center; 137 -ms-flex-align: center; 138 align-items: center; 139 display: -webkit-box; 140 display: -ms-flexbox; 141 display: flex; 142 -webkit-box-flex: 0; 143 -ms-flex-positive: 0; 144 flex-grow: 0; 145 -ms-flex-negative: 0; 146 flex-shrink: 0; 147 font-size: 1rem; 148 -webkit-box-pack: center; 149 -ms-flex-pack: center; 150 justify-content: center; 151 padding: 0.5rem 0.75rem; 152} 153 154.nav-item a { 155 -webkit-box-flex: 1; 156 -ms-flex-positive: 1; 157 flex-grow: 1; 158 -ms-flex-negative: 0; 159 flex-shrink: 0; 160} 161 162.nav-item img { 163 max-height: 1.75rem; 164} 165 166.nav-item .button + .button { 167 margin-left: 0.75rem; 168} 169 170.nav-item .tag:first-child:not(:last-child) { 171 margin-right: 0.5rem; 172} 173 174.nav-item .tag:last-child:not(:first-child) { 175 margin-left: 0.5rem; 176} 177 178@media screen and (max-width: 768px) { 179 .nav-item { 180 -webkit-box-pack: start; 181 -ms-flex-pack: start; 182 justify-content: flex-start; 183 } 184} 185 186.nav-item a, 187a.nav-item { 188 color: #7a7a7a; 189} 190 191.nav-item a:hover, 192a.nav-item:hover { 193 color: #363636; 194} 195 196.nav-item a.is-active, 197a.nav-item.is-active { 198 color: #363636; 199} 200 201.nav-item a.is-tab, 202a.nav-item.is-tab { 203 border-bottom: 1px solid transparent; 204 border-top: 1px solid transparent; 205 padding-bottom: calc(0.5rem - 1px); 206 padding-left: 1rem; 207 padding-right: 1rem; 208 padding-top: calc(0.5rem - 1px); 209} 210 211.nav-item a.is-tab:hover, 212a.nav-item.is-tab:hover { 213 border-bottom-color: #00d1b2; 214 border-top-color: transparent; 215} 216 217.nav-item a.is-tab.is-active, 218a.nav-item.is-tab.is-active { 219 border-bottom: 3px solid #00d1b2; 220 color: #00d1b2; 221 padding-bottom: calc(0.5rem - 3px); 222} 223 224@media screen and (min-width: 1000px) { 225 .nav-item a.is-brand, 226 a.nav-item.is-brand { 227 padding-left: 0; 228 } 229} 230 231@media screen and (max-width: 768px) { 232 .nav-menu { 233 background-color: white; 234 box-shadow: 0 4px 7px rgba(10, 10, 10, 0.1); 235 left: 0; 236 display: none; 237 right: 0; 238 top: 100%; 239 position: absolute; 240 } 241 .nav-menu .nav-item { 242 border-top: 1px solid rgba(219, 219, 219, 0.5); 243 padding: 0.75rem; 244 } 245 .nav-menu.is-active { 246 display: block; 247 } 248} 249 250@media screen and (min-width: 769px) and (max-width: 999px) { 251 .nav-menu { 252 padding-right: 1.5rem; 253 } 254} 255 256.nav-left, 257.nav-right { 258 -webkit-box-align: stretch; 259 -ms-flex-align: stretch; 260 align-items: stretch; 261 -ms-flex-preferred-size: 0; 262 flex-basis: 0; 263 -webkit-box-flex: 1; 264 -ms-flex-positive: 1; 265 flex-grow: 1; 266 -ms-flex-negative: 0; 267 flex-shrink: 0; 268} 269 270.nav-left { 271 display: -webkit-box; 272 display: -ms-flexbox; 273 display: flex; 274 -webkit-box-pack: start; 275 -ms-flex-pack: start; 276 justify-content: flex-start; 277 /*overflow: hidden;*/ 278 /*overflow-x: auto;*/ 279 white-space: nowrap; 280} 281 282.nav-center { 283 -webkit-box-align: stretch; 284 -ms-flex-align: stretch; 285 align-items: stretch; 286 display: -webkit-box; 287 display: -ms-flexbox; 288 display: flex; 289 -webkit-box-flex: 0; 290 -ms-flex-positive: 0; 291 flex-grow: 0; 292 -ms-flex-negative: 0; 293 flex-shrink: 0; 294 -webkit-box-pack: center; 295 -ms-flex-pack: center; 296 justify-content: center; 297 margin-left: auto; 298 margin-right: auto; 299} 300 301.nav-right { 302 -webkit-box-pack: end; 303 -ms-flex-pack: end; 304 justify-content: flex-end; 305} 306 307@media screen and (min-width: 769px) { 308 .nav-right { 309 display: -webkit-box; 310 display: -ms-flexbox; 311 display: flex; 312 } 313} 314 315.nav { 316 -webkit-box-align: stretch; 317 -ms-flex-align: stretch; 318 align-items: stretch; 319 background-color: white; 320 display: -webkit-box; 321 display: -ms-flexbox; 322 display: flex; 323 min-height: 3.5rem; 324 position: relative; 325 text-align: center; 326 z-index: 2; 327} 328 329.nav > .container { 330 -webkit-box-align: stretch; 331 -ms-flex-align: stretch; 332 align-items: stretch; 333 display: -webkit-box; 334 display: -ms-flexbox; 335 display: flex; 336 min-height: 3.5rem; 337 width: 100%; 338} 339 340.nav.has-shadow { 341 box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1); 342} 343 344/* 後略 */

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

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

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

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

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

guest

回答1

0

自己解決

以下のコードを追加し忘れていたのが原因でした…

html

1<meta name="viewport" content="width=device-width, initial-scale=1">

投稿2017/03/03 08:04

ao_love

総合スコア441

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問