Sassでメディアクエリを構造化する方法

Sep 13, 2025

操作方法

実質的にすべてのサイトは現在、レスポンシブWebデザインへの少なくともNODで構築されています。これらの対応スタイルを構成する方法は、更新が行われ、プロジェクトがサイズが大きくなるにつれて、プロジェクトが将来プロジェクトが維持および編集する方法との直接の関係があります。

それにもかかわらず、これらのレスポンシブスタイルをどのようにそしてどこで構造化するかのために広く受け入れられているアプローチがまだ開発者によって一貫して採用されていないようです。プリプロセッサと命名方法論の前に、CSSの「昔の日」と同じくらい悪いほど、これは要素の応答スタイルを構築するための矛盾していることがよくあります。

あなたのサイトを始めようとしていますか？トップを選ぶ ウェブサイトビルダー そして ウェブホスティング サービス。大チームを扱う？あなたを確認してください クラウドストレージ あなたのデザインシステムで全員を最新の状態に保ちます。

SASSとは何ですか？

過去のCSS

私たちが直面している問題を理解するために、最初に戻りましょう。 SASS以降などのCSSプリプロセッサが最初に作成された理由の1つは、CSSが非常に厄介で維持するのが難しいためです。私たちはしばらくの後、ほんの少しのウェブサイトでさえ、開発者が不信感があるか、または削除された最新の要素の残骸であったCSSスタイルの行の行が並んでいました。

例として次のシナリオを取ります。

