このページでは普段スマホ対応（レスポンシブ）のサイトを作る際に記述するhtml、cssを紹介します。雛形として使ってもらってOKです。
スマホ用のhtml雛形がほしい人は自由に（自己責任で）利用してください。
目次
htmlの雛形
コード
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>雛形</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>スマホ用サイトhtmlの雛形（レスポンシブ対応）</h1>
<p>自由にコーディングしてください</p>
</body>
</html>
説明
html5形式のhtmlコードです。
ドキュメントルートに「index.html」というファイル名でhtmlファイルを作成して、上記のコードを貼り付けて利用してください。
[waku]ドキュメントルートとは？
PCやスマホなどからWEBサイトにアクセスされた際に、画面に表示するhtmlファイル等の保存場所のことです。[/waku]
ポイントは2つ。
- 「<meta name=”viewport” content=”width=device-width, initial-scale=1″>」でブラウザ画面の幅（解像度）を取得、判断してます
- 「style.css」ファイルを読み込んでいます
cssの雛形
コード
/*▼ここにスマホ用のスタイルをコーディングする*/
/*▲ここにスマホ用のスタイルをコーディングする*/
@media screen and (min-width:600px) {
/*▼ここにタブレット用のスタイルをコーディングする*/
/*▲ここにタブレット用のスタイルをコーディングする*/
}
@media screen and (min-width:1024px) {
/*▼ここにPC用のスタイルをコーディングする*/
/*▲ここにPC用のスタイルをコーディングする*/
}
@media screen and (min-width:1400px) {
/*▼ここに大画面PC用のスタイルをコーディングする*/
/*▲ここに大画面PC用のスタイルをコーディングする*/
}
説明
利用する際は、index.htmlファイルと同じ階層にstyle.cssというファイル名でcssファイルを作成し、上記コードを貼り付けて利用してください。
（htmlファイルのリンクを書き換えれば別の階層でもOK）
コードを見ると@media〜という指定があると思います。
この@media〜という部分の｛ ｝の間に、ブラウザの幅（解像度）に合わせたスタイルを記述していきます。
ちなみに、/*と*/に挟まれている内容はコメントですので、htmlに反映されません。
スタイルシートの分岐点は、仮に600px、1024px、1400pxとしてますが、すべて利用しなくても大丈夫です。
以上シンプルですが、スマホ用サイトに対応したhtml＆cssの雛形になります。
スマホに対応したLPのhtml雛形がほしい方は、下記のページを参考にしてみてください。
コメント