メディアクエリを使ってレスポンシブデザインの作成方法を学習します。
フルードグリッドやフルードイメージの復習からブレイクポイントなど、レスポンシブデザインに必要なことを理解するのが目的です。
Web制作
chap16（フォルダを作成）
1-1.html（作成するファイル）
sp.css（作成するファイル）
tab.css（作成するファイル）
pc.css（作成するファイル）
imagesフォルダ（作成するフォルダ）
logo.png（nyanroomフォルダ内からコピー）
neko_1.jpg（nyanroomフォルダ内からコピー）
練習用のHTMLファイルを作成
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブデザインの練習</title>
<link rel="stylesheet" href="sp.css">
</head>
<body>
<div>
<header>ヘッダー</header>
<nav>ナビ</nav>
<aside>サイドバー</aside>
<main>メイン</main>
<footer>フッター</footer>
</div>
</body>
</html>
VScodeでHTMLを保存してから、1行目に「html:5」と入力して作成しましょう！
「sp.css」ファイルを作成
レイアウトとフルードグリッド
今回は練習なのでリセットCSSを使わず、簡易的にリセットするために、bodyセレクタでマージンをリセットしています。
ブラウザのプレビューはスマホサイズで確認できます
body{
margin: 0;
}
div{
display: grid;
grid-template-rows: 20vh 120vh 20vh 10vh;
grid-template-columns: 100%;
}
header{
grid-row:1/2 ;
grid-column: 1/2;
background-color:rgb(175,210,230);
}
nav{
grid-row: 3/4;
grid-column: 1/2;
background-color:rgb(120,210,110);
}
aside{
display: none;
background-color:rgb(255,230,175);
}
main{
grid-row: 2/3;
grid-column: 1/2;
background-color:rgb(255,205,200);
}
footer{
grid-row: 4/5;
grid-column: 1/2;
background-color:rgb(175,210,230);
}ブラウザでスマートフォン画面の表示
レスポンシブデザインは、画面やウィンドウの大きさによってデザインを切り替えるため、ブラウザの開発者ツールという機能を使ってプレビューします。
基本どのブラウザでも同じなので、ショートカットキーを使うと便利です
Windowsのショートカットキーは、[ ctrl ] + [ shift ] + [ i ]
Macのショートカットキーは、[ ⌘ ] + [ option ] + [ i ]
WindowsもMacも同じ、ブラウザの右上にある「⋮（3点リーダー）」のメニューボタンから、[その他ツール] > [デベロッパーツール]をクリックします。
WindowsもMacも同じ、ブラウザの右上にある「…（3点リーダー）」のメニューボタンから、[その他ツール] > [開発者ツール]をクリックします。
Safariは、環境設定から「開発」メニューを表示する設定が必要になります。
詳しくは下のページを参照してください。
WindowsもMacも同じ、ブラウザの右上にある「三」のメニューボタンから、[その他のツール] > [ウェブ開発ツール]をクリックします。
フルードイメージ
<header>に<img>画像、<main>に背景画像を表示します。
画像ファイルは「nyanroomフォルダ」からコピーしてきましょう。
imgセレクタのmax-widthを100%にすると画像が大きすぎるので、200%にしています
<header>
<img src="images/logo.png" alt="にゃんルームのロゴ">
</header>img{
width: 100%;
max-width: 200px;
height: auto;
}
main{
grid-row: 2/3;
grid-column: 1/2;
background-color:rgb(255,205,200);
background-image: url(images/neko_1.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}メディアクエリ
ブレイクポイントごとにCSSを作成します。
メディアクエリは、条件セレクタになっているので記述が少し特殊ですが、{ }の部分と、半角スペースで区切ることに注意すれば問題ありません。
@media screen and (min-width:560px){
}min-widthの値にブレイクポイントを記述します。
これで「画面が◯◯px以上の時」という条件のセレクタが完成します。
{ と } の間にセレクタ { プロパティ:値; } でデザインしましょう。
タブレット用のCSSを作成しメディアクエリを記述する
タブレット用のデザインに切り替えるブレイクポイントは560pxにしています。
デザインは、headerセレクタのロゴを中央揃えにし、背景色を違う色に変えます。
作成が終わったら、HTMLヘ<link>で参照しておきましょう。
@media screen and (min-width:560px){
header{
text-align: center;
background-color: rgb(0,0,0);
}
}<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブデザインの練習</title>
<link rel="stylesheet" href="sp.css">
<link rel="stylesheet" href="tab.css">
</head>PC用のCSSを作成しメディアクエリを記述する
PC用のデザインに切り替えるブレイクポイントは960pxにしています。
デザインは、headerセレクタの背景色を違う色に変えます。
作成が終わったら、HTMLヘ<link>で参照しておきましょう。
@media screen and (min-width:960px) {
header{
background-color: rgb(255,240,235);
}
}<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブデザインの練習</title>
<link rel="stylesheet" href="sp.css">
<link rel="stylesheet" href="tab.css">
<link rel="stylesheet" href="pc.css">
</head><link>のCSSを参照する順番は、モバイルファーストで !
これ重要 !!
ブラウザで確認する時は、機種名を変更するか「レスポンシブ」で大きさを変えて確認してみましょう