【レスポンシブ】入門

概要
1. ディバイス単位にcssを分ける場合
2. cssを1ファイルにする場合
内容

概要

レスポンシブデザインで、PC、タブレット、スマホで異なるデザインでページを表示します。

htmlにviewportを記述します。
cssを各画面の大きさ単位に記述します。

ディバイス単位にcssを分ける場合

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link href="./design.css" rel="stylesheet" type="text/css">


/*　スマホ対応：画面サイズが480pxまでこのファイルのスタイルが適用される。*/
<link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">

/* スマホ対応・タブレット対応：画面サイズ480pxから1024pxまではこのファイルのスタイルが適用される。 */
<link rel="stylesheet" href="medium.css" media="screen and (min-width:480px) and (max-width:1024px)"> 

/* PC対応 : 画面サイズ1024px以上はこのファイルはスタイルが適用される */
<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)">

</head>

～　省略　～

cssを1ファイルにする場合

htmlにviewportを記述します。
htmlにstylesheetをインクルードします。
cssに記述します。

@media screen and (min-width:480px) { 
    /*　画面サイズが480pxからはここを読み込む　*/
p { color:#ededed;}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/
p {}
}
@media screen and (min-width:1024px) {
    /*　画面サイズが1024pxからはここを読み込む　*/
 
}

内容

PCとスマホ対応のcssです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link href="./design.css" rel="stylesheet" type="text/css">
</head>
<body>
	<main>
		<p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
		<div class="imgarea"></div>
	</main>
	<aside>
		<ul>
			<li>テキスト1</li>
			<li>テキスト2</li>
			<li>テキスト3</li>
		</ul>
	</aside>
</body>
</html>

main {
	width: 70%;
	display: inline-block;
	vertical-align: top;
}
 
aside {
	width: calc(30% - 26px);
	display: inline-block;
	margin-left: 20px;
	box-sizing: border-box;
	border: solid 1px;
}
 
p {
	line-height: 2;
	width: 60%;
	display: inline-block;
	padding-right: 10px;
	box-sizing: border-box;
	vertical-align: top;
	margin: 0;
}
 
.imgarea {
	height: 150px;
	width: calc(40% - 6px);
	background-color: #ccc;
	display: inline-block;
}


@media screen and (max-width:480px) {
 
	/*　画面サイズが480px以下の場合ここの記述が適用される　*/
	p {
		width: 100%;
		margin: 0px 0 10px 0;
	}
 
	main {
		width: 100%;
	}
 
	.imgarea {
		width: 100%;
	}
 
	aside {
		width: 100%;
		margin: 30px 0 0 0;
	}
}