前置き
状態:調査中
閲覧数:2,906
投稿日:2016-01-01
更新日:2016-01-01
ドロワーメニューを右上配置
・右上配置しているサイトが多い理由は不明
問題点
・メニュー左上表示なら問題ないが、メニュー右上配置は要注意
※ちょっとしたことですぐに表示されなくなってしまうため
・右上配置しているサイトが多い理由は不明
問題点
・メニュー左上表示なら問題ないが、メニュー右上配置は要注意
※ちょっとしたことですぐに表示されなくなってしまうため
サイト横幅が意図せず大きくなってしまうと、ドロワーメニューが表示されなくなる
サイト横幅が意図せず大きくなってしまう理由
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%;
}