レスポンシブデザインにおけるPCとスマホのスタイル振り分けはSassのmixinが便利。
レスポンシブデザインにおけるPCとスマホのスタイル振り分けはSassのmixin活用が便利。
最初にレスポンシブデザインとは何かを簡単に説明しておきます。
PCとスマホの表示を1つのHTMLファイルでやるために、webサイトを閲覧しているデバイスを判別し、デバイスにあったスタイルシートを参照することで、HTMLワンソースでデバイスにあった表示ができる、というものです。
キーワードはワンソースです。
ワンソースのワンが何を指しているかというと、それはHTMLファイルのことです。
スタイル（つまりどのような装飾、レイアウトにするか）は、PCとスマホで別なので、そこはそれぞれのスタイルがあります。
では、そのPC用のスタイル、スマホ用のスタイルをどう管理するか、ということが問題になってくるわけです。
その結論が、Sassのmixinを使いましょう。ということです。
Sassが何かというのはここでは省きます。また別の機会に紹介します。
PC用、スマホ用でSassコードの重複がなく、管理が楽になるのがメリット。
Sassのmixinを使ったPCとスマホ表示の切り替え方法。
実際のSassのコードとしてはこんな感じです。
$breakpoint: 767px;
// mixinの定義
@mixin media() {
@media screen and (max-width: $breakpoint) {
@content;
}
}
// box1というスタイルをPC用・スマホ用に定義する。
.box1{
// PC用のスタイル
width: 300px;
height: 150px;
border-radius: 10px;
@include media(){
// スマホ用のスタイル（PC用のスタイルを上書き）
width: 200px;
}
}
// box2というスタイルをPC用・スマホ用に定義する。
.box2{
// PC用のスタイル
width: 600px;
height: 300px;
border-radius: 10px;
@include media(){
// スマホ用のスタイル（PC用のスタイルを上書き）
width: 200px;
}
}mixinの定義部分
まずは以下の部分から見ていきます。
$breakpoint: 767px;
// mixinの定義
@mixin media() {
@media screen and (max-width: $breakpoint) {
@content;
}
}このmedia()がmixinの定義で、これをSassファイル内で、スマホ表示したい箇所に挿入していきます。
やっていることは、
「ディスプレイ画面」であって、「ページ幅がブレイクポイントである767px以内」のときに、書かれているスタイルシートをそのまま反映せよ。といった意味になります。
「そのまま反映せよ」というのは、@contentの部分です。@contentというのは、mixinで使える「機能」と思ってもらえれば大丈夫です。
mixinの呼び出し部分
では、実際にmixinを呼び出しているところを見てみます。
// box1というスタイルをPC用・スマホ用に定義する。
.box1{
// PC用のスタイル
width: 300px;
height: 150px;
border-radius: 10px;
@include media(){
// スマホ用のスタイル（PC用のスタイルを上書き）
width: 200px;
}
}ここで、box1というCSSのクラスを定義しています。
その中でまず、PC用のスタイルを書きます。
その後に、スマホ用のスタイルをmedia()というmixinで上書きしているイメージです。
上記では、「もし、閲覧しているデバイスの画面幅が767px以内であるなら（つまりスマホであるなら）幅を200pxにしてね。」ということをしています。
これをコンパイルしてできたCSSを見ると下記のようになっています。
.box1{
width: 300px;
height: 150px;
border-radius: 10px;
}
@media screen and (max-width: 767px) {
.box1{
width: 200px;
}
}分かりますでしょうか。
結局PC用のスタイルを定義するにせよ、スマホ用のスタイルを定義するにせよ、その共通部分というのは必ずあるんですよね。。となるとその共通部分を別々に書くのは効率が悪いです。
なので、メディアクエリをmixinで挿入し、差異がある部分だけにスタイルを上書きしてあげる、ということをやっています。
別のやり方の例を紹介します。
読み込むCSSファイルごとで変えるやり方もあるが、お勧めはしない。
HTMLファイルの冒頭で、読み込むcssファイルそのものを変える、というやり方も一般的ではあります。
<link href="sp.css" rel="stylesheet" type="text/css" media=" (max-width: 767px)" >
<link href="pc.css" rel="stylesheet" type="text/css" media="(min-width: 768px)" >この場合、PC用、スマホ用で読み込むCSSファイルの内容に重複がありません。
それぞれを完全別のスタイルとして管理できることはメリットでもありますが、前述の通り、共通部分にあたるスタイルをPC用、スマホ用としてそれぞれに書く必要があるので、ソースの量としては、こちらのやり方の方が多くなります。
また、共通箇所に変更が入ったら、PC用、スマホ用それぞれのCSSファイルを更新する必要があるのであまりお勧めできません。
大事なのはメンテナンスしやすいかどうか。
特にレスポンシブデザイン対応は、bootstrapのようなフレームワークの利用もあるでしょうし、Sassを使わず、ベタでCSSファイルでやってしまう、といった方法もあると思います。
いずれにせよ大事なことは、メンテナンスしやすい状態を保っておくということです。
そのために今回紹介したSassを使ったレスポンシブデザインのスタイル指定方法は汎用的だと思います。
参考になると幸いです。
