僕の世界観を変えてみるスマートフォン用の表示で見る僕の世界観を変えてみる文系男子が趣味でプログラミングを勉強していくブログです。他にも日常で起きたどうでもいいことや愚痴を書いていきたいです。座右の銘は和を以て貴しとなすです。2016少し前にスマホ用にトグルメニューになるコードをDreamark様のブログからコピペして適用していたんですが、MENUはセンタリングされているんですけど、子?が左寄せになっていました。close見るとわかるんですけどwidthが足りないようです。いうよりグローバルメニューはwidthくらいしかいじってないですし。いうことは、widthをmaxにしてあげればいいだけなのでは。僕がwidthを150pxにしたかというとPCブラウザでみるとメニューが2段になってしまうからです。こんな感じ1段にするにはwidthを調整してあげてやっとたどり着いたのが150pxなんです。これをmaxにするとグローバルメニューが2段になってしまう。これは僕の知識ではお手上げかと思ったんですがふとこの前の記事を思い出しました。Queriesとはデバイスに合わせて適用させるCSSを変えられる魔法の呪文です。こちらのサイトがすごくわかりやすいです。(〇〇〇)でPCブラウザで表示した場合はこのCSSを、スマホやタブレットで表示した場合はこのCSSを適用させるという意味です。Queriesで適用するCSSを変更するまず、グローバルメニューが1段になるようにwidthを150pxにします。}}768px~1980pxで表示された場合はwidthを150pxで表示。※スマホが480、タブレットが~768px、PCはわからないのでフルHDの数値にしました。次にスマホ用のトグルメニューがセンタリングされるようにwidthをmaxにします。}}最大768pxで表示された場合はwidthをmaxで表示するように指定できました。合ってるのかわからないところもありますがまたおかしなところを見つけたら直していこうかと思います。あ、もう一つ不具合があったんだ。スマホ用のトグルメニューですが、メニュー表示してからスワイプするとパッと消えてしまう。メニューかそれ以外のところをタップしたときに消えるのはいいんですが、一番したのメニューをタップしたいときに消えてしまうのは不便です。Queriesで解決した関連記事2016-12-27MediaQueriesとdisplay:noneを使ってレスポンシブ用にメニューを変えてみたよ僕は日頃SmartNewsをよくみるんですが、このアプリにははてなブ...2016-11-02上に戻るボタンをアイコンを使って表現してみたいろいろサイトを見てみると上に戻るボタンがついているのを発...2016-10-21テーマCONTENTSをカスタマイズしてみた。ヶ月)工場→カフェバイト→質屋の店長→現在SEもどき。2019年10月にバセドウ病と診断される。僕の世界観を変えてみるスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。