【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

レスポンシブデザインの基礎、CSSメディアクエリをおさらい

レスポンシブデザインの基礎、CSSメディアクエリをおさらい

メディアクエリ(Media Queries)とは?

サポート部の本田です。朝晩はすっかり気温も下がり、過ごしやすくなってきましたね。

今回はレスポンシブデザインでサイトを構築する上では欠かすことのできない、メディアクエリ(Media Queries)について書いてみます。

そもそもメディアクエリとは、スクリーンサイズに応じてスタイル(CSS)を切り替える機能になります。Google開発者サイトにも以下の記述があります。

メディア クエリは、CSS スタイルに適用できるシンプルなフィルタです。メディア クエリを使用すると、デバイスの種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいてスタイルを容易に変更できるようになります。
CSS メディア クエリを使用してレスポンシブにする

今回はスクリーンサイズによってリストが変化するCSSを適用したメディアクエリの使い方を説明していきたいと思います。

デモサイト

上記デモサイトにアクセスしてみて、ブラウザの幅を縮めてみてください。

スクリーンサイズが962px以上となるとリストが4列となっています。
次にスクリーンサイズが642pxから959pxですと、リストが2列となっています。
そして最後にスクリーンサイズが639px以下になるとリストが1列表示となります。

使っているHTMLのコードは一つですが、スクリーンサイズによってメディアクエリを使い、スタイルを切り替えて列の数を調整しています。

では今回のデモサイトで使用したコードをご紹介します。

HTML

まずはHTMLです。

<ul>
<li class="li01"><p>リスト</p></li>
<li class="li02"><p>リスト</p></li>
<li class="li03"><p>リスト</p></li>
<li class="li04"><p>リスト</p></li>
</ul>

このようにリストとして使うHTMLは1つです。

CSS

次にCSSです。メディアクエリを使って適用させるCSSを切り替えています。

<style>
/*全スクリーンサイズで共通のCSS*/
li {
    border-radius: 10px;
    color: white;
    border-top: 2px solid rgba(255,255,255,0.2);
    border-bottom: 3px solid rgba(0,0,0,0.3);
}
li.li01 {
    background: #f44336;
}
li.li02 {
    background: #2196F3;
}
li.li03 {
    background: #4CAF50;
}
li.li04 {
    background: #FFC107;
}
/* スクリーンが962px以上のとき以下の下記CSSを適用 */
@media screen and (min-width: 961px) {
li {
    display: inline-block;
    width: 24%;
}
}
 
/* スクリーンが642pxから959pxの際に下記CSSを適用  */
@media only screen and (min-width: 641px) and (max-width: 960px) {
li {
    display: inline-block;
    width: 49%;
}
}
 
/* スクリーンがpx以上のとき以下のCSSを適用 */
@media screen and (max-width: 640px) {
li {
    width: 100%;
}
}
</style>

このように、

@media screen and (min-width: 961px)

や、

@media only screen and (min-width: 641px) and (max-width: 960px)

のように、@mediaを利用して、スクリーンの幅を指定した後に、そのスクリーンサイズの時のスタイルを調整していきます。

終わりに

このようにスクリーンサイズによってスタイルを変更することができるメディアクエリは、レスポンシブウェブデザインでサイトを構築する上では欠かすことの出来ない技術となります。

新しい技術ではないですが、レスポンシブデザインの基本として覚えておいて損はないでしょう。

本田

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+