スマホ対応サイトの作り方
HTML5の基本構成について説明させていただきます
まず基本となる記述は次の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="shift_jis" />
<title>タイトル</title>
<meta name="viewport" content="width=device-width" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" type="text/css" href="/style1.css">
</head>
<body>
<p>本文<p/>
</body>
</html>
DOCTYPEの宣言
<!DOCTYPE html>
このドキュメントが、どのような仕様のHTMLドキュメントであるかを宣言します。
<!DOCTYPE html>と書くことで、HTML5のドキュメントとしてブラウザに処理されます。
以前(X)HTMLよりも記述が短くなり覚えるのも楽です
五語の指定
<html lang="ja">
このドキュメントが何の五語で書かれているかを指定します。日本語の場合は「ja」、英語であれば「en」と指定します。
文字コードの指定
<meta charset="shift_jis" />
HTML5では文字コードの指定も短く書くことができます。文字コードには「shift_jis」や「uft-8」などがありますので、サイト環境に合わせて指定するようにしましょう。
タイトルの指定
<title>タイトル</title>
検索した際や、お気に入りに登録した時に表示されるサイトのタイトルです。表示される文字数には限度がありますので、なるべく短くまとめるようにしましょう。
横幅の指定
<meta name="viewport" content="width=device-width" />
画面の横幅を指定します。iPhoneの場合縦向きの状態の横幅は320pxですので、「width=320px」と書く場合もありますが、「width=device-width」と書くことで画面サイズが320px以外のデバイスでも最適に表示させる事ができます。
電話番号認識の無効化
<meta name="format-detection" content="telephone=no" />
お気に入り用のアイコン
<link rel="apple-touch-icon" href="i画像" />
ちょっと忙しいので、次回更新の12月10日に解りやすく書きます。