見出し画像

ホームページを作ろ！--ブレークポイント！

donguri

まず基本の形

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>	
　　　　　　　　　//　cssを記入	 	
</style>
		
</head>
<body>

<div class="hel">Hello	</div>
	
</body>
</html>

そして、CSSですが、

@media screen and (max-width: 480px) { }を付け加えたものを書きます。

<style>	
	body{
	margin: 0px;
	font-family: sans-serif;
	}
	 
/* ----------------------------------------------------------- */		 
　　　 @media screen and (max-width: 480px) { 
			 
	.hel{
	color: red;

	}
		 	
</style>

div要素をbody内にclass="hel"を指定しています。

結果、ブラウザの幅を480pxより小さくすると、メディアクエリ、@mediaで指定している、color: red; が適応されます。

Break pointを設定してみました(max-width: 480px)。

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