viewportの使い方を教えてほしいです。
解決したいこと
html cssでviewportの設定をしたい
webエンジニアの研修の自主学習で簡単な画像の組み合わせのページを作っているのですが、viewportの設定(?)の仕方がわからず困っております。
いろいろなページを参考に書いてみたのですが、理解力と検索力が足らず質問させていただいております。
htmlもcssも右も左もわからない初級者以下の質問となります。
ご助力いただけますと幸いです。
発生している問題・エラー
chromeでプレビューすると何も表示されなくなってしまう
例）
白紙のページが表示されてしまう
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
該当するソースコード
htmlのコードです
<!DOCTYPE html>
<html lang="ja">
<head>
<title>PC</title>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<link rel="stylesheet" href="Puzzle_01_PC.css">
</head>
<body>
<div class="blue"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="red"></div>
</body>
</html>
cssのコードです
@media screen and (min-width: 786px) {
.blue{
height: 100px;
width: 400px;
background-color: #739aff;
}
.orange{
height: 250px;
width: 150px;
background-color: #ffa473;
float: left;
}
.yellow{
height: 250px;
width: 250px;
background-color: #e6ff73;
float: left;
}
.red{
height: 100px;
width: 400px;
background-color: #ff7376;
clear: left;
}
}
例）
def greet
puts Hello World
end
自分で試したこと
meta name="viewport"と@ media screenを両方とも入れていいものなのか、わからず片方ずつだけにしてみたりいろいろと試してみたのですが上手くいきませんでした。
0
