スマホ対応HP作り方

HTML5の基本構成

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="uft-8" />
<title>タイトル</title>
<meta name="viewport" content="width=device-width" />
<meta name="format-detection" content="telephone=no" />
<meta name="description" content="コンテンツ内容 " />
<link rel="apple-touch-icon" href="画像.png" />
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

↓コピーする↓

DOCTYPEの宣言

<!DOCTYPE html>

このドキュメントが、どのような仕様のHTMLドキュメントであるかを宣言します。
「!DOCTYPE html」と書くことで、HTML5のドキュメントとしてブラウザに処理されます。
以前の(X)HTMLよりも記述が短くなり覚えるのも楽です。

五語の指定

<html lang="ja">

このドキュメントが何の五語で書かれているかを指定します。日本語の場合は「ja」、英語であれば「en」と指定します。

文字コードの指定

<meta charset="utf-8" />

HTML5では文字コードの指定も短く書く事ができます。文字コードには「shift_jis」や「uft-8」などがありますので、HP環境に合わせて指定するようにしましょう。

タイトルの指定

<title>タイトル</title>

検索した際や、お気に入りに登録した時に表示されるHPのタイトルです。表示される文字数には限度がありますので、なるべく短くまとめるようにしましょう。

横幅の指定

<meta name="viewport" content="width=device-width" />

画面の横幅を指定します。iPhoneの場合縦向きの状態の横幅は320pxですので、「width=320px」と書く場合もありますが、「width=device-width」と書く事で画面サイズが320px以外のデバイスでも最適に表示させる事ができます。

電話番号認識の無効化

<meta name="format-detection" content="telephone=no" />

Mobile Safariにはハイフンで繋がれた数字や、連続した文字を電話番号などの連絡先と判断する機能があります。その為、「content="telephone=no」と指定する事でその機能を無効にする事ができます。

お気に入りアイコン

<link rel="apple-touch-icon" href="画像.png" />

ブックマークしたHPをiPhoneなどのホーム画面に置く際にアイコン画像を指定をする事ができます。アイコンを作成する場合は114p×114px以上のPNG形式で作成して下さい。(アイコン画像の指定がない場合には、そのページのスクリーンショットが表示されます。)
また、アイコン画像は自動的に角丸が付きますので角丸を付ける必要はありません。

コンテンツの説明

<meta name="description" content="コンテンツ内容 " />

ページの内容を書きます。検索エンジンで検索された際にタイトルの下に表示されるコンテンツ内容です。ユーザーに、そのページの内容が分かるように書きましょう。

スタイルシートの指定

<link rel="stylesheet" href="style.css">

外部のファイルを読み込む為に指定します。外部CSSを使用することでソースが軽くなりSEO面でも有効とされています。

その他の説明

以上がHTML5の基本構成になります。後はご自身のHPの必要に応じてメタタグ等を追加して下さい。

ポイントサイト ・モンスト・キャンクラ