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

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

前置き

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

問題点

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

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

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

 閲覧数:699 投稿日: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/4/29 19:50 更新
週間人気ページランキング / 4-22 → 4-28
順位 ページタイトル抜粋 アクセス数
1 Design 0 12
1 Adobe Camera Raw 4.0 | Photoshop 12
2 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 10
3 Illustratorでaiファイルを保存する際、下位バージョンでも開けるよう保存する | Illustrator CS3(Illustrator) 9
4 Photoshop無料アクションファイル(atn)導入見送り | Photoshop 8
4 Material Design 2014 年 | Material Design(色) 8
5 RGBの種類 / ビットカラー | RGB(色) 5
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 4
6 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
7 「Default User」を削除したら、既存ブックマークが削除されてしまった! 3
7 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 3
7 RGB → 色相H … 最大値基準 × 図形 の考え方 | 色変換(色) 3
7 RGB → 色相H … 最小値基準 × 図形 の考え方 | 色変換(色) 3
8 Create Link | Chrome 拡張機能 2
8 一つの要素に対して「id 属性値」を複数指定することは出来ない | HTML 2
8 rem使用の問題点 / remが最新で最強じゃないの? 2
8 これまで動作していたChrome拡張機能が期待通り動作しなくなったときは、最初に、Chrome を最新の状態へ更新してみます。 | Chrome 拡張機能 2
8 レイアウトがどうしても崩れるときは、div marginへマイナス値が設定されていないか、確かめる | CSS 2
8 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 2
8 画像内にある特定色を置換 / イメージ - 色調補正 - 色の置き換え | Photoshop 2
2026/4/29 5:05 更新