ドロワーメニューが表示されない理由

デザインモバイルデザイン

前置き

 状態:調査中  閲覧数:3,573  投稿日:2016-01-01  更新日:2016-01-01
ドロワーメニューを右上配置
・右上配置しているサイトが多い理由は不明

問題点

・メニュー左上表示なら問題ないが、メニュー右上配置は要注意
※ちょっとしたことですぐに表示されなくなってしまうため

サイト横幅が意図せず大きくなってしまうと、ドロワーメニューが表示されなくなる

 閲覧数:751 投稿日:2016-01-01 更新日:2016-01-03

サイト横幅が意図せず大きくなってしまう理由


A.アフィリエイト広告
B.改行しない
C.特定要素のwidthを固定指定
D.画像幅が大きい


A.アフィリエイト広告


468×60サイズ広告を使用すると、スマホレイアウトが崩れる
・スマホ専用サイズ「320x48」が用意されているので、切り替えて使用


B.改行しない


a.SyntaxHighlighter
SyntaxHighlighterでソースがはみ出しちゃったときの対処法など

b.半角スペースや”/”が含まれない場合英文は改行されない
・折り返し有効化すれば良い

word-break: break-all;

/*長い行の折り返し有効化*/
div.status,h1{
word-break: break-all;
}



C.特定要素のwidthを固定指定


▼views/common/css/style-project-old.css
/*プルダウンフィルタリング*/
/*横*/
.chzn-select{
width:600px!important;
}


経緯
MySQLデータを、プルダウングループ化表示したい

対応
・コメントアウト


D.画像幅が大きい


対応
・max-width指定

指定例
/* スマホドロワーメニュー非表示さけるため、画像横幅最大指定*/
div.status img {
max-width: 100%;
}


「word-break: break-all;」指定すると、アイコン型Webフォントの位置がズレる(ことがある)

 閲覧数:718 投稿日:2016-01-01 更新日:2016-01-01

問題発生


「word-break: break-all;」指定すると、アイコン型Webフォントの位置がズレる

原因
・不明

対応
・しょうがないので、該当部分だけを再度設定
/*wrapperに「word-break: break-all;」指定しているため、アイコン型Webフォントの位置がズレる。その対策*/
.lsf-icon{
word-break: normal;
}



モバイルデザイン7 / スマホ pc 広告 切り替え bootstrap

モバイルデザイン8 / スマホはbodyタグに余白なしがデフォ? 



類似度ページランキング
順位 ページタイトル抜粋
1 ドロワーメニューが表示されない理由 94
2 Firefoxで画像が表示されない 41
3 rssページが正しく表示されない/Google Chrome 34
4 パッケージ化されてない拡張機能 31
5 URLが折り返し表示されない/Google Chrome 31
6 意図していないGETパラメータが、勝手に付与されることがある 30
7 HTML5でiframeスクロールバーを表示しない方法が不明 30
8 ストリートビューが使いにくくなった 29
9 お使いのコンピュータ ネットワークから通常と異なるトラフィックが検出されました 29
10 メニュー他サイト調査 29
11 表示されている画像が、キャッシュから取得されているか、確認する方法 28
12 モバイル対応メニュー候補 28
13 ページ読み込みが完了しない 27
14 FireFox5.0のバー表示が崩れ、元に戻せなくなったら… 26
15 Photoshop CS3 「全てのメニュー項目を表示する」 26
16 背景画像がどうしても表示されない → 「clear:both;」を挿入してみる 25
17 Chrome プロファイルが壊れている、と毎回表示されるが、英語なのでどうしたら良いか分からない 25
18 トリミングする際、範囲を決定する入力ボックスが表示されなかったら 24
19 Chromeデバッグする際CSSが()で表示される 24
20 Canvas図形が指定サイズで表示されない時は、CSSではなくCanvasタグで指定 24
2026/8/22 15:42 更新
週間人気ページランキング / 8-15 → 8-21
順位 ページタイトル抜粋 アクセス数
1 Design 0 5
2 Adobe Camera Raw 4.0 | Photoshop 3
2 PNG画像透明化問題 | 画像 3
2 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 3
2 Chromeで(TikTokなど)特定Webサイトの音を消すには、該当タブを右クリック後、「サイトをミュート」をクリックします。 | Google Chrome(ブラウザ) 3
2 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく | CSSトラブル対応(CSS) 3
2 RGB → HSL / RGB → HSV | 色変換(色) 3
3 8ビットカラー / インデックスカラー / パレットカラー 2
3 「Google Chrome」で「This browser does not support WebGL」と表示される場合は、ハードウェアアクセラレーションに不具合がある可能性があるため、設定画面よりハードウェアアクセラレーションを一旦無効にしてみる | Google Chrome(ブラウザ) 2
3 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 2
3 鉄道会社毎のカラーコード | カラーコード(色) 2
3 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 2
3 絶対パス | HTML 2
3 Chromeブラウザは、ユーザーという単位で情報管理している(Cookieを使用する場面もあるが、必ずしもCookieだけに頼っているわけではない) | Google Chrome(ブラウザ) 2
3 コンソールエラー / ブラウザ間差異 | ブラウザ 2
3 「Twitter Bootstrap」導入したらおかしくなった時、試した方がよいかもしれないこと | 2系(Bootstrap) 2
3 HSLとHSVの違い | 色変換(色) 2
3 RGB ⇔ XYZ / CIE RGB / sRGB(D65) / sRGB(C) / Adobe RGB / NTSC RGB 2
3 「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される | CSSトラブル対応(CSS) 2
3 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 2
2026/8/22 5:05 更新