Queries)とは?サポート部の本田です。朝晩はすっかり気温も下がり、過ごしやすくなってきましたね。Queries)について書いてみます。そもそもメディアクエリとは、スクリーンサイズに応じてスタイル(CSS)を切り替える機能になります。Google開発者サイトにも以下の記述があります。スタイルに適用できるシンプルなフィルタです。クエリを使用すると、デバイスの種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいてスタイルを容易に変更できるようになります。クエリを使用してレスポンシブにする今回はスクリーンサイズによってリストが変化するCSSを適用したメディアクエリの使い方を説明していきたいと思います。デモサイト上記デモサイトにアクセスしてみて、ブラウザの幅を縮めてみてください。スクリーンサイズが962px以上となるとリストが4列となっています。次にスクリーンサイズが642pxから959pxですと、リストが2列となっています。最後にスクリーンサイズが639px以下になるとリストが1列表示となります。使っているHTMLのコードは一つですが、スクリーンサイズによってメディアクエリを使い、スタイルを切り替えて列の数を調整しています。今回のデモサイトで使用したコードをご紹介します。HTMLまずはHTMLです。class="li04"><p>リスト</p></li></ul>このようにリストとして使うHTMLは1つです。CSS次にCSSです。メディアクエリを使って適用させるCSSを切り替えています。960px)のように、@mediaを利用して、スクリーンの幅を指定した後に、そのスクリーンサイズの時のスタイルを調整していきます。終わりにこのようにスクリーンサイズによってスタイルを変更することができるメディアクエリは、レスポンシブウェブデザインでサイトを構築する上では欠かすことの出来ない技術となります。新しい技術ではないですが、レスポンシブデザインの基本として覚えておいて損はないでしょう。商品の販売に“夢中”になれるクラウド型ECサイト構築ASPECサイト構築、リニューアルを2000社以上支援してきた知見からECの専門家として御社のEC事業成長をサポートします。効果検証を実施し、詳細レポートを行います1.2.1.[...]タブレットユーザーの操作性で、ECサイトの購入率は大きく変わる。2013.06.07海外のサイトでは最近見かけるようになったレスポンシブWebデザインで構築されたECサイト。2013.09.24みなさんこんにちは、ロックウェーブの岡本です。今週月曜日も最新の市場動向や調査結果、キャリア各社の動きなどをご紹介いたします。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。aiship_rモバイルファースト・マーケティングラボおすすめRANKINGECサイトの構築方法を徹底比較。Mapをレスポンシブ表示させる方法2019.01.11SEOに強いECサイトを構築する4つのポイント2018.10.01Googleモバイルファーストインデックス対策はレスポンシブが最適な理由クラウドECのサイト構築はaiship-カスタマイズも可能なカートASP累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。モバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。-サブスク対応ASP国内唯一のレンタル・サブスクECサイト構築専用のクラウド型カートシステムで、レンタルECの運営に必要な、直感的にレンタル期間を選択できるカレンダー表示や日毎の在庫/スケジュール管理などの機能を全て標準搭載しており、ドレス/着物/アウトドア用品/バッグ/家具等あらゆる業種のレンタルECサイト構築に完全対応。継続課金のサブスクリプションにも対応しているため幅広いサービスに最適で、導入200社以上の実績。毎月無償バージョンアップを実施しているため常に最新の状態でレンタル・サブスクECサイトを運用可能。新規立ち上げからシステムのリプレイスまで月額29,800円より実現できます。