コンテンツを作る前に
- index.htmlの作成
- まずは、トップページのindex.htmlをしっかり作りこんでいきます。それをベースにして、他のページも制作していく要領です。早速、テキストエディタを開いたら、「ファイル」→「名前を付けて保存」からindex.htmlのファイルを作成します。以後、少しづつ書いては「ファイル」→「上書き保存」と制作していくのがお勧めです。こうした方が、何かトラブル(保存し忘れや停電など)に遭遇した場合にも被害が最小限に済むからです。
- XML宣言とDOCTYPE宣言
-
一番最初の行にXMLの宣言、その次の行にDOCTYPEの宣言を下記のように記述します。XHTMLはXMLをベースに作られているものなので、XMLを使用しますと宣言する必要があります。また、今回はStrict DTDの仕様に従って作りますので、DOCTYPE宣言では、そのように記述します。この辺りについての詳細は別ページブラウザの2つの表示モードに設けてあります。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XML宣言、DOCTYPE宣言はそれほど執着する必要はありません。最初は単にそういう決まりなのだと覚えておくくらいで全く問題ないです。 - html要素(最上位要素)
- XML宣言とDOCTYPE宣言を行ったら、そのすぐ下にhtml要素を記述します。XHTMLの場合、xmlns属性というものと、そのページの言語が何で書かれているかを示しておく必要があります。ここは決まった形式があるので、下の例にならって書き加えます。
- head要素(文書情報)
-
そして肝心のhead要素を<html>~</html>内に記述していきます。head要素には、そのページのメタ情報、タイトル名、ページの説明、そして外部ファイル(スタイルシートやjavascriptなど)へのリンクを行います。ここで書かれた内容は、グーグルやヤフーなどのロボット検索に拾われたりしますから(SEO)、検索サイトにヒットされやすいホームページにするためには重要なところです。
メタ情報とは、情報の情報という意味。つまり、そのコンテンツ(情報)がどういった内容(情報)であるのかを示すためのものです。人間はコンテンツを見ればどんなページであるか、ある程度察しがつきますが、コンピュータはそうもいきません。だから、そのコンテンツは、どういった情報が書かれているのかを示すことによって、検索などにも有利に働きます。<head>一般的に記述されるものを書きました。この中で最低限、タイトルとCSSファイルへのリンクの2つは必要です。それぞれの意味を下記に。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta name="author" content="制作者の名前" />
<meta name="description" content="このページの説明" />
<meta name="keywords" content="○○,△△,□□," />
<title>ホームページのタイトル</title>
<link rel="home" href="http://www.example.co.jp" />
<link rel="stylesheet" href="css/common.css" type="text/css" />
</head> - <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
- これは書いておいてください。特に、今回はXML宣言を省略しているので、エンコードの指定が必要だからです。エンコードを指定していないと文字化けの要因となります。とりあえず、このような決まりだと思って記述しておきましょう。これらはHTTPヘッダに利用されます。
- <meta name="author" content="制作者の名前" />
- あまり重要ではないので、必ずしも記述する必要はありません。制作者の名前をここに記します。
- <meta name="description" content="このページの説明" />
- 面倒臭ければ省略しましょう。ここで書いたものは、ロボット検索が拾ってくれる可能性がありますので、書いておくと検索に有利です。ページの説明をcontent属性に記します。
- <meta name="keywords" content="○○,△△,□□," />
- 上記と同様、省略して問題ありません。この項目も検索に有利に働きますから、書いておいて損はないです。キーワード部分は、例のようにコンマ(半角)で区切って複数書くことが可能です。
- <title>ホームページのタイトル</title>
- ブラウザのタイトルバーに利用されますので、必ず書いておきましょう。
- <link rel="home" href="http://www.example.co.jp" />
- 省略して全く問題ありません。リンクタイプです。リンクタイプについては、別ページリンクタイプとOperaナビゲーションバーに書いておきました。例えば、rel属性がhomeの場合は、トップページのアドレスを指定します。
- <link rel="stylesheet" href="css/common.css" type="text/css" />
- 最後に外部ファイルの関連付けを行います。rel属性に外部ファイルの種類。そして、href属性にそのファイルがどこにあるかを指定します。cssは外部ファイルに記述することが推奨されているので、ここでそのリンクを行います。(今回は、cssという名前のフォルダを作ってcommon.cssというファイル名で保存します。なので、href="css/common.cssとなります)
- body要素(文書本体)
- 最後にページの骨格に当たる部分、body要素を書いて終わりです。必ずhead要素のすぐ下に置きます。このbody要素の中に作りたいコンテンツを記述していくことになります。
- このページのまとめ
- 念のため、ここまで書いたソースをまとめて載せておきます。1から打ち込んでいくのが面倒であれば、これをコピー&ペーストして、変更箇所を書きかえて利用してください。(今回記述しないところは打ち消し線で消しています)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
:
:
</html>
:
:
</html>
上でも書いた通り、1行目にXML宣言を行うと、Internet Explorerでは、バグで「互換モード」の表示になります。例えば、body要素に「標準モード」なら無視されるはずのbgcolor属性を記述した場合、「互換モード」のため適応されてしまいます。
<body>
:
:
</body>
:
:
</body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>ホームページのタイトル</title>
<link rel="stylesheet" href="css/common.css" type="text/css" />
</head>
<body>
:
:
</body>
</html>