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

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

前置き

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

問題点

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

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

 閲覧数:754 投稿日: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フォントの位置がズレる(ことがある)

 閲覧数:724 投稿日: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/9/05 16:29 更新
週間人気ページランキング / 8-29 → 9-4
順位 ページタイトル抜粋 アクセス数
1 Design 0 6
2 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 3
3 「属性」「プロパティ」「アトリビュート」の違い | CSS 2
3 Sword Art Online dress up game 2
3 「Google Chrome を起動後、100%の確率で3分以内に落ちる」場合は、アンインストール後インストールし直すしかない | Google Chrome(ブラウザ) 2
3 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 2
3 Chromeがおかしくなった。width認識が狭くなりレイアウトが崩れる | Google Chrome(ブラウザ) 2
3 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
4 CopyTabTitleUrl | Chrome 拡張機能 1
4 ソフトウェア カテゴリー 1
4 Chromeブラウザは、ユーザーという単位で情報管理している(Cookieを使用する場面もあるが、必ずしもCookieだけに頼っているわけではない) | Google Chrome(ブラウザ) 1
4 CSSセレクタ(CSS) カテゴリー 1
4 画像縦横比の問題 | 画像 1
4 Illustratorで、アートボードの大きさではなく選択範囲の大きさで出力 / 「トリムエリアツール」→「トリムエリアを選択したアートに合わせる」 | Illustrator CS3(Illustrator) 1
4 「Google Chrome」で「This browser does not support WebGL」と表示される場合は、ハードウェアアクセラレーションに不具合がある可能性があるため、設定画面よりハードウェアアクセラレーションを一旦無効にしてみる | Google Chrome(ブラウザ) 1
4 Bookmarks clean up | Chrome 拡張機能 1
4 Chrome 起動オプションを利用して、キャッシュを無効にする 1
4 「Bootstrap」の「js」がいつの間にか期待通り動作しなくなった際の対応案 | Bootstrap 1
4 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 | Backgrounds and Borders Module(CSS) 1
4 「Google Chrome」履歴一覧から、複数履歴を選択して一度に開くことはできません。バージョン: 94.0.4606.81(Official Build) (64 ビット) | Google Chrome(ブラウザ) 1
2026/9/5 5:05 更新