僕の世界観を変えてみる

文系男子が趣味でプログラミングを勉強していくブログです。他にも日常で起きたどうでもいいことや愚痴を書いていきたいです。座右の銘は和を以て貴しとなすです。仲良くやろうよ。

MENU
トップ > web > MediaQueriesとdisplay:noneを使ってレスポンシブ用にメニューを変えてみたよ

MediaQueriesとdisplay:noneを使ってレスポンシブ用にメニューを変えてみたよ

web ブログ

f:id:htmllifehack:20161225031253j:plain

僕は日頃SmartNewsをよくみるんですが、このアプリにははてなブログが読めるはてなカテゴリがあります。
パッとみて惹かれるタイトルのものがあると読むんですがやはりSmartNewsに載るような記事は読みやすいしデザインも整ってたりしますね。
影響を受けて僕も見やすい、使いやすいデザインにしたいと思い今回はメニューバーを追加してみました。



実装したメニューバー

今回はデザインも洗礼されていたのでまるまるコピペで導入させていただきました。
参考にさせていただいたブログ→
はてなブログスマホ画面にホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーをつけるカスタム - Yukihy Life
１、homeに戻るhomeボタン
２、人気記事上位５つを表示する人気記事ボタン
３、カテゴリ表示するカテゴリボタン
４、topへ戻るtopボタン
この４つを搭載できます。
プラスはてブ順で表示できるボタンの計５つのバージョンもあるようです。
この方のブログにあるコードをコピペして、あとは自分のブログのurlやカテゴリ名を入れるだけで簡単に実装できちゃいます。すごいですね。


こんな感じになります。

ただ、このままだとスマホやタブレットの他にパソコンでもこのメニューバーが表示されてしまいます。
以前トップに戻るボタンを実装したのでこれも表示されるとほら
f:id:htmllifehack:20161227022107p:plain
こんな感じにかぶってしまうんですね。
上に戻るボタンをアイコンを使って表現してみた - 僕の世界観を変えてみる
せっかく実装したので両方とも活かせるように次のようにカスタマイズしていきます。
・パソコンで閲覧する際はトップへ戻るボタンを表示する
・スマホ、タブレットで閲覧時はフッターメニューを表示する

display:none;でHTMLを非表示にする

まずはﾒﾆｭｰﾊﾞｰとトップに戻るボタンのHTMLにid="none"と"nonpc"をつけ足します。

<!--固定メニューバー-->
<div id="none">  ←これをつける
<div id="menu">
<div class="toggle-contents">
<div class="toggle-content">
<div class="hatena-module hatena-module-entries-access-ranking

<!--pageTopにもどる-->
<div id="nonepc"> ←これもつける
<p id="page-top">

次にそれぞれのidにcss　display:none;をつけ足します。

#none { display:none; }

#nonepc { display:none; }

こうするとﾒﾆｭｰﾊﾞｰもトップに戻るボタンも非表示にすることができます。
フット岩尾ものんちゃんって呼ばれてますよね。
noneって聞くたびに頭に浮かびます。

MediaQueriesで表示画面をわける

そして最後にメディアクエリを追加します。

/*--非表示にしたい--*/
@media screen and (min-width:769px){　/*--画面サイズが769px以上のとき--*/
#none { display:none; }}              /*--none(固定メニューバー)を非表示にする--*/

@media screen and (max-width:769px){  /*--画面サイズが769px以下のとき--*/
#nonepc { display:none; }}            /*--nonepc(トップに戻るボタン)を非表示にする--*/

はい、これで完成です。
768pxなのかなんなのかわからないので769pxという適当な数字になっています。
調べてみたらたぶんタブレットの横幅は768pxですね。
ちなみにdisplay:none;を使わずにメディアクエリだけだと
f:id:htmllifehack:20161227030351j:plain
こんなふうにHTMLだけ表示されちゃいます。
@media はCSSに書くしかないのでHTMLはどうやって消すんだろうと調べてdisplay:noneの存在を知りました。
厳密にいうと持ってる本に書いてありましたが使い方がよくわかっていなかっただけですね、やれやれ。

それといまいちメディアクエリがわからなかったんですが、minは最小表示が○○px、maxは最大表示が○○pxって考えればいいわけですね。
やっと理解しました。
今回作業するにあたってメディアクエリのことを調べましたが、間違った説明をされているサイトがあり混乱しました。
しかもそのサイトとまったく同じ間違いの説明をしているサイトもあってコピペしてんのかなっていう。
@media screen and (min-width:480px) {
画面サイズが480px以下の場合適用する
@media screen and (min-width:1024px) {
画面サイズが1024px以上の場合適用する
って書かれてまして、え？どっちもminなのに以下と以上の2種類意味があるの？どっちなの？って。
マジ困惑～、ガチ困惑～
情報過多の時代ですからね、取捨選択をして正しい情報のみを取り入れましょう。