ウェブサイトをレスポンシブデザインにする方法【コードあり】
ウェブサイトをマルチデバイスに対応するための手法「レスポンシブデザイン」について、Youtubeで解説しています。
2ステップで簡単にできるのでよければ覚えてみてください。
動画内で使ったコードは以下になります。
HTML
<html>
<head>
<title>レスポンシブデザインの練習</title>
<link rel="stylesheet" type="text/css" href="css/format.css">
<meta name="viewport" content="width=decice-width,intial-scale=1.0,maximum-scale=1.0,user-scalable=0">
</head>
<body>
<h1>レスポンシブデザインの練習</h1>
<p>Responsive Web Design Basics</p>
</body>
</html>
CSS
body {
padding:50px;
text-align: center;
background: #244064;
color: #fff;
}
h1 {
margin-bottom:10px;
}
p {
margin: 0;
}
@media screen and (max-width:400px) {
body {
padding:50px;
text-align: center;
background: #000000;
color: #fff;
}
h1 {
font-size: 18px;
}
p {
display: none;
}
}
@media screen and (min-width:1000px) {
body {
background: #ffffff;
color: #000000;
}
}