ホーム >  HTML・CSS >  HTML基本テンプレートを作る:「Header要素内の記述」まとめ


Posted:2014/08/29 6:00:31 PM|Category : HTML・CSS

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


 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
 
<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要素)

 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>
<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>


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告