SHU BLOG

NEW
お知らせ
NEW 2022.12.02 【CSS】marginの指定方法について TikTokにてショート動画公開中!!
お知らせ
NEW 2022.12.01 【WordPress】公開日と最終更新日を表示の方法を解説
お知らせ
2022.11.24 【WordPress】記事ページに表示する、しない条件分岐を解説

BLOG NEWS ブログ

TITLE

レスポンシブデザイン、メディアクエリを設定しよう!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回はレスポンシブデザイン、メディアクエリを設定しよう!
の解説になります!

こんな方に読んでほしい

  • レスポンシブデザインを学び始めた方へ
  • レスポンシブ講座Part02になります。
  • 今回はMedia Queries(メディアクエリ)について解説しております。

レスポンシブデザインとは、表示領域の幅によって見え方が変わるデザイン(Webサイトの見た目)のことを示します。
前回は、レスポンシブデザインに必須になってくるのが、meta viewportについて解説しました。
下記のviewportに関する記事を理解してPart02にいきましょう。

viewportに関する記事

viewportを設定することにより、画面幅いっぱいにコンテンツや本文を
合わせてくれます。

メディアクエリについて

メディアクエリについて

Media Queries(メディアクエリ)とは、「各デバイスに適したCSSを適用させる」ことを示します。
ただし、ある条件を満たす時だけ指定したCSSが適用されるため、指定には注意が必要になります。
書き方は以下のようになります。

基本的な記述方法

/*--CSS--*/
@media メディアのタイプ and (特定の条件){

 /*--ここに各デバイスに適したCSSを記述します*/

}
メディアのタイプ
  • all
    全てのデバイスになります。
  • screen 
    主に「screen」を指定します
    画面のあるデバイスになります。(主にPCやスマホ など)
  • print
    プリンターになります。
  • speech
    音声出力デバイスになります。

基本的に指定するのは、「screen」になります。
@media screen and (特定の条件)」の形を覚えておきましょう。

特定の条件とは、「画面幅」のことを示します。
例として、(min-width: 1025px)と指定した場合は、画面幅が1025px以上の場合という条件になります。

覚えておこう
  • min-width
    ○○○px以上だと〜という条件を指定する。
  • max-width
    ○○○px以下だと〜という条件を指定する。

ブレイクポイントについて

ブレイクポイントについて

ブレイクポイントとは、デザインが切り替わる画面幅のポイントをブレイクポイントといいます。
上記で解説した、1025pxとは、どのような意味をもつか解説していきます。

各デバイス毎のブレイクポイントについて
覚えておこう
  • スマートフォン
    大まかなサイズ: 320px〜540pxになります。
  • タブレット
    大まかなサイズ: 600px〜1024pxになります。
  • PC
    大まかなサイズ: 1025px(以上)〜になります。

数値は、大まかな端末毎のサイズになりますが、覚えておきましょう。
上記で解説した、1025pxとは、PCのみにCSSを適用させることになります。

CSSの記述方法 まとめ

先程のメディアクエリの基本的な記述方法と、ブレイクポイントを合わせてCSSを指定します。
書き方は以下のようになります。

CSSの記述方法 まとめ

/*--スマートフォン--*/
/*--メディアクエリの記述なし--*/

/*--タブレット--*/
@media screen and (min-width: 600px){
  /*--ここにタブレットに適したCSSを記述します*/
}

/*--PC--*/
@media screen and (min-width: 1025px){
  /*--ここにPCに適したCSSを記述します*/
}

ブレイクポイントについて検証

ブレイクポイントについて検証

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ブレイクポイントについて検証</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
	<p>各デバイスで文字色が変わります。</p>
</body>
</html>
/*--スマートフォン--*/
/*--メディアクエリの記述なし--*/
  p {color: green;}

/*--タブレット--*/
@media screen and (min-width: 600px){
  p {color: blue;}
}

/*--PC--*/
@media screen and (min-width: 1025px){
  p {color: red;}
}	

name="viewport"の設定を忘れないように注意しましょう。

まとめ

今回はこれで以上です。
次回も「レスポンシブに関する」記事を投稿します。

POINT
  • メディアクエリとは、「各デバイスに適したCSSを適用させる」ことを示します。
  • メディアのタイプは、主にscreenを指定します。
  • min-widthとは、○○○px以上だと〜という条件を指定する。
  • max-widthとは、○○○px以下だと〜という条件を指定する。
  • ブレイクポイントとは、デザインが切り替わる画面幅のポイントをブレイクポイントといいます。
  • スマートフォンとは、大まかなサイズ: 320px〜540pxになります。
  • タブレット:大まかなサイズ: 320px〜540pxになります。
  • スマートフォン:大まかなサイズ: 600px〜1024pxになります。
  • PC:大まかなサイズ: 1025px(以上)〜になります。
  • viewportの設定を忘れないように注意しましょう。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

HP

お助けコネクト

神奈川県を中心に不用品回収・粗大ゴミ回収・遺品整理・ゴミ屋敷片付け・家具の移動 など
なんでもやります!!お気軽にご相談ください。詳細はコチラから

page_top