スマホサイトのhtml雛形&作り方「かんたんに使える」

このページでは普段スマホ対応(レスポンシブ)のサイトを作る際に記述する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ファイルを作成して、上記のコードを貼り付けて利用してください。

ドキュメントルートとは?
PCやスマホなどからWEBサイトにアクセスされた際に、画面に表示するhtmlファイル等の保存場所のことです。

ポイントは2つ。

  1. 「<meta name=”viewport” content=”width=device-width, initial-scale=1″>」でブラウザ画面の幅(解像度)を取得、判断してます
  2. 「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雛形がほしい方は、下記のページを参考にしてみてください。

サンプルLP

 

Category: Webサイト作成Tags: csshtml

コメントを残す

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

3 × 4 =