ヘッド{背景：＃000000; ;;
.title {フォントサイズ：16px; ;;
.title_small {font-size：14px; }
.title_alt {font-family：sans-serif;

このコンテキストでは.heading要素のタイトルであると仮定しても安全であると思うかもしれませんが、実際には、サイト内の他のタイトル要素をスタイル化するために実際には完全に確実になることはできません。。また、.Title_altクラスはどこで使用されていて、まだ必要ですか、それとも使用中ですか？このような簡単な例でも、変更を加える前に全部を確認するための時間のかかる演習になる可能性があることがわかります。

このため、多くの開発者は、要素に新しいクラスを追加するか、またはより複雑なCSSセレクタを使用して必要な変更を加えることによって時間を節約し、次に変更が必要なときにCSSの複雑さを増しました。。

プリプロセッサ、命名規則およびモジュラーCSS

スタイルをネストして、変数を使用し、他のクラスを拡張する機能のおかげで、プリプロセッサはCSSを作成し維持する方法に革命を起こりました。残念ながら、彼らは感染のように昔のようにプロジェクト全体に広がって成長する厄介な古いスタイルの問題を完全に解決しません。

さまざまな命名規則とCSS方法論など b 適用されると、スタイルにはるかに大きなレベルのコンテキストを与えます。

使用して自己収容された入れ子の要素の変動、修正、およびスタイルを作成する場合 CSSモジュール、あなたのスタイルを構造化するための本当に強い方法が生まれました。

以下に、これらの改善が私たちの以前のコード例で遭遇した問題を解決できる方法を見ることができます：

ヘッド{
背景：$黒;
}

.heading__title {
フォントサイズ：16px;

＆amp; .heading__title  - 小{
フォントサイズ：14px;
}
}

.post__title  -  alt {
フォントファミリー：SANS-SERIF;

ここでのタイトルスタイルが見出し要素内に特に含まれていることが即座に明らかです。あなたは他の要素に影響を与える心配せずにあなたは安全にこれらを削除/編集することができます。小さなタイトルがヘッダのタイトルの変動であることもわかりますが、ALTタイトルスタイルは別の要素のためのものでした。

私の意見では、この構造と命名方法論のこの組み合わせに従うと、きれいで容易に保守可能なCSSスタイルを作成するのはかなり簡単です。コンテキストを迅速に獲得でき、CSSの自己完結型のモジュールを他のプロジェクトにコピーして貼り付けることも、簡単に修正および削除することができます。

乱雑で不可能なコードの問題が解決されたように思えるかもしれません。しかし、レスポンシブデザインがますます関連性があるようになるにつれて、私たちが何度も何度も多くの間違いを繰り返して、対応するウェブサイトの作成にひどく構造化された過度に複雑なアプローチを生み出していることが明らかになりました。

この問題を解決するのは、メディアクエリバブリングがプレイする場所です。

レスポンシブスタイルの場所

CSSを作成するための私たちのアプローチの上記の改善のおかげで、私が最近のプロジェクトを継承またはコラボレーションするときはいつでも私は私が特別な地獄や私が使った構造解除の火に陥るために自分自身を開いたことをめったに経験しませんでした。その状況で持つこと。私は現在、命名方法論を命名しており、モジュラーCSSのおかげで、関連するクラスやスタイルを素早く見つけて理解できることを知っています。

残念ながら、私が遭遇するフラストレーションの主な原因は、対応スタイルがまだプロジェクト全体に矛盾しています。それらはモジュラー構造内に収容されており、命名方法論で適切に命名されているが、プロジェクトによるプロジェクトは、開発者が自分の対応スタイルを含めることを選択することを選択している。

たとえば、_mobile.scssまたは_tablet.scsという名前の別のSass部分を作成します。一部の場所のメディアは、昇順または降順で関連ファイルの下部に問い合わせ、他の要素のスタイル間でランダムに配置するだけです。このアプローチでは、異なるブレークポイントにわたって1つの要素のスタイルを完全に理解するためだけに、ファイル間のタブとスクロールすることができます。

メディアクエリバブリング

ご覧のとおり、これには多くの問題があり、実際に必要なものよりも変更/修正に取り組んでいる時間を増やすと、すべての問題があります。

スタイルを複製し、コンポーネントのすべての関連スタイルを維持して見つけるプロセスを困難にします。要素のスタイルの完全な写真を得るために複数の場所やファイルを調べる必要があります。
要素はもはや自己完結型ではありません。他のプロジェクトでそれを簡単に再利用することも、有害な影響や長いコードを残しずにそれを自信を持って削除/修正することはできません。
新しいプロジェクトごとに、そのプロジェクトがレスポンシブスタイルにどのように近づくかを判断する時間が無駄になります。
あなたがあなたの頭の中のアプローチを切り替える必要があるので、プロジェクト間の切り替えは難しくなります。これは、偶然にアプローチの組み合わせを有するプロジェクトにつながる可能性があり、それは再び乱雑なCSSをもたらす。

これを修正するために実装するのが好きな解決策は、メディアクエリバブリングと呼ばれます。説明する最も簡単な方法は、メディアクエリをモジュラー要素の他のどのバリエーションのように考慮することです。例えば、.heading__titleのBEMバリエーションクラスと同じです。例えば、Heading__Title-Bariationです。つまり、メディアクエリは、変更クラスのように、内部にネストする必要があります。この例として次のコードを参照してください。

。ヘッダー{
背景：$黒;

@mediaのみの画面と（最小幅：640px）{
背景：$ whit;
}

この例では、ヘッダーの背景が640px以上で白に変わる1つの場所では明確に見えます。メディアクエリを要素のスタイルと共に自己含有することで、再利用または自信を持って編集できる全自己完結型のモジュールをもう一度作成しました。すべてのブレークポイントをカバーしていることを確認するために、_mobile.scssファイルをクロスチェックする必要もありません。クラスの他の表情についてプロジェクトを検索する必要はありません。

ネストメディアクエリバブリング

繰り返しますが、私は開発者が彼らの要素の応答スタイルをどのように構造化するかの多くの変形を見ました。これは、親要素のスタイリングとは異なると見なされ、すべてのメディアクエリとスタイルは自己完結型であるべきです。次の例を参照してください。

 .heading__title {
フォントサイズ：16px;

@mediaのみの画面と（最小幅：640px）{
フォントサイズ：18px;
}

＆amp; .heading__title  - 小{
フォントサイズ：14px;

@mediaのみの画面と（最小幅：640px）{
フォントサイズ：16px;
}
}

ViewPortが640pxまたは大きい方のフォントサイズが大きくなると、見出しタイトルのバリエーションも大きくなりますが、標準よりも小さいと定義されていることがわかります。この技術を使用して、いくつかのレベルの深さを入れ子にしていることを確認するために、BEM方法論を強く適用することが非常に重要です。たとえば、.heading__title要素が、.heading要素内には不必要にネストされていない自己完結型のCSSモジュールであることを確認してください。

クリーナーレスポンシブスタイル

BEMとモジュラーCSSによって提供され、それを同じ構造内でメディアクエリに適用した利益から学んだことを取って、私たちは私たちの過去の間違いを繰り返すことを止めます。

このようにメディアクエリを操作することで、スタイルの完全に新しい方法論や構造体を学ぶ必要はありません。私たちは基本的にモジュラーCSSアプローチを取り、それを私たちのメディアクエリに適用しています。

また、ファイル間でCSSクラスを重複していないクリーナーCSSを作成し、修正を行うときに複数の場所をチェックする必要性を削除することで開発時間を節約しています。

この記事はもともと発行されました ネット 、プロのウェブデザイナーと開発者向けの雑誌。 ここでネットを購読する 。

関連記事：

SassでクールなUI CSSアニメーションを作成します
あなたがSASSでできることを知らない10のこと
あなたが賢く働くのを助けるためのウェブデザインツール

Sassでメディアクエリを構造化する方法

過去のCSS

プリプロセッサ、命名規則およびモジュラーCSS

レスポンシブスタイルの場所

メディアクエリバブリング

ネストメディアクエリバブリング

クリーナーレスポンシブスタイル

操作方法 - 最も人気のある記事

Photoshopで深さを追加するためにペンツールとテクスチャを使用する

30キーショットレンダリングヒント

イラストレーターにアプリアイコンを作成する方法

油中の波紋水を塗る

変換率最適化の科学をマスターする

Mayaでより良い文字アニメーションを作成する

塗料の影の色を混ぜる方法

フレキシブルリボンリグの作り方

カテゴリ