【CSS】初心者WEBデザイナーのためのレスポンシブメディアクエリの基本的な書き方をまとめてみた

こんにちは!
WEBデザインのコーディングでするうえで必須なものといえば、メディアクエリです。
スマホ用のサイトが欠かせない世の中になり、5年以上経ちますが、今でもスマホの勢いは衰えません。
メディアクエリってなんとなく知って、「@medeia screen and …」とか書いてますが、意味を全然知らないと自分自身も危機感を感じました。
今回は、レスポンシブで絶対にお世話になるCSSの メディアクエリについて調べたので、基本的な書き方や実務でよく使用する方法についてまとめていきます。

メディアクエリとは

メディアクエリとは、Webサイトのスタイル(見栄え)を記述するCSSの仕様の一つです。
表示された画面環境(画面の大きさ)に応じて適用するスタイルを切り替える機能で、一つのページで複数の異なる表示環境に対応するレスポンシブWebデザインを実現することができます。

メディアクエリの初期設定

ビューポート設定

以下タグをの中に記述します。

content=”width=device-width”

こちらを設定することでページの中に仮想的なウインドウが作られ、viewportの幅は端末やブラウザのごとに異なるようになります。

メディアクエリの使い方

メディアクエリを使って、デバイスによってCSSを変えたい時、基本的に以下の3通りの使い方があります。

  • ■HTMLでCSSファイルを読み込むlinkタグにmedia属性を記述する
  • ■CSS内で@importする時に記述する
  • ■CSS内で@mediaを記述する

HTMLでCSSファイルを読み込むlinkタグにmedia属性を記述する

例:横幅768px以下(ipadサイズ)のデバイスでのみ mobile.css というファイルを読み込む場合

CSS内で@importする時に記述する

例:横幅768px以下のデバイスでのみ mobile.css というファイルをインポートする場合

CSS内で@mediaを記述する

例:横幅768px以下のデバイスでのみdivタグのwidthを上書きする

応用編:メディアクエリを重ねて使う

「and」を使う

通常の論理演算の 「A and B」の意味、「AかつB」の「かつ」と同じものです。

例:横幅が320px 以上かつ768px 以下の場合

「, 」を使う

論理演算のorに当たります。「A or B」の意味、「AまたはB」の「または」と同じ意味です。

例:横幅が480px以下、または1200px以上の場合

まとめ

メディアクエリを使用するにあたり、初心者の方にもこれを使用すれば大丈夫というものをまとめました。
調べれば調べるほど奥が深い分野でもありますので、学ぶには根気が入りますが、実務では必須となりますので、基礎部分だけでも頭の中に入れておくのが大切です。

おすすめ記事

【JavaScript】簡単に設置できる郵便番号検索『ajaxzip3』使い方をご紹介!せっかく作成した「お問い合わせフォーム」がなかなか使われず、がっかりしている人はいませんか?フォームを使用してもらうためにはユーザー目線で作成することが必要になります。「こんな機能があったら入力が便利なのに…」と客観的に観察することでいかに使いやすいフォームにするか考えることが重要です。今回は「郵便番号を入力したら住所が自動表示される」機能をご紹介します。

【JavaScript】割り算の「切り捨て」「切り上げ」「四捨五入」についてまとめJavaScriptで割り算の「切り捨て」「切り上げ」「四捨五入」についてご紹介します。JSを使って計算をするというのはWEBデザイナーなら誰しも行いますよね。
今は使わなくてもいずれ使う場面が出てくると思います。
知っていて損はないのでこの機会にぜひ覚えましょうー!

【JavaScript】全ての文字を置換する方法は「replace」と「正規表現」今回はJavaScriptで全ての文字を置換する方法についてご紹介いたします。置換の基本は「replace」しかし、ただreplaceをするだけでは全ての文字は置換されないんですね。そこで全部の文字を置換するには「正規表現」を使いましょう!!