続・メディアクエリのトラブル

　レスポンシブウェブデザインにおいて基本的な事項の一つはメディアクエリによる各種環境への対応である。特にモバイルファーストを軸にCSSをデザインしていく。

　前回の記事ではその導入をしたのだが、ある問題が生じていた。当時、メディアクエリをとりあえず実装しようという目的で横幅767pxを境にそれぞれ別のCSSが読み込まれるように設定していたはずだった。その時起こったのは、それぞれのCSSが完全に独立せず、設定した内容がうまく反映されないというものだった。

　CSSファイルはそれぞれ別のファイルで作成し、htmlファイルのheadタグの中で両方読み込み、それぞれのファイルの一番はじめに@Mediaでサイズ指定を行っていた。viewportを通して定まった画面サイズに従って2つのCSSファイルのうちのどちらかが読み込まれる、というように設定したはずだったが、それはうまくいかなかった。厳密には調べていないが、2つのCSSファイルの設定内容がどちらも反映され、そのうち両方のCSSで指定されているものはどちらかの設定が優先して反映されている、というような状態であった。

　自分の弄った設定がうまくブラウザに反映されないため、色々と設定を変更してみたが結局は直すことができなかった。前回の記事を作った直後のことなので凡そ一年くらいその状態のままここは放置されていたわけである。

読み込み形式を変えてみる

　大学院入試が終わったらまた弄ってみようと前々から考えていたので有言実行である。少し本を読み漁ってみたり、色々とネットサーフィンして調べてみて、メディアクエリの反映方法を変えてみることにした。

　CSSファイルを一つにまとめようと考えてみたり(1つのファイルに全形式の設定を入れるのはさすがにきついと思ったので却下)、細かい文言を色々弄りなおしてみたり(特に効果はなかった)、そうして最終的にはCSSの@importを使う形に落ち着いた。

　まずはhtmlファイルのheadタグ内でstyle.cssを読み込む。style.cssは@importのみを記述する。画面サイズに応じて別のCSSファイル(モバイル用とPC用)を読み込む。これでうまくいった。

　htmlのlinkタブの都合か、将又CSSでの@mediaの都合か。個人的にはこのあたりに理由があると思っているが、それら両方に関係のないような方法でCSSファイルを条件づけて読み込むことで解決することができた。2つのCSSが互いに干渉して思い通りのデザインができず、ページのデザインに取り掛かることができていなかったので大きな進歩である。これでデバイスのサイズに応じたWebデザインを行うことができる。

余談

　edgeの開発者ツールはたまに使うが、今回色々と試していく過程で「コンソール」という機能を初めて知った。Webページの表示に際してのログを表示する機能で、コーディングのミスはここにエラーという形で表示される。いくつかエラーが出たので潰してみた。ちなみにarXivのコンソールを見てみたら大量のエラーメッセージが出てきて面白かった。Wikipediaでもエラーがいくつか出てきたのでよくあることではあるようだ。

　一つ目はタグがうまく対応していないというエラー。これは単純にh1をh4で閉じてたという凡ミスなので即直せた。二つ目は「"<?"で始まるタグは無効です」というもの。なぜかhtmlファイルの一番初めにあるDOCTYPEタグの!が?になっていたので修正。三つ目は「HTTP:1114」から始まる文字コードのエラー。これは具体的な問題が何なのかわからずにどうしたものかと思っていたが、よくよく見てみると「UTF-8」と文字コードを設定していたはずが「UTF=8」としていたのでそこを修正するとうまく直った。

marginとpaddingの設定

　ブラウザの余白挿入のせいでdivの周りに意図しない余白が入るのでstyle.cssのはじめに*に対するmargin:0;とpadding:0;を適用したが、今度は@importによるメディアクエリが読み込まれなくなってしまった。これはメディアクエリで分岐した先のスタイルシートそれぞれで指定することで正しく読み込まれたが、詳しい原因は分からなかった。

　この記事の最初のメディアクエリの件もそうだが、こういう問題が起こる時は大概自分がCSSやhtmlの仕様を理解していないことが原因である。それぞれの仕様をもっと理解できれば、とは思うがそこまでする元気はないのである…。