レスポンシブサイト作成のCSS記述【メディアクエリの書き方】

2023-01-132023-01-25

レスポンシブサイトとは

同じURLでPC、タブレット、スマホのデバイス幅に合わせたレイアウトを表示させるようにすることです。デバイスごとにURLを変える方法もありますが、レスポンシブはGoogleにも推奨されているWebデザインです。

メディアクエリとは

「画面幅に合わせたCSSを適応させるコード、「CSSを適応させる画面設定を表すコード」のことです。

レスポンシブサイト作成の基本

ブレイクポイントを決める。
HTMLのheadにviewportの記述をする。
CSSに変更点を記述と差し替え画像を入れる。

ブレイクポイントとは

画面幅に合わせてCSSを切り替える時に使用する、切り替えポイントのことです。

スマホなら320px〜480px、タブレットなら768px〜1023px（横）、PCは1024px〜といった設定が多いよう。

にゃんこ2

今回は、PCとスマホで切り替えポイントを600pxにしたにゃ

HTMLのhead内に記述

viewportの記述をする

headに記述するコード

<meta name="viewport" content="width=device-width, initial-scale=1.0">

head全体表示（例）

<head>
<meta charset="utf-8">
<title>見本サイト</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>

※複数に分けて記述も可能

<link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">/*　画面サイズが480pxまでこのファイルのスタイルが適用される。*/
<link rel="stylesheet" href="medium.css" media="screen and (min-width:480px) and (max-width:1024px)"> /* 画面サイズ480pxから1024pxまではこのファイルのスタイルが適用される。 */
<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)">/* 画面サイズ

CSSの記述

画面のサイズによって画像の幅を小さくする

img{
    max-width: 100%;
}

特定のデバイスのみで表示

スマホの時だけ表示

@media (min-width: 599px){
.sp_only{
    display: none;
}
}

PCの時だけ表示

@media (max-width: 600px){
.pc_only{
    display: none;
}
}

※文中の「screen」は省略可能のため上記で記入

@media screen and  (max-width: 600px){
.pc_only{
    display: none;
}
}

特定のデバイスの場合だけに適応

SPの時だけ適応

（例）SPの時にh2の文字サイズを1.5remにする。

@media (min-width: 599px){
　　h2{
       font-size: 1.5rem; 
    }
}

PCの時だけ適応

（例）PCのの時に背景色を指定する。

@media (max-width: 600px){
    body{
        background-color: #8c8cbd;/* 背景色      */
    }
}

※タブレットの場合はこのように記述

@media screen and (min-width:768px) and ( max-width:1024px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/

Retinaディスプレイ

※Retinaディスプレイは2　通常のディスプレイは1となります。

/* Retinaディスプレイの場合に適用される */
@media screen and (-webkit-min-device-pixel-ratio:2){
  p {font-size: 1.2em; }  
}

縦向き横向き

//縦向きの場合
@media screen and (orientation:portrait){
  p {font-size: 1em; }  
}
//横向きの場合
@media screen and (orientation:landscape){
  p {font-size: 1.2em; }  
}