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

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

前置き

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

問題点

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

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

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

 閲覧数:533 投稿日: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
2025/5/07 7:55 更新
週間人気ページランキング / 4-30 → 5-6
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 8
2 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 6
3 ChromeブックマークURL重複検出が出来ない / 仕様変更に伴いURL重複登録できなくなった | Chromeブックマーク(ブラウザ) 5
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 4
4 16進数カラーコード / 2進数 4
5 画像ライセンスは大きく3種類に分かれる。「All rights reserved」+「クリエイティブ・コモンズ・ライセンス」+「その他」 | 画像著作権(画像) 3
5 鉄道会社毎のカラーコード | カラーコード(色) 3
5 「Google Chrome」ブックマークをフォルダー単位で、「ドメイン毎」「追加日昇降順」に並べ替える拡張機能「Sortmark」 | Chrome 拡張機能 3
5 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 3
6 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 2
6 「Bootstrapデザイン」✕「円グラフ」解析 | 2系(Bootstrap) 2
6 RGBの種類 / ビットカラー | RGB(色) 2
6 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 2
7 CSS Flexible Box Layout Module Level 1 | Flexible Box Layout Module(CSS) 1
7 直前の要素、直後の要素 | CSS 1
7 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 1
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 1
7 JavaScript in Bootstrap | 2系(Bootstrap) 1
7 「東京都」のカラーコード取得は難しい | カラーコード(色) 1
7 HSL → RGB 計算方式の違い | 色変換(色) 1
2025/5/7 1:01 更新