0%

Programmingプログラミングナレッジ

Posted:2017.08.03

変数とmixinを使ったメディアクエリで効率的なレスポンシブコーディング

CSS拡張のメタ言語であるSassですが、様々な便利機能があり使いこなすことでコーディングが飛躍的に効率よく行うことができます。今回はその中でも「mixin」と「変数」を使ってメディアクエリを管理する方法をまとめていきたいと思います。

 

変数でブレークポイントを定義

Sassでは値を変数として扱うことができます。メディアクエリでもディスプレイサイズをpxで指定しますが、その値を変数で定義しておきます。このようにすることで、ブレークポイントに変更があった時でも柔軟に対応することができます。

 

この後、紹介する例ではBootstrap4に合わせたブレークポイントになっています。この値は案件ごとの仕様に合わせていきます。変数名も適宜わかりやすい名前にしておきます。

ブレークポイント1:1200px
ブレークポイント2:992px
ブレークポイント3:768px
ブレークポイント4:576px

 

【_variable.scss】

$hd-min: 1200px;
$desktop-max: 1199px;
$desktop-min: 992px;
$laptop-max: 991px;
$laptop-min: 768px;
$tablet-max: 767px;
$tablet-min: 576px;
$mobile-max: 575px;

 

mixinでメディアクエリーを定義

mixinとは関数のようなもので、あるセクションをひとまとめに扱うことができます。実際にはincludeとcontentという機能と合わせて使用します。mixinで定義しておくことでメディアクエリーをより簡潔に記述することができます。

 

【_mixin.scss】

@mixin screen-hd {
  @media screen and (min-width: $hd-min) {
    @content;
  }
}
@mixin screen-desktop {
  @media screen and (min-width: $desktop-min) and (max-width: $desktop-max) {
    @content;
  }
}
@mixin screen-laptop {
  @media screen and (min-width: $laptop-min) and (max-width: $laptop-max) {
    @content;
  }
}
@mixin screen-tablet {
  @media screen and (min-width: $tablet-min) and (max-width: $tablet-max) {
    @content;
  }
}
@mixin screen-mobile {
  @media screen and (max-width: $mobile-max) {
    @content;
  }
}

 

これで下記のようにscssファイルにスタイルを記述していきます。mixinで定義したデバイスごとのメディアクエリーをincludeを使ってまとめていきます。コンパイルすると、メディアクエリーとしてCSS上に書き出されます。

 

【_sample.scss】

@include screen-mobile {
    // モバイル用のスタイル
    h1 {
        font-size: 18px;
        color: #f00;
    }
}

【sample.css】

@media screen and (max-width: 575px) {
    h1 {
        font-size: 18px;
        color: #f00;
    }
}

 


 

レシポンシブコーディングはどうしても複雑でコードが長くなりがちですが、Sassをうまく使うことでスッキリとさせることができます。管理や保守も楽になりますし、コーディングのスピードも早くなるというメリットがあります。効率的なコーディングのために参考にしてみてはいかがでしょうか。

 

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】