僕の世界観を変えてみるスマートフォン用の表示で見る僕の世界観を変えてみる文系男子が趣味でプログラミングを勉強していくブログです。他にも日常で起きたどうでもいいことや愚痴を書いていきたいです。座右の銘は和を以て貴しとなすです。ブログシェアするTwitterGooglePocketLine僕は日頃SmartNewsをよくみるんですが、このアプリにははてなブログが読めるはてなカテゴリがあります。みて惹かれるタイトルのものがあると読むんですがやはりSmartNewsに載るような記事は読みやすいしデザインも整ってたりしますね。影響を受けて僕も見やすい、使いやすいデザインにしたいと思い今回はメニューバーを追加してみました。今回はデザインも洗礼されていたのでまるまるコピペで導入させていただきました。Life1、homeに戻るhomeボタン2、人気記事上位5つを表示する人気記事ボタン3、カテゴリ表示するカテゴリボタン4、topへ戻るtopボタンこの4つを搭載できます。プラスはてブ順で表示できるボタンの計5つのバージョンもあるようです。この方のブログにあるコードをコピペして、あとは自分のブログのurlやカテゴリ名を入れるだけで簡単に実装できちゃいます。レスポンシブデザイン用メニューを入れてみた。2016年12月23日こんな感じになります。このままだとスマホやタブレットの他にパソコンでもこのメニューバーが表示されてしまいます。以前トップに戻るボタンを実装したのでこれも表示されるとほらこんな感じにかぶってしまうんですね。僕の世界観を変えてみるせっかく実装したので両方とも活かせるように次のようにカスタマイズしていきます。・パソコンで閲覧する際はトップへ戻るボタンを表示する・スマホ、タブレットで閲覧時はフッターメニューを表示するdisplay:none;でHTMLを非表示にするまずはメニューバーとトップに戻るボタンのHTMLにid="none"と"nonpc"をつけ足します。display:none;をつけ足します。}こうするとメニューバーもトップに戻るボタンも非表示にすることができます。フット岩尾ものんちゃんって呼ばれてますよね。noneって聞くたびに頭に浮かびます。MediaQueriesで表示画面をわけるそして最後にメディアクエリを追加します。/*--nonepc(トップに戻るボタン)を非表示にする--*/はい、これで完成です。768pxなのかなんなのかわからないので769pxという適当な数字になっています。調べてみたらたぶんタブレットの横幅は768pxですね。ちなみにdisplay:none;を使わずにメディアクエリだけだとこんなふうにHTMLだけ表示されちゃいます。CSSに書くしかないのでHTMLはどうやって消すんだろうと調べてdisplay:noneの存在を知りました。厳密にいうと持ってる本に書いてありましたが使い方がよくわかっていなかっただけですね、やれやれ。それといまいちメディアクエリがわからなかったんですが、minは最小表示が○○px、maxは最大表示が○○pxって考えればいいわけですね。今回作業するにあたってメディアクエリのことを調べましたが、間違った説明をされているサイトがあり混乱しました。そのサイトとまったく同じ間違いの説明をしているサイトもあってコピペしてんのかなっていう。{画面サイズが1024px以上の場合適用するって書かれてまして、え?どっちもminなのに以下と以上の2種類意味があるの?どっちなの?って。マジ困惑~、ガチ困惑~情報過多の時代ですからね、取捨選択をして正しい情報のみを取り入れましょう。21:00MediaQueriesとdisplay:noneを使ってレスポンシブ用にメニューを変えてみたよ関連記事2017-10-16エレコムのトラックボールマウスを買ったのでレビューしようと思うAmazonのプライムデイセールで購入した人間工学マウスがどうし...2017-07-24GearbestでスマートウォッチK88Hを購入したのでレビューしようと思うスマートウォッチって別にいらないんだけどなんか欲しかったん...2016-11-02上に戻るボタンをアイコンを使って表現してみたいろいろサイトを見てみると上に戻るボタンがついているのを発...2016-03-09CSSでメニューボタンをよりボタンらしくしてみた久しぶりにブログを変化させてみた。ヶ月)工場→カフェバイト→質屋の店長→現在SEもどき。2019年10月にバセドウ病と診断される。僕の世界観を変えてみるスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。