- HOME
- > BLOG CATEGORY
- レスポンシブデザイン、メディアクエリを設定しよう!
- お知らせ
- NEW 2024.10.05 【CSS】画像を左右交互に配置について解説!
- お知らせ
- 2024.05.16 【CSS】グラデーション色々なパターンを解説!
- お知らせ
- 2024.05.15 【WordPress】親カテゴリーの子カテゴリー一覧を表示する方法
こんな方に読んでほしい
レスポンシブデザインとは、表示領域の幅によって見え方が変わるデザイン(Webサイトの見た目)のことを示します。
前回は、レスポンシブデザインに必須になってくるのが、meta viewport
について解説しました。
下記のviewportに関する記事を理解してPart02にいきましょう。
viewportを設定することにより、画面幅いっぱいにコンテンツや本文を
合わせてくれます。
Media Queries(メディアクエリ)とは、「各デバイスに適したCSSを適用させる」ことを示します。
ただし、ある条件を満たす時だけ指定したCSSが適用されるため、指定には注意が必要になります。
書き方は以下のようになります。
基本的な記述方法
/*--CSS--*/
@media メディアのタイプ and (特定の条件){
/*--ここに各デバイスに適したCSSを記述します*/
}
基本的に指定するのは、「screen」になります。
「@media screen and (特定の条件)」の形を覚えておきましょう。
特定の条件とは、「画面幅」のことを示します。
例として、(min-width: 1025px)と指定した場合は、画面幅が1025px以上の場合という条件になります。
ブレイクポイントとは、デザインが切り替わる画面幅のポイントをブレイクポイントといいます。
上記で解説した、1025pxとは、どのような意味をもつか解説していきます。
数値は、大まかな端末毎のサイズになりますが、覚えておきましょう。
上記で解説した、1025pxとは、PCのみに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"
の設定を忘れないように注意しましょう。
今回はこれで以上です。
次回も「レスポンシブに関する」記事を投稿します。
min-width
とは、○○○px以上だと〜という条件を指定する。max-width
とは、○○○px以下だと〜という条件を指定する。viewport
の設定を忘れないように注意しましょう。2024.10.05
2024.05.15
2024.05.14
2024.05.09
2024.10.05
2024.05.15
2024.05.14
2024.05.09
2024.05.09
2024.05.09
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2024 shu-naka-blog