デジタルマーケターのためのCSSメディアクエリ
公開: 2016-11-12デジタルマーケター向けのCSSメディアクエリのターゲットインターネットガイドへようこそ！ 必然的に、この記事にはいくつかの技術用語が含まれますが、Web開発についてほとんど知らなくても、関係なく読むことをお勧めします。 メディアクエリとその仕組みについて学ぶことは、デジタルマーケティングの仕組み、特にWebや電子メールのレスポンシブデザインについての理解を深めたい人にとって役立ちます。
若いコーダーがWeb開発の勉強を始めたときに最初に学ぶことの1つは、HTML（ハイパーテキストマークアップ言語）がWebページのコンテンツを定義する言語であり、CSS（カスケードスタイルシート）がそのコンテンツの外観を定義することです。 少し奇妙な例えを使用すると、CSSはHTMLであり、衣服は体であるため、公開する前に重要な考慮事項です。
メディアクエリは、CSS言語の最新版であるCSS3のモジュールです。 これらは、コンテンツのレンダリングに使用されているデバイスまたはブラウザーのパラメーターに従って、コンテンツのスタイル設定方法に影響を与えます。 これらには以下が含まれます：
- ビューポートの幅と高さ
- 画面の向き（横向きまたは縦向き）
- 解像度
- デバイスのアスペクト比
これらの要因やその他の要因に応じてWebコンテンツの表示方法を変更できる可能性があるため、開発者は、スマートフォンの登場が始まった2000年代半ば以降、これまでにないほど多くの視聴者を獲得できるようにコンテンツを最適化する機会が得られました。 Web対応デバイスの多様化から。
メディアクエリはどのように機能しますか？
@media screen and （min-width：700px） {…}
メディアクエリには、メディアタイプとメディア機能式の2つの重要なコンポーネントがあります。
メディアタイプとは、期待するもの、つまりコンテンツが表示されるメディアのタイプを正確に指します。 CSS3では多数のメディアタイプがサポートされていますが、本当に気にする必要があるのは「screen」だけです。
一方、メディア機能は、前のセクションにリストされているようなデバイス機能（画面サイズ、向きなど）です。 メディア機能式は、メディア機能について何かを教えてくれます。たとえば、max-width：900pxです。
このセクションの上部にあるマルチカラーのコード行は、メディアクエリの構成要素を示しています。 青いセクション– @media screen –は、メディアタイプ「screen」を指定します。 緑色で、700pxの最小ブラウザ幅を指定するメディア機能式があります。 メディアタイプ「screen」とメディア機能min-width：700pxの両方がtrueの場合、つまり、使用されているデバイスが画面で、ブラウザの幅が700px以上の場合、メディアクエリはCSSスタイリング命令のいずれかを配信しますこれらの黄色のカーリーブラケットの内側に配置されます（わかりやすくするために、ここでは空のままにしておきます）。
'and'演算子を使用するだけで、メディアクエリを拡張して、追加のメディア機能を含めることができるため、この例は次のようになります。
@media screen and （min-width：700px） and （orientation：landscape） {…}
この新しい例では、コンテンツが横向きで700px以上の画面表示でレンダリングされることを条件にフォーマットを適用します。
デジタルマーケターがメディアクエリをどのように使用しているか
デジタルマーケターは、CSSメディアクエリを使用して、すべての可能性のある視点（すべての画面サイズ、向き、解像度）に対応するカスタマイズされたWebコンテンツ表示エクスペリエンスを作成します。 目的は、スマートフォン、デスクトップ、タブレットに最適なエクスペリエンスを作成することですが、デバイスはすべて同じコンテンツバージョン内で使用されています（つまり、デスクトップとモバイルに別々のWebページはありません）。
私たちの目的にとって、最も重要なメディア機能はビューポートの幅です。 この機能を使用してマーケティングメールを最適化する方法を見てみましょう。
Uberからのメールのこの驚異に目を楽しませてください。 シンプルで効果的なレスポンシブメールデザインを実行する方法の真のマスタークラス。
CSSメディアクエリは、画面幅メディア機能を使用して、各画面サイズに最適な電子メールのコンテンツを配信する上で重要な役割を果たします。
メールのヘッダー部分がどのように表示されるかを判断するために使用されるメディアクエリは次のとおりです。
@media screen and（max-width：699px）{
.t1of12、.t2of12、.t3of12、.t4of12、.t5of12、.t6of12、.t7of12、.t8of12、.t9of12、.t10of12、.t11of12、.t12of12、.full {
幅：100％！重要;
最大幅：なし！重要
}
このコードのいくつかは見覚えがあるはずです。 おそらくそうではない人もいます。 それを分解しましょう：
- @media screen –クエリのメディアタイプを設定します
- （max-width：699px）–最大幅のメディア機能を設定します。 699px以下のすべてのビューは、クエリの影響を受けます
- {および}–中括弧内に含まれるコードは、メディアクエリで指定されたメディアタイプとメディア機能の両方がコンテンツの表示に使用されるデバイス/ブラウザに当てはまる場合に適用されるCSSスタイリング命令です。 699pxのビュー幅までのすべてを表示する画面
- .t1of12など–レスポンシブWebデザインの多くは、レスポンシブコンテンツグリッドを使用して動作します。このグリッドでは、要素（Uberの電子メールのヘッダーセクションなど）に1〜12列の任意の列を含めることができます。 画面の幅が大きくなると、各行のいくつかのグリッドの正方形が組み合わされて、グリッドのより短く幅の広いバージョン内でより長い行が形成されるという考え方です。 ターゲットインターネットのホームページに移動し、ブラウザの上部にある[復元]ボタンをクリックし、ウィンドウを右下隅からドラッグして、この効果が実際に動作することを確認します。「。t1of12」、「。t2of12」などは列幅の指定子です。 、ここでは、さまざまなビューポートサイズでコンテンツの幅を調整するために使用されます。
- width：100％！important –この命令により、コンテンツが拡張され、親要素の全幅になります。
これらは、実行中のメディアクエリの重要なコンポーネントです。メディアタイプ、メディア機能の表現、および応答性の高いCSS命令です。 これらの線に沿って独自のメディアクエリを作成する場合は、経験豊富なCSSコーダーである必要がありますが、メディアクエリのコンポーネントと、それらのコンポーネントがどのように連携するかを理解することは貴重な基盤です。
さらに深く：他のメディア機能を使用する
これまでは主に画面幅に焦点を当ててきましたが、メディアクエリで非常に有利に使用できる他のメディア機能がいくつかあります。 それらを使用する方法に関するいくつかの簡単なヒントを次に示します。
- 解像度–メディアクエリを使用して、画面解像度の低いデバイスに、よりシンプルで大胆なビジュアルコンテンツを表示します。
- オリエンテーション–前述のUberメールの例で適用されたものと同じレスポンシブグリッドの原則を使用して最適化します。
- 色（CSSコンテキストでは「color」と表記）–色成分ごとのデバイスのビット数を指します。 コンテンツのエクスペリエンスにとって高い色深度が重要な場合は、デバイスのビット数が少なすぎる場合に代替バージョンを配信するようにCSSメディアクエリを設定することを検討してください。
メディアクエリを実装する方法–開発者とコンテンツエグゼクティブ向け
ご存知かもしれませんが、メディアクエリを実装するには、コーディングの知識が必要です。 それでも、メディアクエリがどのように機能するかを理解することは、デジタルマーケティング担当者にとって望ましいことです。これにより、デザインのアイデアをWeb開発者の同僚にもっと流暢に伝え、利用可能なコーディング手法に合わせてそれらのアイデアを形作ることができます。
他のCSS機能と同様に、メディアクエリはコンテンツのCSSスタイルシートに属します。 コンテンツのすべてのCSSクエリをスタイルシートの下部に一覧表示するか、スタイルを設定するコンテンツのアイテムのすぐ下に各クエリを挿入することをお勧めします。 疑わしい場合は、Web開発者に問い合わせてください。
コーディングの責任はないが、デバイスタイプ全体でコンテンツのユーザーエクスペリエンスの計画を担当している場合は、コンテンツの表示方法を明確かつ正確に指定することで、開発者が目的の効果を達成できるように支援できます。さまざまなメディア機能条件に。 例えば：
画像A：画面幅が600px以上の場合に表示
画像B：画面幅が400px以上の場合に表示
そして心配しないでください、あなたの指示に何か問題があったとしても、あなたはすぐにそれについて聞くでしょう。
メディアクエリはもう何年も前から出回っていませんか？
メディアクエリは初期の2000年代に登場し、印刷用のWebコンテンツのフォーマット（たとえば、Webページが印刷に送信されるときにWebコピーを黒、背景を白にするなど）を含むさまざまな機能を果たしました。しかし、メディアクエリの真の画期的な瞬間は、2012年に発生しました。それらがブラウザとW3Cをサポートするレスポンシブデザインの新しいWeb標準になったとき。
2016年現在、Webクエリは高品質のWebデザインの基本的なコンポーネントです。 9月にGmailがついにサポートを開始すると発表したとき、彼らはさらに後押しを受け、ユビキタスなWebデザインメカニズムとして浮上しているメディアクエリに対する長年の障害を取り除きました。
レスポンシブテンプレートでのメディアクエリ
世界をリードするEメールマーケティングツールの多くは、レスポンシブEメールテンプレートでメディアクエリを使用しています。 Gmailがメディアクエリをサポートするようになったというニュースが報じられたとき、MailChimpは更新の重要性を説明するブログ投稿を書きました。デバイス。 これで、さまざまなデバイスや画面サイズに合わせてメールレイアウトをより簡単に最適化できるようになります。
「私たちのテンプレートはGmailの過去の制限を回避するために作成されましたが、Googleが現在サポートを展開しているコードが常に含まれています。 つまり、キャンペーンはすべてのクライアントでより一貫してレンダリングされます。」
レスポンシブデザインを使用することが重要な理由
私たちの常連の読者は、私たちがこれを何度か言うのを聞いたことがあるでしょうが、もう一度言うことを恐れません。モバイルとタブレットのユーザーに素晴らしい体験を提供することは絶対に不可欠です。 なんで？ 膨大な数のWebユーザーがモバイルやタブレットを使用しているためです。
comScoreの調査によると、2015年12月の時点で、76％の人がデスクトップ、モバイル、タブレットなどのデバイスを組み合わせてインターネットにオンラインでアクセスしています。 わずか11％がデスクトップのみを使用しているため、疑問が生じます。潜在的なオーディエンスの89％に、最適ではないコンテンツを配信する余裕があるのでしょうか。 もちろん、複数のデバイスの大多数の中には、デスクトップを使用してコンテンツにアクセスする人がたくさんいますが、他の何かを使用する人もたくさんいます。
コンテンツを複数のデバイスタイプと互換性があることを望んでいるのはWebユーザーだけではありません。 それもグーグルです。 2015年4月のいわゆる「Mobilegeddon」アルゴリズムの更新以来、Googleは検索結果の計算でモバイル対応サイトに追加のポイントを割り当ててきました。同社は、レスポンシブデザインがモバイル最適化の好ましい方法であるという事実についてオープンにしています。 Googleウェブマスターハブからの一般的なモバイルウェブデザインの間違いに関するこのガイドをご覧になると便利な場合があります。
メディアクエリを使用して、次のような多くのレスポンシブデザイン戦術を成功させることができます。
- より大きな画面サイズにコンテンツを拡張する-たとえば、余分なコピーや画像を追加する
- 画面サイズを大きくするためのコンテンツの拡大
- 特定の最小画面幅に達した後、モバイル固有のコンテンツを非表示にする
今後は、CSSを自分で学習して作成することを意味する場合でも、Web開発者に十分な情報に基づいた指示を提供することを意味する場合でも、Webサイトやマーケティングメールを作成するときは常にレスポンシブデザインとメディアクエリを使用することをお勧めします。
今すぐ無料メンバーシップを取得-クレジットカードはまったく必要ありません
無料会員