見出し画像

ウェブサイトをレスポンシブデザインにする方法【コードあり】

Kawai Shotaro / 河相勝太郎

ウェブサイトをマルチデバイスに対応するための手法「レスポンシブデザイン」について、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;
	}
}

この記事が気に入ったらサポートをしてみませんか？