SASS(SCSS)を利用する メディアクエリのアイデア

いやぁ、しかしこのメディアクエリというのは本当に難しいものです。どれが正解かはイマイチわかりませんし、かといって何もしないわけにも行きませんし。

Simplicityであれば、ひとまず何も改造しないのならデフォルトで使うのが一番なんですけど、それを改造してみたくなるのが人の常。そんなわけで、今日も当サイトをいろいろいじっていたわけです。

これまで、ひとまずの所、PCとスマホ向けに作っておけばよいかと思ったんですが、よくよく考えてみると、タブレットって何も手を付けてなかったなぁと思い、さてどのようにするかなぁと色々と考えておりました。

結局の所、タブレットもスマホも基本同じ感じでいいと思うんですが、タブレットの場合は画面幅がそこそこあるので、まるっきりスマホと同じというわけにも行かなかったりするんですよね。そもそも、スマホはみんな利用しているのは知っているわけですけど、タブレットを使う人をそんなに頻繁に見るわけでもなく、家に帰ればPCやノートPCがあるわけで、タブレットって何のために存在してるんだろうってぐらいに思ってもいました。
しかし、このご時世、まるっきり無視ってわけにもいかないだろうと言うことで、そしたらどうやって切り分けるか何か良いアイデアはないものかと思ってしまったわけなんです。

SASS(SCSS)を使って便利に設定

毎度毎度、@media screen…と書くのは本当に面倒臭い。かと言って、タブレット、スマホで設定をまとめてしまうと、何をしているのかわかりにくい。そこでSASS(SCSS)ですよ。

僕はこんなふうに書いています。

で、例えば、うちのサイトのコピーライトの部分はこういう感じに使っています。

これを書き出すと、

このようになります。個人的に、tabの表示のほうが見やすいので、SCSSではTABで書いておき、書きだした(Compileした)時はスペース2つみたいな感じですね。ってそこはどうでも良い部分です。
ちなみに、@include fz()は、フォントサイズを出力するmixinで、ここには書いてませんが以下のようになっています。

話は戻りまして、メディアクエリで、@include phone { … }とすると、@mixin phone { … }の部分が読み込まれます。該当部のmixinをピックアップしてみますと、

こうなっており、

などとすると、

このように、最小画面幅が320pxで最大画面幅が767pxまでの端末では、#copyrightのfont-sizeを14pxにするというような事ができるわけです。もし、タブレットもスマホも同じであれば、mixinのphone-tabletの部分を使って、

こう書けば、

と出力してくれるという具合です。簡単な記述で、面倒臭い出力に変換してくれるのと、それぞれのmixinに設定された端末のサイズは一定ですから確実にそのサイズに合わせてくれるので、とても効率が上がること間違いなしです。

これまでは、@media screen and (max-width: 50em){ … }などと書いていたりしたわけですが、それはそれで問題ないものの微妙なサイズの場合の対応に追われたりもしていました。

現在の僕の設定では、以下のようになっています。

分類 最小 最大
スマホ 320px 767px
タブレット 768px 1024px
スマホ・タブレット共用 320px 1024px

768 x 1024pxは、ipadあたりの解像度です。iphone5で320 x 568px、iphone6で375 x 667pxあたりですから、たいてい上記の設定でイケる感じです。Google Nexus10で、1280 x 800pxとかになりますが、その解像度であればPC表示でいけるのと、仮に縦表示にした場合は800pxでタブレット表示ができれば問題なしということでこのような設定になっています。

SASS(SCSS)を使いたいけれども環境がないと言う人に向けて

本来はNode.jsなどを導入して、glupなどのタスクランナーっぽいのを色々と利用するのが良いと思うんですけれども、それはちょっと難しいという場合は、CodepenjsFiddleなどを利用して、ブラウザ上で開発するのも手です。これらのサイトは設定でSASS(SCSS)が利用できるので、チョチョイとブラウザで書いておき、コンパイルしてCSSにすれば、後はコピってローカルのファイルに貼り付けてFTPでアップロードするだけです。

結局はCSSになればよいので、一時的にこれらのサイト(他にも対応している所はあります)を利用するのが最も簡単かなぁと思います。なんの準備も必要ありませんし、ブラウザ上でできるので便利だと思います。

別件で

2015/08/06 に wordpressが4.2.4にアップデートされました。もしかしたらうちのサイトだけかも知れませんが、アドミンバー(画面上部の黒帯メニュー部分)が表示されている状態だと、スマホなどで、画面上部にスペースが出るようになりました。しかも、headタグのstyleで!important付きで書き出しやがるもんですから、子テーマから修正できないというふざけた内容だったので、面倒臭いんですけど、ダッシュボード→ユーザー→ユーザー一覧から、自分の所に出る「編集」を選び設定に入って、ツールバーの項目で「サイトを見るときにツールバーを表示する」のチェックを外しました。
ダッシュボードへはメタタグの「サイトの管理」から入る感じにしました。ウィジェットなどでメタタグを入れておかないとダッシュボードのログインが面倒臭いことになるので、フッターとかサイドバーに設置しないといけませんね。

まぁ、別にスペースが入っていてもいいんですけどね(笑)
一般の訪問者は元々アドミンバーが出てないのでこのスペースは表示されないと思うんですが、何やら面倒臭い仕様です。
お困りの方は上記の方法で、不要なスペースを取り除くことができますのでお試しあれ。最悪、「http://自分のサイト名/wp-admin/」でダッシュボードに入れますのでメタタグの入ったウィジェットがなくても大丈夫です。

スポンサーリンク

シェアする

フォローする