snow_monkey_prepend_main

Snow MonkeyのブレイクポイントをMy Snow Monkeyにも導入する方法(Sass用Mixin掲載)

  • ブックマーク
  • -
    コピー
snow_monkey_before_entry_content
snow_monkey_prepend_entry_content

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で用意しておくと、サクサクコードを書くことができるので良いでしょう。

「あれ?この情報、古くない?」と思ったらご連絡ください。 snow_monkey_append_entry_content
snow_monkey_after_entry_content

HAPPY SNOW MONKEYの管理人情報

久野 晃司

Web制作系フリーランス。WordPressに関するお仕事や活動が多いです。

WordPressコア貢献者/テーマ開発者/プラグイン開発者/Meetupオーガナイザー/翻訳貢献者

snow_monkey_append_main