Media Queriesの考察と決断
いよいよ地獄のメディアクエリ考察です。これまでも散々悩まされ続けてきた子テーマにおけるメディアクエリの罠です。
前の記事 最小限度の改変を見極め実施する-全体、ヘッダー の続きです。
ウインドウサイズの歴史
その昔、パソコン画面が640pxや800pxだったころ、サイトの幅は500pxか600pxくらいがちょうどよい案配でした。その後大きな画面になってきたときは800pxくらいがよい案配でした。というか限度でした。その後さらにパソコン画面が大きくなったころ、ウェブデザインの世界が暗黒面に覆い尽くされました。強制的にpixel指定された巨大な横幅が横行しだしたのです。同時にflashとかいう邪悪なものが流行しだしたあの悪夢の時代ですね。
ピクセル指定の巨大な固定ウインドウ幅は最悪の流行でした。酷い出来映えのサイトになると、文章も固定幅で改行したりする有様。ウインドウサイズなどユーザーが好きに決めるものです。それは昔も今も同じです。
そして昨今、レスポンシブとかいう言葉が出てきまして、ようやく暗黒面に支配された固定幅脳も影を潜め、幅をパーセントで指定することが正当という考えが広がりました。
レスポンシブとかまるで新しい概念のように言う人もいますがウェブサイトデザインはもともとレスポンシブで、実際暗黒時代以外はそれが当たり前でした。
最適サイズ
巷では最適なメディアクエリのサイズ振り分けについて大いに考察が行われています。どのデバイスがどのサイズ、どのデバイスのシェアが何パーセント、いろいろな条件を元にメディアクエリをどうすべきか、賢人たちが考えを巡らせています。
私は賢人ではありませんので心の赴くままに決断します。私にとってメディアクエリとは単に画面サイズが小さいか大きいかということになります。iPhone（やスマートフォン）は小さくてiPad（やタブレット型）は大きい。パソコンも大きいです。ですので小さい画面用と大きい画面用があればとりあえず十分です。問題は「どのサイズを大きい画面と捉えるか」だったりしますがそれはまた後で。
iPadをモバイルに含める考え方もあり、それはそれで理解出来ます。つまりマウス操作かタッチ操作かの違いですね。タッチ操作にはhoverが効きませんから、スマートフォンとタブレットまでをひとくくりにするという考えです。考えは判りますがこの線引きと画面サイズの線引きが両方必要になってきてメディアクエリの分割が増えてきます。結構たいへんです。私個人はhoverも効かないようなデバイスのほうが出来損ないと思っていて、ですのでスマートフォンは当然タブレット端末だってただのサブ機に過ぎないという感覚です。ですのであまりこういったデバイスには本気で取り組まないんですよね。今やシェアは圧倒的にサブ機の勝利なわけですけど。
Twenty sixteenのメディアクエリ
twentysixteenのメディアクエリはシンプルです。たったこれだけの分割です。
* 14.1 – >= 710px
* 14.2 – >= 783px
* 14.3 – >= 910px
* 14.4 – >= 985px
* 14.5 – >= 1200px
cssを眺めているとどのような考えに基づいているのか判ります。
>= 710px
いきなり710pxから始まります。それ以下は全部スマートフォンでしょう、みたいなことですね。この幅からタブレットが視野に入っているようです。サイトヘッダー周りのマージンやサイズ変更が主なようで、cssを眺めていても装飾的な無駄を感じます。いや無駄じゃないんですが、カスタマイズの土台としての無意味さというか。
次の783pxはWordpressのログイン時に表示されるツールバーだけの設定ですから無視できます。
>=910px
910px以上が、普通のパソコン用となっています。サイトヘッダーのメニューがちゃんとしはじめ、サイドバーが横に付きます。hoverも付きます。大体これがメインのデザインとなりますね。
昨今はモバイルファーストと言って小さいサブ機用の画面が中心でデフォルト、大きな画面がオマケであとから継ぎ足すという考えとなっています。それもあって、この910pxあたりから本気のcssがだーっと書かれていてボリュームもあります。それがメディアクエリの特定幅のここにだけ書かれているのだから見た目も汚いしあとあとややこしいことになるんですね。モバイルファーストじゃないほうがソースは美しく仕上がるのに残念なことです。
>= 985px
Twentysixteenが道を踏み外すのはここからです。985pxという中途半端な分割は何を理由にしているのでしょう。普通に910に含めればいいのに、あるいは1200に含めればいいのにと思います。
中身を見れば、ロゴマークがでっかくなる、サイトヘッダーの余白がでっかくなる、エントリータイトルやタイトル文字がでっかくなる、コンテントの余白がでっかくなる、といったでっかくなることばかりやっています。はっきり言って意味ありません。でっかいだけです。
もうひとつ、ここからコンテントがフロートします。コンテントを左フロートさせ、空いた右側に著者情報などのメタを固まりで表示しますね。まったく意味がありませんし、むしろ鬱陶しいです。
[追] あ。ごめん。右と左間違った。逆です。右にフロートさせ空いた左側にメタ固まりの表示でした。私右も左もわからんのです。
>= 1200px
最大幅近くの大きな画面用です。ここでもやっていることはフォントサイズとマージンをでっかくすることばかりです。しかも1200px相当という、この中途半端な数値の意味がさっぱり分かりません。twentysixteenの親は1320pxでしたっけ、そういう幅指定になってるんだから1320にすればいいのにと思いますが理系の賢人たちの頭脳は我々凡人には計り知れないので謎は謎としておいておきます。
985と1200は、ただややこしくでっかくしているだけの無用のメディアクエリだということが判明しました。
ということで twentysixteenのメディアクエリをまとめると、まずデフォルトがモバイル向け、710はそのオマケでタブレット向け、910がパソコン向けのベース、985と1200は無理に拡張した無駄な装飾です。とってもシンプルですね。
メディアクエリと子テーマ
さてメディアクエリを含む子テーマの問題点は、親styleとの関係性につきます。
サイズを指定したメディアクエリ内に書かれた要素は、他のサイズ内に書かれたものに影響を受けません。親styleで定義された要素を子テーマで改変するには、同じサイズ指定内だけで有効だと知っておく必要があります。親と同じサイズの、同じ要素であれば通常通りのカスタマイズをしていけばいいのであまり問題にならないかもしれません。
メディアクエリのサイズ指定を子テーマで変えるとき
親styleで定義しているメディアクエリの分割が気に入らない場合どうなるでしょう。
例えば、親のメディアクエリが 710pxと985pxで区切ってある子テーマで、710pxで区切る必要がなく985pxだけ採用したいと思ってそう定義したとすればどうなるでしょう。そうです、710pxの親style、985pxの子style、どっちもが有効になってしまいます。親の710px指定が不要で、これを無視したいとすれば、子テーマにどう書きますか。
子テーマに無理矢理710を作って親710の内容をコピーしてからそのすべてをメディアクエリ以前のデフォルト値に修正する必要があります。
親styleのメディアクエリを引き継いで修正する必要と手間
親styleのメディアクエリ内要素を無視することはできません。親と同じメディアクエリを子テーマに作成して要素全部をコピーした上で、無視しているのと同等の変更を施さねばなりません。
親メディアクエリが細かく分割されていればされているほど、子テーマで作りたい分割が親と違っていれば違っているほど、親から受ける影響が計り知れないものになります。
cssの行数が膨れあがった以前の失敗例
以前、twentyfourteenの改造をしている時にこのことに気づき、仕方なしに親のstyleからメディアクエリを全部子テーマにコピーし、それを改造していきました。要らない分割部分があれば、その次の必要なメディアクエリ指定から全文をコピーして持ってきます。そしてその後にカスタマイズするという地獄のような状況となりました。その結果、子テーマのメディアクエリ部分が数千行にも膨れあがり、身動き取れない泥沼と化したのです。
あまりにも酷いので、最終的にはこうしました。子テーマであることを放棄したのです。
親テーマを丸ごと複製して名前だけちょっと変え、これをテーマとして有効にしてからカスタムしていったのです。これでは子テーマとは言えず、単なる公式テンプレートの丸パクリ改造にすぎません。やっていて虚しくもなります。もちろんアップデートにも対応できません。今回はこのようなことを避けたいと考えております。メディアクエリ全文連続コピーもうんざりです。さてどうしましょう。
Twentysixteen メディアクエリ改変計画
twentysixteenのメディアクエリ改変計画、最終的にこうしたい、という形はこうです。親がシンプルなおかげで改造案もシンプルです。
- 親の710cssを無視する
- 710区切りから710cssではなく親の910cssを採用する
- 910区切りは710ですでにやっているので特に意味は無い
- それ以上の親の大きなサイズ区切りを無視したい
- 710pxより小さい区切りが少しばかり必要
- 1260px（ワイドに合わせたサイズ）を作る
特に1〜4がネックとなります。正しく子テーマでこれらを行うには、次のような手順が必要となります。
- 710区切りを子テーマに作り、親710の全文をコピーしてからそのすべてを親910styleに合わせて無視しているかのごとく改変、または、親910の全文をコピーして子710にペーストしてから改変
- 985、1200それぞれ子テーマに分割を作り、親985、1200から全文コピーした後無視しているかのごとく改変、またはそれぞれ分割に親910全文をコピーしてから改変
いずれにしろメディアクエリ各サイズの中に親910からのコピーが溢れかえることになります。もうやる前から地獄絵図が見えています。以前と同じ過ちを繰り返したくありません。さてどうしましょう。
考えました。しつこく考えました。そして結論。
親を殺しました
なんという酷い小見出し。さんざん考えあぐねました。実は今回のカスタムでも一旦は910からのコピーで子テーマが溢れかえる事態になったのですが、これはマズいことになりそうだと削除、考えあぐねた結果、どうしようもないと判断し、そして決断しました。
禁断の親styleに直接手を下し、メディアクエリを殺すのです。
もうこれ以外に道はありません。親を触らないのが子テーマの特徴であり存在意義ですが、メディアクエリの改造には他の手立てが思いつきません。しかたないのでやります。父ちゃん御免。親死んでくれ。
メディアクエリ分割メモ
親を殺すのはいいのですが、それでもやはり最小限度に留めたいし、将来的に「はて。親の何をどうしたんだっけ？」という謎状態にならぬよう注意に注意を重ねます。親改変を最小限にする、改変の記録を残す、この二点を死守します。じつはこの長大なカスタマイズ記事は、自分メモのつもりで書き綴っておるのであります。
親styleのメディアクエリ分割は最初こうなっています。
/*14.1 - >= 710px*/
@media screen and (min-width: 44.375em) { }
/*14.2 - >= 783px*/
@media screen and (min-width: 48.9375em) { }
/*14.3 - >= 910px*/
@media screen and (min-width: 56.875em) { }
/*14.4 - >= 985px*/
@media screen and (min-width: 61.5625em) { }
/*14.5 - >= 1200px*/
@media screen and (min-width: 75em) { }
これを、次のように改変しました。
/*14.1 - >= 710px*/
@media screen and (min-width: 44.375em) { }
/*14.2 - >= 783px*/
@media screen and (min-width: 48.9375em) { }
/*14.3 - >= 910px >= 710px*/
@media screen and (min-width: 44.375em) { }
/*14.4 ->= 985px*/
@media screen and (min-width: 99961.5625em) { }
/*14.5 - >= 1200px*/
@media screen and (min-width: 99975em) { }
910pxの min-width: 56.875em を 44.375emに変更。710をごっそり上書きしてしまいます。
785pxは無害なので放置。
985px、1200pxのサイズ指定のところに999を付け加えて、つまり大きい数字にして遠くへすっ飛ばして無視するという、こういうことをしました。
{ }の中身はここには表示していませんが変えていませんよ。親ですから。
そして子テーマでは以下のような設定にしました。
@media screen and (max-width: 400px) { }/* 小画面専用の特別な要素を書く */
@media screen and (min-width: 594px) { }/* まあまあ小さいサイズ用 */
/*14.1 - >= 710px*/
@media screen and (min-width: 44.375em) { }/*親710px,その実910pxのメイン */
/*1260px*/
@media screen and (min-width: 1260px) { }/*設定したページワイドに合わせた最大幅専用*/
小さいサイズ以下専用っていうのを付け足し、そして594pxサイズを追加しています。
710pxあたりから通常メインのcssなわけですが、ミニサイズから710まで全部ひとまとめというのに抵抗があって、594pxを挟んでいます。このサイズでちょっと変えたいこともあるんですよね。ない人にはこんな分割は不要です。
1260pxを追加しました。こんなの必要なかったんですが、どうしても必要になったので付け足しました。どこで必要になったか、無理矢理作った検索ボタンなんです。その話はまたあとで。
いずれ910pxや985pxを追加するかもしれません。幾分かはこのサイズが必要なときも出てくると思われますし。
親のメディアスタイルを殺す最小限のやり口で、どうやったかここにこうしてメモしました。テーマを更新したら親に対してまた同じことをやります。
こんな強引なやりかたがいいのか悪いのか、他にいい方法があるのかどうなのか、わかりませんが現時点での最もスマートなやり口であると判断しました。
次はfunctions.php についてです。
