制作・管理ツールスマホPC・MacガジェットアプリMoneyOfficeLife#Amazon#Bluetooth#Composer#CSS#Docker#GAS#GoogleCloud#Googleマップ#Homebrew#HTML#JavaScript#Laravel#Node.js#PHP#ReactNative#SNS#SQL#Tasker#VSCode#WebAPI#Wi-Fi・LAN#WordPress#アクセス解析#サーバー#スプレッドシート#スマートホーム#スマホカメラ#データ通信#ネットショップ#ネット広告#ネット証券#ネット銀行#ファイル共有#ブラウザ#ポイント#不具合#動画アプリ#安い・お得#本・電子書籍#終了・廃止#購入アイテム#電子マネー・電子決済#電話・通話TwitterRSSFeedly2019/09/21Web・App制作#CSS【Sass】Map(連想配列)データを利用しメディアクエリを@mixinで定義|CSSの値を1箇所で管理レスポンシブデザインでは、画面サイズによってメディアクエリを変更しデザインを切り替えることが多くありますが、今回はそのメディアクエリを@mixinで定義し、CSSのプロパティの値を1箇所で管理する方法となります。今回の例では、まず、メディアクエリを@mixin(ミックスイン)を使い定義し、CSSのプロパティの値を1箇所で管理できるようにします。定義した@mixinを@includeで呼び出すことにより、指定したメディアクエリを簡単に使えるようにします。以下が@mixinを定義するソースコードの例となります。}}以下、ソースコードの説明となります。Map(連想配列)データを作成まずは、キーを「@includeで指定する引数」、値を「min-widthのサイズ」としてペアにし、Map(連想配列)で$break-pointを作成します。次に、メディアクエリを@mixinで定義します。@mixinでは関数名をmedia-queries()とし引数を変数$keyとします。メディアクエリのmin-widthの値を関数map-get()で返します。関数map-get()では、第1引数にMap、第2引数にキーを指定することにより、Mapのデータから指定したキーの値を返します。media-queries()の引数と、関数map-get()の第2引数を同じ変数$keyにすることで、@includeで呼び出した際に、指定したメディアクエリを出力できます。引数にMap(連想配列)のキーを指定し、@includeを呼び出す以下のソースコードは、上記で定義した@mixinを@includeで呼び出す例となります。media-queries()の引数に$break-point内のいずれかのキーを指定します。そのキーとペアとなっている値を取得し、メディアクエリのmin-widthの値として出力しています。media-queries()の引数にMapのキーmore-smを指定し、min-widthが768pxのメディアクエリを出力しています。コンパイル後のCSSソースコード今回の例で使用したSassのソースコードは、コンパイルされると以下のCSSになります。Sassのコンパイルの方法については以下のリンク先を参考にしてみてください。}}また、メディアクエリ毎に対して、CSSのプロパティは同じで値のみを簡単に変更させたい場合は、以下のリンク先を参考にしてみてください。コメントをキャンセルコメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。(メールアドレスは公開されることはありません。コメントの公開は承認制となります。)また、多忙によりコメントには返信できない場合があります。Twitterで返信する場合はこちらから。DESTROY広告ブロッカーが有効のため、コンテンツ内におすすめ商品などが表示されています。