投稿日：2014年8月29日

HTML基本テンプレートを作る：「Header要素内の記述」まとめ

HTML・CSS 制作

　HTMLのHeader部分は、meta要素（keydowordsやdescription）、link要素、script要素、tittle要素を記述します。Webサイト内で共通利用するファイルなどを基本セットを統一します。複数人が共同でWEBサイトを作る場合は、記述ルールを策定してスタッフ内で共有しましょう。

headerの記述例

　よく使われる記述の例は以下の通りです。ほんの一例ですので、これら全てを記述する必要はありません。

index.html

<html xmlns=”http://www.w3.org/1999/xhtml”>・・・1

<head profile=”http://gmpg.org/xfn/11″>・・・2

<!– keywords and description –>・・・4

等の早見表。” />

特殊文字” />

<!– for SmartDevice –>・・・5

initial-scale=1.0,user-scalable=no” />

<!– for Microdata & ORG –>・・・6

<!– Favicon & icon –>・・・7

type=”image/vnd.microsoft.icon” />

apple-touch-icon.png” />

<!– Style Sheet –>・・・8

media=”screen,projection,print” />

media=”screen,projection,print” />

<!– Script –>・・・9

<Script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/

jquery.min.js”></Script>

<!– html5 for under ie8 –>・・・10

<!–[if it IE 9]>

<Script type=”text/javascript” src=”./common/js/html5shiv

.js”></Script>

<![endif]–>

<!–[if it IE 6]>

DD_belatedPNG.fix(‘transpng’);

</Script>

<![endif]–>

<!– google analytics trackingcode –>・・・11

　　　　　[解析用スクリプトを記述]

<!– /google analytics trackingcode –>

<title>Name of Web site</title>・・・12

</head>

1.ルート要素（html要素）

　HTML文書の始まりは、必ずルート要素（<html>）を記述します。また、HTML文書の終わりは必ず</html>を記述して閉じます。

XML名前空間を宣言

　HTML文書で利用しているタグがXHTMLのものであることを示すため、以下のように記述します。
<html xmlns=”http://www.w3.org/1999/xhtml”>
これにより、XML対応ツールやブラウザは、XHTMLのものであることを認識します。すると文書をXHTMLとして標準的に（見出し、段落などの要素をそれらしく）レンダリングして表示してくれます。

2.ヘッダータグ

　ヘッダーの開始を表します。「profile=”http://gmpg.org/xfn/11″」とは、HTML内でXFN（XHTML Friends Network）のバージョン1.1を使いますというプロファイルです。必ず記述するわけではありません。

3.文字コードの指定

　HTML文書の文字コードを指定します。WordPressではPHPを使用しますので、「charset=utf-8」を指定します。
・文字コード指定は、文字化け防止のために必ず指定しましょう。
・「<title>」タグなどが読み込まれる前に指定します。
・HTML5からは、ファイルの文字エンコーディングにUTF-8を使用することが推奨されています。

HTML5の記述方法

　meta要素で文字エンコーディングを指定する場合、HTML 4では以下のように記述していました。以下のポイントを押さえましょう。
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
HTML5でも問題ありませんが、charset属性を使用すれば以下のように省略できます。
<meta charset=”UTF-8″>

4.文書の説明・キーワードの指定

　そのHTML文書の説明（description）とキーワード（keyword）を指定します。ここで指定した値は検索エンジンで利用されるので、慎重に言葉を選んで記述しましょう。

5.スマートデバイスの表示領域

　スマートフォン向けの機能です。meta要素に「name=”viewport”」を記述すると、文書の表示領域を設定することができます。

6.マイクロデータ、OGPコード

　マイクロデータと、「いいね！」（facebook）ボタンなどで利用するOGPコードを記述します。

7.ファビコンへのリンクを記述

　Favicon（ファビコン）へのリンクを記述します。

8.CSS（スタイルシート）へのリンクを記述

　CSS（スタイルシート）の外部ファイルへのリンクを記述します。htmlファイルに直接スタイルを書くよりも、スタイルをCSSファイルにまとめる方が1度の記述で済みます。

media=（メディアタイプ）

　スタイル・シートが適用される媒体やメディアタイプを設定します。デフォルト値は｢screen｣で、「media=」は必ず記述する必要はありません。しかし、設定しておけばコンピュータにとって親切です。以下のように設定することができます。

値	説明
screen	初期値。ページ概念のないコンピューター画面上での表現。
print	プリンター出力用。
projection	プロジェクト表現用。
aural	音声合成装置用。
braille	点字感触装置の表現用。
tv	テレビジョン用。
all	汎用装置用。

9.JavaScriptファイルへのリンクを記述

　JavaScriptの外部ファイルへのリンクを記述します。htmlファイル内にjavasCriptを記述する場合は、Scriptタグ（</Script>～</Script>）を記述して、その中に関数を定義する必要があります。しかし、予めJavaScriptの記述を「xxx.js」などの外部ファイルにまとめれば、記述をスッキリさせることができます。

jquery読み込み

　以下の記述により、GoogleがホストしているjQueryを取り込んでいます。jQueryを予めダウンロードして読み込む場合もありますが、以下のようにすればダウンロードする必要はありません。
<Script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></Script>

10.IEの下位バージョンに対応する際の記述

　サイトの閲覧者が使うブラウザがIEの下位バージョンだった場合、そのバージョンに対応するための記述が必要です。

html5shiv.js

　<Script type=”text/javascript” src=”./common/js/html5shiv.js”></Script>
「html5shiv」はJavaScriptで書かれたライブラリです。ie8以下にhtml5の新要素を認識させます。以下のURLからダウンロードできます。
→html5shiv

DD_belatedPNG.js

　<Script src=”./common/js/DD_belatedPNG.js”></Script>
「DD_belatedPNG.js」は、IE6で透明部分のあるPNG画像を表示させることができるJavaScriptで書かれたライブラリです。以下のURLからダウンロードできます。
→DD_belatedPNG

11.アクセス解析用スクリプト

　アクセス解析するためのスクリプトを記述します。

12.タイトル

　WEBサイトのタイトルを記述します。

WordPressのヘッダー要素（例

　私が、WordPressサイトを作るときによく使用する記述例です。タイトル名や、画像のフォルダまでのパスをWordpressの関数によって取得します。

<!DOCTYPE HTML>

<head>

/images/xxxx-icon.png” />?>

/images/xxxx-favicon.ico” />

bloginfo(‘stylesheet_url’); ?>” />

<!–[if lt IE 9]>

<![endif]–>

<?php wp_head(); ?>

</head>

トラックバック用のURL

プロフィール

名前：イワサキ　ユウタ職業：システムエンジニア、ウェブマスター、フロントエンドエンジニア誕生：1986年生まれ出身：静岡県特技：ウッドベース略歴 20