Posted：2014/08/29 6:00:31 PM｜Category : HTML・CSS
HTMLのHeader部分は、meta要素（keydowordsやdescription）、link要素、script要素、tittle要素を記述します。Webサイト内で共通利用するファイルなどを基本セットを統一します。複数人が共同でWEBサイトを作る場合は、記述ルールを策定してスタッフ内で共有しましょう。 よく使われる記述の例は以下の通りです。ほんの一例ですので、これら全てを記述する必要はありません。 index.html HTML文書の始まりは、必ずルート要素（<html>）を記述します。また、HTML文書の終わりは必ず</html>を記述して閉じます。 HTML文書で利用しているタグがXHTMLのものであることを示すため、以下のように記述します。 ヘッダーの開始を表します。「profile=”http://gmpg.org/xfn/11″」とは、HTML内でXFN（XHTML Friends Network）のバージョン1.1を使いますというプロファイルです。必ず記述するわけではありません。 HTML文書の文字コードを指定します。WordPressではPHPを使用しますので、「charset=utf-8」を指定します。 meta要素で文字エンコーディングを指定する場合、HTML 4では以下のように記述していました。以下のポイントを押さえましょう。 そのHTML文書の説明（description）とキーワード（keyword）を指定します。 ここで指定した値は検索エンジンで利用されるので、慎重に言葉を選んで記述しましょう。 スマートフォン向けの機能です。meta要素に「name=”viewport”」を記述すると、文書の表示領域を設定することができます。 マイクロデータと、「いいね！」（facebook）ボタンなどで利用するOGPコードを記述します。 Favicon（ファビコン）へのリンクを記述します。 CSS（スタイルシート）の外部ファイルへのリンクを記述します。htmlファイルに直接スタイルを書くよりも、スタイルをCSSファイルにまとめる方が1度の記述で済みます。 スタイル・シートが適用される媒体やメディアタイプを設定します。デフォルト値は｢screen｣で、「media=」は必ず記述する必要はありません。しかし、設定しておけばコンピュータにとって親切です。以下のように設定することができます。 JavaScriptの外部ファイルへのリンクを記述します。htmlファイル内にjavasCriptを記述する場合は、Scriptタグ（</Script>～</Script>）を記述して、その中に関数を定義する必要があります。しかし、予めJavaScriptの記述を「xxx.js」などの外部ファイルにまとめれば、記述をスッキリさせることができます。 以下の記述により、GoogleがホストしているjQueryを取り込んでいます。jQueryを予めダウンロードして読み込む場合もありますが、以下のようにすればダウンロードする必要はありません。 サイトの閲覧者が使うブラウザがIEの下位バージョンだった場合、そのバージョンに対応するための記述が必要です。 <Script type=”text/javascript” src=”./common/js/html5shiv.js”></Script> <Script src=”./common/js/DD_belatedPNG.js”></Script> アクセス解析するためのスクリプトを記述します。 WEBサイトのタイトルを記述します。 私が、WordPressサイトを作るときによく使用する記述例です。タイトル名や、画像のフォルダまでのパスをWordpressの関数によって取得します。
headerの記述例
<html xmlns=”http://www.w3.org/1999/xhtml”>・・・1
<head profile=”http://gmpg.org/xfn/11″>・・・2
<meta charset=”UTF-8″>・・・3
<!– keywords and description –>・・・4
<meta name=”keywords” conten=”HTMLタグ・WEBカラー
等の早見表。” />
<meta name=”description” conten=”HTML,カラー,画像,
特殊文字” />
<!– for SmartDevice –>・・・5
<meta name=”viewport” content=”width=device-width,
initial-scale=1.0,user-scalable=no” />
<meta name=”format-detection” content=”telephone=no”
/>
<!– for Microdata & ORG –>・・・6
<meta itemprop=”name” content=”” />
<meta itemprop=”description” content=”” />
<meta property=”og:tittle” content=”” />
<meta property=”og:type” content=”” />
<meta property=”og:url” content=”” />
<meta property=”og:image” content=”” />
<meta property=”og:site_name” content=”” />
<meta property=”og:detection” content=”” />
<!– Favicon & icon –>・・・7
<link rel=”shortcut icon” href=”./common/img/favicon.ico”
type=”image/vnd.microsoft.icon” />
<link rel=”apple-touch-icon” href=”./common/img/
apple-touch-icon.png” />
<!– Style Sheet –>・・・8
<link rel=”stylesheet” href=”./common/css/initialize.css”
media=”screen,projection,print” />
<link rel=”stylesheet” href=”./common/css/style.css”
media=”screen,projection,print” />
<!– Script –>・・・9
<Script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/
jquery.min.js”></Script>
<Script src=”js/xxx.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]>
<Script src=”./common/js/DD_belatedPNG.js”></Script>
<Script>
DD_belatedPNG.fix(‘transpng’);
</Script>
<![endif]–>
<!– google analytics trackingcode –>・・・11
[解析用スクリプトを記述]
<!– /google analytics trackingcode –>
<title>Name of Web site</title>・・・12
</head>
1.ルート要素（html要素）
XML名前空間を宣言
<html xmlns=”http://www.w3.org/1999/xhtml”>
これにより、XML対応ツールやブラウザは、XHTMLのものであることを認識します。すると文書をXHTMLとして標準的に（見出し、段落などの要素をそれらしく）レンダリングして表示してくれます。2.ヘッダータグ
3.文字コードの指定
・文字コード指定は、文字化け防止のために必ず指定しましょう。
・「<title>」タグなどが読み込まれる前に指定します。
・HTML5からは、ファイルの文字エンコーディングにUTF-8を使用することが推奨されています。HTML5の記述方法
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
HTML5でも問題ありませんが、charset属性を使用すれば以下のように省略できます。
<meta charset=”UTF-8″>4.文書の説明・キーワードの指定
5.スマートデバイスの表示領域
6.マイクロデータ、OGPコード
7.ファビコンへのリンクを記述
8.CSS（スタイルシート）へのリンクを記述
media=（メディアタイプ）
値
説明
screen
初期値。ページ概念のないコンピューター画面上での表現。
print
プリンター出力用。
projection
プロジェクト表現用。
aural
音声合成装置用。
braille
点字感触装置の表現用。
tv
テレビジョン用。
all
汎用装置用。
9.JavaScriptファイルへのリンクを記述
jquery読み込み
<Script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></Script>10.IEの下位バージョンに対応する際の記述
html5shiv.js
「html5shiv」はJavaScriptで書かれたライブラリです。ie8以下にhtml5の新要素を認識させます。以下のURLからダウンロードできます。
→html5shivDD_belatedPNG.js
「DD_belatedPNG.js」は、IE6で透明部分のあるPNG画像を表示させることができるJavaScriptで書かれたライブラリです。以下のURLからダウンロードできます。
→DD_belatedPNG11.アクセス解析用スクリプト
12.タイトル
WordPressのヘッダー要素（例
<!DOCTYPE HTML>
<html dir=”ltr” lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title><?php bloginfo(‘name’); ?></title>
<link rel=”apple-touch-icon” href=”<?php bloginfo(‘template_url’); ?>
/images/xxxx-icon.png” />?>
<link rel=”shortcut icon” href=”<?php bloginfo(‘template_url’); ?>
/images/xxxx-favicon.ico” />
<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php
bloginfo(‘stylesheet_url’); ?>” />
<!–[if lt IE 9]>
<meta http-equiv=”Imagetoolbar” content=”no” />
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
<script src=”<?php bloginfo(‘template_url’); ?>/js/xxxx.js”></script>
<?php wp_head(); ?>
</head>
名前：イワサキ ユウタ 職業：システムエンジニア、ウェブマスター 誕生：1986年生まれ 出身：静岡県 特技：ウッドベース 略歴 2008年04月 金融機関系Ｉ
