スマホ用のCSSのひな形覚書

スマホ用のWebサイトをPCで表示する場合は、一般的にCSSの@mediaで振り分けするのが一般的だが、max-widthの設定でもPCで表示が崩れにくいらしい。(スマホが無いのでよくわからん?)


こんな感じで使う。
すると600px以上に広がらなくなる。

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>タイトル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>

*{
  margin:0;
  padding:0;
  color:#00f;
}
.wrap{
  max-width:600px;
  margin:auto;
}
.head{background-color:#3d3;}
.main{background-color:#dfd;}
.foot{background-color:#eee;}
.p_head{font-size:32px;}
/* 画像などはwidth:100%とする事 */

</style>
</head>
<html>
<body>
<div class="wrap">
  <div class="head">
    <p class="p_head">タイトル</p>
  </div>
  <div class="main">
    <h1>H1H1H1H1H1H1H1H1</h1>
    <p>メイン、メイン、メイン、メイン、メイン、メイン、メイン、メイン、</p>
    <h2>H2H2H2H2H2H2</h2>
    <p>メイン、メイン、メイン、メイン、メイン、メイン、メイン、メイン、</p>
    <h2>H2H2H2H2H2H2</h2>
    <p>メイン、メイン、メイン、メイン、メイン、メイン、メイン、メイン、</p>
    <p>メイン、メイン、メイン、メイン、メイン、メイン、メイン、メイン、</p>
  </div>
  <div class="foot">
    <p>(c) 2016 あちあち情報局</p>
  </div>
</div>
</body>
</html>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA