レスポンシブサイトをSCSS/Sassで実装する ~その1:分岐方法~

image1

3月末まで久しぶりにhtmlコーディングに明け暮れる日々でした。
単にhtmlを書き続ける持久力を持ち合わせていないので、違う分岐方法とSCSS/Sass導入でレイアウト制御の作業効率が良くなるか、試行錯誤で進めてみました。

通常、多くのレスポンシブサイトは、解像度、画面幅によってcssを切り分けて表示されると思います。

ここでややこしく感じてしまうのが、選択肢が画面幅とiOSとAndroidとなると、分岐構造が複雑化するところです。
最近は、Android端末もある程度一定の解像度枠になってきているのですが、iPhoneも大きくなっていたり、iPadだったり、Androidタブレットだったり、PCモニタ画面などを画面幅のみで分けるのは、わたし自身キーーっとなってしまうので、違う方法を模索していました。

今回、採用した分岐方法は、

まず、OSで分ける。そして、必要に応じてOS毎で画面幅分岐で対応。

image2

分岐は、一般的に使用されるjavascriptは、Modernizrかと思いますが、今回は、長年お世話になっているcss browser selectorをメインで使用しました。

■メリット
・OS付属ブラウザ間の表示差を分断対応を細分化できる。
・cssファイル管理が若干分かりやすい。

■デメリット
・PCブラウザの幅指定では表示は変わらない。
・javexcriptオフのユーザーには最適化されない。
・cssファイル数が多くなる。

下記のように、OS毎に設定することで、実際、組んだ後で、デバイスごと(デバイス特有)の表示崩れが起きた場合、対応が局所で済む、という想定です。

image3

表示確認は、ChromeのデベロッパーツールでPC、iphoneとandroidのデバイスチェッカーが実機に近い状態で確認できます。(実機確認は必須ですが、なるべく毎回はやりたくないですよね。)

cssファイルは多くなりますが、1ファイルごとのcss行数は極端に短くなるので、逆に作業効率は良くなる想定です。

また、cssを@importする方法と変わらないじゃん、と最初は思いましたが、1ファイルと@import読み込みの時間などを比較した分かりやすいサイト【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみるを見つけ、参考にさせていただきました。

実作業としては、一番コアとなるPC用のcssを組み、それをベースにiPhoneに複製展開して、iPhone用cssを全て作成した後にさらにAndoroid用に複製展開するイメージです。

今回の進め方イメージの外枠はこんな感じです。

長く文章を書く持久力がないので、次回は、SCSS/Sassの環境構築をまとめてみます。

※内容についてのご意見はこちらまで