レスポンシブWebデザインの概要について学習します。
レスポンシブWebデザインで必須となる知識を知ることが目的です。
viewportメタタグの記述
<title>の上の行に記述しておくと良いでしょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>保護猫カフェ/にゃんルーム</title>フルードイメージの設定
フォアグラウンド（前面）イメージ
<img>の画像を拡大・縮小表示するCSSの設定です。
img{
width: 100%;
max-width: 100%;
height: auto;
}max-widthの値を「px値」にすると最大◯pxまで拡大縮小、min-widthを使って「px値」にすると最小◯pxまで拡大縮小となります。
バックグラウンド（背面）イメージ
background-imageプロパティの画像を拡大・縮小表示するCSSです。
セレクタ{
background-image: url(ファイル名);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}メディアクエリの設定
任意の画面（ウィンドウ）サイズで、デザインを切り替えるための条件セレクタの一つで、画面を切り替えるタイミングのサイズをブレイクポイントと呼びます。
@media screen and (min-width:560px){
p{
color:red;
}
}See the Pen 14-3 by Rayout-gw (@Rayout-gw) on CodePen.
「画面（ウィンドウ）の大きさが560px〜の時、<p>の文字の色を赤色にする」となります。