スタイルシートサンプル1

スマートフォンとパソコンでスタイルシートを変更

スマートフォンは画面が小さく、パソコン用に作ったサイトですと、見にくくなってしまいます。
スマートフォンとパソコンで、スタイルシートを変えています。

画面の幅が650以下はphone.css、651以上はpc.cssで表示するようにしています。
スマートフォンでは自動で縮小してしまうので、viewportの行を追加して、縮小しないようにしています。
この方法を使えば、パソコンとスマートフォンのページを同時に作れます。

<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="phone.css" type="text/css" media="screen and (min-width: 0px) and (max-width: 650px)">
<link rel="stylesheet" href="pc.css" type="text/css" media="screen and (min-width: 651px)">

パソコン用スタイルシート

pc.css
body{
	width:1100px;
	padding:0px;
	line-height:120%;
}

img{
	border: 0px;
}

h1{
	padding:5px;
	margin:0px;
}
h3{
	background-color:#7777ff;
	padding:5px;
}

#h1{
	width:1000px;
	padding:10px;
}

#l1{
	width:700px;
	padding:10px;
	float:left;
}

#r1{
	width:300px;
	padding:10px;
	float:left;
}

#box1{
	padding:10px;
}

スマートフォン用スタイルシート

phone.css
body{
	line-height:120%;
}

H1{
	line-height:120%;
}

メニュー

  1. サンプル1
  2. サンプル2