サムネイル

IT

【初心者向け】CSSのメディアクエリの書き方【レスポンシブ対応】

マスミ
今回はレスポンシブ対応のためにCSSでのメディアクエリの書き方をご紹介します!
初心者向けに基本的なことのみ簡単にまとめていますので読みやすいはず!
CSSを勉強したてだと忘れやすいところだね!
いぬくん

今回はHTMLとCSSを勉強し始めたての方向けに書いてますので、

メディアクエリってなんだったけ?という方にも優しい記事です。

ご興味のある方は是非さいごまでご覧ください!

 

この記事でスッキリする疑問

  • メディアクエリ・レスポンシブって何?
  • 参考になるブレイクポイントは?
  • 参考になるコードを知りたい!

 

メディアクエリ、レスポンシブって何?

疑問

 

メディアクエリを説明するに当たってまず、レスポンシブの知識が必要になってきますので、解説いたします!

レスポンシブって何?

 

説明

 

レスポンシブはこのように画面幅によって自動的にサイトの見た目を切り替えてくれる便利な加工方法のことです!

マスミ
簡易的なLPなどではレスポンシブにしていないこともありますが、企業のHPなどではレスポンシブになっているのは当たり前になってきていますね!

 

メディアクエリって何?

メディアクエリとは、CSSでの表現方法の名称です。

CSS3から登場したもので、先ほど紹介したCSSでのレスポンシブを実装するために用います。

 

実際に見てみましょう!

 index.html
<link rel="stylesheet" href="sample.css" type="text/css" media="screen and (min-width:600px)">

head内にこちらを記述することでsample.cssのCSSは600px以上の場合は適応されるという表現になります。

この記述の中で「media」という属性があります。

こちらで適応するメディアを指定し、screen(ディスプレイ)やtv(テレビ)、all(すべて)などが指定出来ますが、現代ではスマホの画面サイズが多岐にわたっているため、「min-width:600px」などでディスプレイの幅を指定してCSSの適用範囲を調整します。

 

メディアクエリってどうやって書くの?

 

マスミ
メディアクエリについて分かったと思いますので具体的にどのように記述していくのか解説いたします!

head内に<link>を使って記述する方法と、CSSファイル内で記述する方法の2種類がありますのでご紹介します!

 

head内に<link>を使って記述する方法

 index.html
<link rel="stylesheet" href="sample1.css" type="text/css" media="screen and (min-width:300px)"
<link rel="stylesheet" href="sample2.css" type="text/css" media="screen and (min-width:600px)"

<link>を使ってこちらの例では画面幅が300px〜599pxの場合にsample1.cssを適用し、600px以上の場合にsample2.cssを適用する記述になります。

しかしこれですと画面幅ごとにCSSファイルをわけないといけないというデメリットがあります。

sample1.cssとsample2.cssに共通する記述がある場合にわざわざ分けるのが面倒なので、次に解説するCSSファイル内にメディアクエリを記述する方法がおすすめです!

 

CSSファイル内で記述する方法

 style.css
@media screen and (min-width:300px){
  /*300px以上で適用する内容*/
}
@media screen and (min-width:600px){
  /*600px以上で適用する内容*/
}

このように記述することによって一つのCSSファイルで2パターンのCSSの書き分けを行えることが出来ました!

 

参考になるコード

では実際にHTMLファイルとCSSファイルで記述した例を記述します!

 index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>メディアクエリ</title>    <link rel="stylesheet" type="text/css" href="style.css">   </head>   <body>     <h2>見出し</h2>     <ul>       <li>300px以上で細字</li>       <li>600px以上から太字</li>     </ul>   </body> </html>

 style.css
@media screen and (min-width:300px){
  body{
    font-weight: lighter;
  }
}
@media screen and (min-width:600px){
  body{
    font-weight: bold;
  }
}

上記のコードで300px以上で文字が細字になりますが600pxを超えると太字になります!

 

まとめ

以上がレスポンシブ対応するためのCSSのメディアクエリの書き方解説でした!

WordPressで追加CSSを記述した際にこれを使うと、簡単にレスポンシブの加工ができるのでCSSファイルを書き換えるのが怖い方もおすすめです!

それでは、是非ご活用くださいまで!

-IT
-,

© 2021 IKINARI・ノマド