ECサイト構築・リニューアルならクラウド型ECサイト構築ASPサービスサイトへ
資料請求
TOP

CATEGORY

SERVICE

レスポンシブデザインの基礎、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サイト構築ASP

ECサイト構築、リニューアルを2000社以上支援してきた知見から
ECの専門家として御社のEC事業成長をサポートします。

  • 導入実績2000社以上


    導入実績

  • 注文単価増加率114%

    導入1年後の
    注文単価
    増加率

  • 売上成長率128%

    導入1年後の
    売上成長率

  • EC支援歴20年


    EC支援歴

         

レスポンシブWebデザインカテゴリの最新記事