久野 晃司 
My Snow MonkeyでCSSファイルを用意して、独自のスタイリングを行うことはカスタマイズの鉄板中の鉄板でしょう。
しかし、レスポンシブ対応をする上で、毎回@media ( min-width: 〜 ) { と書くの面倒じゃないですか？しかも、ブレイクポイントの数値まで書かないといけない。
そんな制作のちょっとしたボトルネックを、以下のソースコードをコピペすることで解消できます。面倒だな…と思ったらこのページに戻ってきてください。
Snow Monkeyのブレイクポイント
Snow Monkeyは、BASISという作者のキタジマさんが作られたCSSフレームワークを取り入れています。そちらのスタイルガイドにブレイクポイントについてのページがあり、数値も掲載されています。
CSSで書く場合
CSSで書く場合には、こちらのソースコードを参照してください。
個人的にモバイルファースト派なので、メディアクエリ記載がない部分に関してはスマートフォンなどの画面幅が狭いデバイス向けと考えてください。
body { // 0px〜639pxまで
background-color: red;
}
@media screen and (min-width: 640px) { // 640px〜1023pxまで
body {
background-color: blue;
}
}
@media screen and (min-width: 1024px) { // 1024px〜1279pxまで
body {
background-color: yellow;
}
}
@media screen and (min-width: 1280px) { // 1280px〜
body {
background-color: pink;
}
}上記の狭い画面幅から記述していく形で、イレギュラーで広い画面幅から制限をかけたい場合には、このような記述を併用すると良いでしょう。
@media screen and (max-width: 1279px) { // 1279px以下
body {
background-color: pink;
}
}
@media screen and (max-width: 1023px) { // 1023px以下
body {
background-color: yellow;
}
}
@media screen and (max-width: 639px) { // 639以下
body {
background-color: blue;
}
}Sassで書く場合（Mixin利用）
Sassで書く場合には、コンパイルする環境が必要になります。詳しくはご自身で調べてみてください。
まずは、メディアクエリを簡単に書くために、Mixinを設定しておきます。
//-----------------------------------------------------
// Minimal width
//-----------------------------------------------------
$breakpoint-up: (
'md' : 'screen and (min-width: 640px)',
'lg' : 'screen and (min-width: 1024px)',
'xl' : 'screen and (min-width: 1280px)',
) !default;
//-----------------------------------------------------
// Max width
//-----------------------------------------------------
$breakpoint-down: (
'sm' : 'screen and (max-width: 639px)',
'md' : 'screen and (max-width: 1023px)',
'lg' : 'screen and (max-width: 1279px)',
) !default;
//-----------------------------------------------------
// Set Mixin
//-----------------------------------------------------
@mixin media-breakpoint-up($breakpoint: sm) {
@media #{map-get($breakpoint-up, $breakpoint)} {
@content;
}
}
@mixin media-breakpoint-down($breakpoint: lg) {
@media #{map-get($breakpoint-down, $breakpoint)} {
@content;
}
}そして、こちらを使う際にはmedia-breakpoint-down(**) { }というような記述で利用することができます。
便利に使いたい場合には、この設定部分だけをパーシャルなファイルにしておいて、制作ごとに使い回すと良いでしょう。また、案件によっては、これ以上にブレイクポイントを追加することもあるかもしれませんが、管理が簡単になるので、この方法はオヌヌメです。
先ほどCSSで記載した内容をSassで書くとこのようになります。
body {
background-color: red;
@include media-breakpoint-up(md) {
background-color: blue;
}
@include media-breakpoint-up(lg) {
background-color: yellow;
}
@include media-breakpoint-up(xl) {
background-color: pink;
}
}body {
@include media-breakpoint-down(lg) {
background-color: pink;
}
@include media-breakpoint-down(md) {
background-color: yellow;
}
@include media-breakpoint-down(sm) {
background-color: blue;
}
}media-breakpoint-down(**) { }の部分は、ショートカットなどをエディタもしくはIDEで用意しておくと、サクサクコードを書くことができるので良いでしょう。
HAPPY SNOW MONKEY を
さまざまな形でサポート頂けます。