ホームページの作り方（HP作成法）ホームページの作り方（HP作成法）を解説

STEP1

1-1:準備
基本用語 ドメインの取得 スペースの確保 デザインを考える SEOを考える

STEP2

2-1:HTMLの記述
htmlファイルの作り方 HTMLの基本骨格 HTMLの種類、META、言語 タイトルと著作権情報 文の構成を考える 画像の表示 リンクの設定
2-2:CSSの記述
CSSのHTMLへの組み込み クラスの概念 文字の色とフォント 幅と高さの設定 文章の設定 文字の間隔・線 背景色・背景画像
2-3:CGI/アップロード
掲示板（BBS）の設置 カウンターの設置 サーバーへのアップロード アクセス解析の導入

STEP3

3:divでのレイアウト
divタグの使い方（前編） リストの設定 divタグの使い方（後編） インライン要素とブロック要素 floatの使い方 スクロールボックスの作成 アンカー(a)のスタイルの変更

STEP4

4:tableでのレイアウト
Tableの構造を知る Tableスタイルの変更 Tableでサイトを作る（前編） Tableでサイトを作る（後編）

STEP5

5:positionでのレイアウト
positionの構造を知る HTMLファイル（原本）作成 positionで位置を決める

STEP6

6:その他のテクニック
強調タグを使う サムネイルの作成 三次元化する スクロールバーの色を変える

STEP7

7:Javascriptを使用する
プルダウンメニュー
（フォーム使用）の作成 プルダウンメニュー
（CSS使用）の作成


>>ホームページの作り方TOP　>>HTMLの種類、META、言語

■(X)HTMLの種類（DTD宣言）

Webページを作る言語には大きく分けてHTMLとXHTMLの二つがあり、その中でもXHTML1.0とかXHTML2.0とかいくつかのバージョンがあります。

どの言語のどのバージョンを使うのかをあらかじめ宣言するのがこのDTD宣言と言うことになります。

DTD宣言は、<!DOCTYPE>の形で記述します。

HTML4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
HTML4.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Frameset//EN">
HTML4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN">
XHTML1.0 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML1.0 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML1.0 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML1.1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

TransitionalはStrictに移行するまでのつなぎとしての規格であり、body直下に インライン、ブロック両要素を配置することができますが、Strictはブロックレベル要素しかおくことができません。

とはいえ、色々なサイトを見てみると、transitionalを用いているサイトが多いどころか、宣言すらしていないサイトも多々見受けられます。

最初はどんな場合にも適応できるTransitionalで宣言するとよいでしょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html>
<head>
</head>
<body>
</body>
</html>

XHTMLを使用する場合は、DOCTYPE宣言のほかにXML宣言が必要になります（例はXHTML1.0）。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
</body>
</html>

バージョン宣言は必ず記述する必要があり、文字エンコーディング宣言とスタンドアロン宣言は必要に応じて記述すればよいことになっています。

エンコードはUTF-8を指定しておけば問題ありません。スタンドアロン宣言も この文書以外に参照すべきDTDがあるかどうかを指定するもので、XHTMLではどのバージョンでもnoで大丈夫です。

DOCTYPE宣言は英字が大文字でも可です。

■METAタグの記述

Content-Typeでは"media typeとエンコード"を指定します。

HTML4.01においてはtext/html以外のmedia typeを使用することは禁止されています。

media typeにはそのほかに"application/xhtml+xml"と"application/xml"と"text/xml" があり、XHTMLにおいて推奨されるのはapplication/xhtml+xmlなのですが、インターネットエクスプローラー（IE）がバージョン7ですら対応し切れていないので、HTML・XHTML ともにtext/htmlにするしかありません。

JIS(電子メール)ならiso-2022-jp、シフトJIS(Windows,Mac)ならShift_jis 、EUC(unix)ならeuc-jp、をheadとhead内に記述します。unicodeは日本語のような２バイト文字はUTF-16、1バイト文字はUTF-8なのかな？

Webブラウジングをしていて、文字化けしているサイトとかを見たことないでしょうか？

これはエンコードエラーであり、Content-TypeでShift_jis宣言をしているのに、euc-jpで記述しているような文の場合に起こります。いっている事とやっていることが 違うと言うことです。

メモ帳のデフォルトエンコードはShift_jisですので、UTF-8など他のエンコードを使用するときは、terapadで「ファイル→文字コード再読み込み」を使うとよいでしょう。

descriptionでは"ページの概要"を指定できます。

この部分に記述する文は、googleで検索したときの説明文として紹介されますので、パラパラと上位表示させたいキーワードを含めつつ30時程度で書いてください。

keywordsでは検索対象となる"キーワード"を指定します。

keywordは”,”カンマで区切って記述してください。

スパムが増えたために重要度はあまりありませんが、一応記述はしておいてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="description" content="初心者が作るページです。">
<meta http-equiv="keywords" content="wakabagari,若葉狩り">
</head>
<body>
</body>
</html>

XHTMLでは、「空要素は終了させる」という決まりがあるので、<html></html>のように空でない要素に関してはHTMLと同じでよいですが、 <meta○○>のように”/”の終了タグがないものは、必ず” /"、半角スペース＋スラッシュを最後に付けるようにします。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis" />
<meta http-equiv="description" content="初心者が作るページです。" />
<meta http-equiv="keywords" content="wakabagari,若葉狩り" />
</head>
<body>
</body>
</html>

■言語の記述

html要素にはlang属性やxml:lang属性（XHTMLのみ）、xmlns属性（XHTMLのみ）を指定することが推奨されています。

言語は日本語なら"ja"、英語なら"en"ですが、省略も可です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="description" content="初心者が作るページです。">
<meta http-equiv="keywords" content="wakabagari,若葉狩り">
</head>
<body>
</body>
</html>

XHTML1.0を使う場合でもlangとxml:langの両方を記述してください。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="description" content="初心者が作るページです。">
<meta http-equiv="keywords" content="wakabagari,若葉狩り">
</head>
<body>
</body>
</html>

Copyright(C) Wakabagari. All rights reserved.