前回記事Webサイトを作ろう！【6】トップページの一例のソースコード記述例を元に、それぞれのタグを解説いたします。
※ご覧いただきやすいよう、複数行に渡るコードは合間に改行で隙間を空けている場合があります。
実際には特に改行する必要はありませんのでご注意ください。
基本のタグ構造
どんなページでも基本的にこのような構造になっています。
また逆に、最低限この記述さえあればサイトとしての体裁が整うということでもあります。
一番最初のお約束
ブラウザ（Webページを表示しているInternet ExplorerとかGoogle ChromeとかFirefoxとか）に対して行う「こういうつもりで作ってるんで、そっちもそのつもりで頼みます」という事前説明。
最初はよく分からないままでもコピーして使っていただければ大丈夫です。
DOCTYPE宣言
[su_note]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>[/su_note]
ドキュメントタイプを宣言します。この場合は「 HTMLという言語を使って表示命令を出します、4.01というバージョンの規則に従います 」という宣言。
使用言語の指定 html要素 lang属性
[su_note]<html lang=”ja”>[/su_note]
ここに書かれているhtml文書の言語は ja（japanese） 、つまり日本語のテキストですよーという宣言。
サイトを自動翻訳する機能をもつブラウザなどに言語を判断してもらうために記述します。
ページ全体にこの宣言を有効にするため、記述の一番最後に 閉じタグ</html> を記述します。
※【 6 】トップページの一例 ソースコード例の最後の行を参照。
DOCTYPE宣言、METAタグ、HRタグなどの例外を除き、 ほぼ全てのタグは開始タグと閉じタグがセットで記述されて初めて動作します。
記述の際には閉じタグを忘れないように気をつけましょう。
ヘッダ情報の記述 headタグ
[su_note]<head>ヘッダ情報</head>[/su_note]
ヘッダ情報には『 必ず記述しておくべきもの 』と『 記述しておいたほうが良いもの 』を書きます。
たくさんのコードを記述するサイトでは『 必ず記述しておくべきもの 』も色々と出てきますが、今回のような簡単なコードであれば『 記述しておいたほうが良いもの 』くらいなので、最悪の場合は何も書かなくてもページは表示されます。
なのでここでは簡単な説明のみとして、ちょっとした呪文だと思って唱えておいてください。
もちろん記述に慣れてきたらガンガンこだわって書いてみてくださいね。
今回使ったヘッダ情報については METAタグとtitleタグ 、CSSでスタイル装飾する をご覧ください。
本文（メインコンテンツ） bodyタグ
[su_note]<body>メインコンテンツ</body>[/su_note]
bodyタグの中に文章や画像といったサイトの主となる内容を記述していきます。
ここに記述したものが実際にWeb上に表示されて皆さんの目に触れることになります。
ヘッダー headerタグ
[su_note]<header>ヘッダー</header>[/su_note]
トップ画像や最上部のメニュー（グローバルメニューなど）を記述することが多いです。
ヘッダ情報 head とは別なので間違えないようにご注意。
フッター footerタグ
[su_note]<footer>フッター</footer>[/su_note]
ヘッダーと反対にページの一番下の部分に当たります。
基本的にはコピーライト表記を記述しています。
ここに会社概要や特定商取引法表示などの最下部メニューを置いているサイトもありますね。
METAタグとtitleタグ
METAタグはそのページの仕様や挙動を宣言・指定するもので、様々な種類があります。
titleタグはそのまま、サイトのタイトル（名前）を記述するものです。
これらは 開始タグ<head>と 閉じタグ</head> の間に記述します。
文字コード宣言 charset属性
[su_note]<meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis”>[/su_note]
Shift_JIS（シフトジス）という文字コードを使うという宣言。文字化けを防ぎます。
文字コードには上記の Shift_JIS の他に EUC-JP や UTF-8 などがあります。
スタイルシート言語の宣言
[su_note]<meta content=”text/css” http-equiv=”Content-Style-Type”>[/su_note]
CSS（カスケーディングスタイルシート） というスタイルシート言語を使いますという宣言。
色変更、枠線の表示、文字のサイズや配置といった装飾を行うためにスタイルシートを使います。
この宣言が無くても最近のブラウザは賢く判断してくれるのですが、念のために記述が推奨されています。
サイトの名前 titleタグ
ヘッダ情報 （head）の中で唯一、目に見える文字を表示させるタグです。
検索結果やタブに表示されるサイト（ページ）の名称や説明を記述します。
お気に入り（ブックマーク）登録の際のタイトルにもなります。
[su_note]<title>サイトの名前</title>[/su_note]
【 例 】サイトマップのページ
サイトキーワード meta keywords
Google検索やyahoo検索などの検索エンジンに向けて羽を広げる孔雀のごとくアピールするための手段をSEO対策といいます。
せっかくサイトを作るのだから多くのひとに見に来てほしい、出来るだけ検索結果の上位に表示されたい、そんな時には数多のサイトの中からちょっとでも浮き上がるためにSEO対策をがんばってみましょう。
[su_note]<meta name=”keywords” content=”サイトに関連するキーワード”>[/su_note]
Googleやyahooといった検索エンジンに出来る限り気にしてもらえるようにサイトの内容に関連したキーワードを 『 , （カンマ）』 で区切って記述します。
最近では検索エンジンへのアピールとしてあまり意味が無いとも言われていますが、やってもやらなくてもいいならやっておいた方がいいような気がするのでご紹介しておきます。
多すぎると逆効果なので10個以下でやめておきましょう。
サイトの概要説明＝スニペット meta description
これもSEO対策の一環で、検索結果に自分のサイトが表示された時にサイトタイトルとURLの下に出てくる説明文を記述します。
上の【 サイトマップのページ 】の例で見ていただくと『 格安パソコン修理・見積無料～ 』の部分がスニペットです。
サイト、もしくはそのページの内容について、関連する単語や情報を入れて出来るだけ簡潔に書くのがポイントです。
[su_note]<meta name=”description” content=”検索結果に出てくるサイト名の下の説明文。”>[/su_note]
全角110文字以下であればGoogleやyahooなどの検索エンジンの検索結果で省略されること無く全ての説明文が表示されます。
CSSで装飾する
上で『 CSS（カスケーディングスタイルシート） というスタイルシート言語を使いますという宣言 』を行いました。
ここで実際にCSSを記述します。
ご注意
CSSは、今回のようにhtmlファイルの中に一緒に記述するも良し、CSSを独立したファイルとして『 index.css 』のように別に作っても良し。
今回はCSSスタイルをひとつしか適用させていないので同ファイルに記述していますが、複数のスタイルを使用する場合には独立したCSSファイルを作ることが推奨されています。
同じCSSファイルを複数のページに適用することもできるので、複数ページを作る場合には独立したCSSファイルを作っておくと楽ができるし、記述もすっきりします。
⇒【 ９ 】複数ページを作る
今回のようにCSSをhtmlファイルに一緒に記述する場合は<head>と</head>の間に記述します。
記述する場所を間違えると上手く適用しないのでお気をつけください。
[su_box title=”CSSをhtmlファイルに記述” style=”soft” box_color=”#a2dc96″ title_color=”#101110″ radius=”5″]<head>
<!– 文字の背景色を変える –>
<style type=”text/css”>
.blue {
background-color:#0000ff;
color:#ffffff;
}
</style>
</head>
<span class=”blue”> ご依頼お待ちしております </span>[/su_box]
これを実際の表示で見るとこうなります。
スタイルの名称が『 blue 』 、背景色が『 #0000ff（青） 』、文字の色が『 #ffffff（白） 』という指定を行い、スタイルを適用させたい場所に呼び出すことで表示が変わります。
カラーコードについては 過去記事 【 4 】テーマカラーを決める をご覧ください。
CSSはこのように予めスタイルを記述しておき、htmlの中で指定・呼び出しを行うことで適用されます。
色の変更だけではなく、背景色の幅や高さ、文字の大きさ、行の上下の空白など様々な要素を指定することができます。
詳しくは スタイルシート（CSS）の解説 にて。
画像と大見出し
この部分をhtmlで見るとこんな感じ。
[su_box title=”ソースコード” style=”soft” box_color=”#a2dc96″ title_color=”#101110″ radius=”5″]
<body>
<header>
<img src=”image/top.gif” alt=”トップ画像”>
</header>
<h1>【 見出しh1 】 パソコン修理のエヌシステム <a name=”top”> </a> </h1>
<!– 水平線を引く –>
<hr>
<h2>【 見出しh2 】 宅配パソコン修理サービスのパソピア 全国対応可能！</h2>
</body>[/su_box]
それぞれのタグを順に説明していきます。
画像を設置 imgタグ
[su_box title=”画像タグ” style=”soft” box_color=”#a2dc96″ title_color=”#101110″ radius=”5″]<header>
<img src=”image/top.gif” alt=”トップ画像”>
</header>[/su_box]
最初の img src= で画像の在り処を指定し、次のalt属性で画像のタイトルを書きます。
画像の在り処の指定方法は2種類あります。
（１） URLをそのまま記述（ http://www.website.com/image/top.gif ）
画像の在り処をURLで記述します。
（２） ディレクトリを記述（ image/top.gif ）
今作っている index.html を基本階層として、そこから見て画像がどこにあるか記述します。
何かでサーバーのお引越しやドメインの変更をするとURLが変わってしまい、
全ての画像リンクも書き直す羽目になって、使っている画像が多いほど大変なことになります。
ディレクトリの記述であればURLよりも記述が短くて済みますし、
階層が変わらなければ指定先が変わることもないので
できるだけこちらで記述しておくと良いと言われています。
当然ですが階層を間違えると画像は表示されません。
また、アップロードされていない（自分のPCの中にあるだけの状態の）画像を指定しても表示されません。
新しい画像を準備したらFFTPソフトによるアップロードを忘れないように気をつけましょう。
画像にリンクを貼る imgタグとhrefタグ
ついでに画像をクリックするとリンク先に移動するタグもご紹介します。
[su_note]<a href=”リンク先のURL”><img src=”●●.gif” alt=”画像タイトル”></a>[/su_note]
リンクタグの中に画像タグを入れているだけですね。
各ページからトップページへ戻るためにトップ画像やバナーにリンクを貼っているサイトも多いです。
画像のalt属性
alt=”トップ画像” のように、画像のタイトルや説明を記載するのがalt属性です。
スクリーンリーダー (画面読み上げソフト）を使用している目の不自由な方や、テキストのみを表示させるブラウザを使用している方、画像を非表示設定にしている方に向けて画像が見えなくても、そこに何を置いているのかを伝えるために設定します。
タイトル見出し hタグ
[su_box title=”見出しタグ” style=”soft” box_color=”#a2dc96″ title_color=”#101110″ radius=”5″]<h1>【 見出しh1 】 パソコン修理のエヌシステム <a name=”top”> </a> </h1>
<h2>【 見出しh2 】 宅配パソコン修理サービスのパソピア 全国対応可能！</h2>[/su_box]
h1からh6までが見出しタグとして存在します。
h1 がフォントサイズの大きな大見出し。
h2～h6 が小見出しで、順にフォントサイズが小さくなります。
見出しに記述された単語や文章は、検索エンジンからも「見出しにしてるってことは大事なところなのかな？」と気にしてもらえることがあるので、出来るだけ重要度の高いキーワードを入れて見出しを記述しましょう。
また、h2の後ろにh1、といったような順序が逆の記述はしないようにご注意ください。
hタグにはフォントサイズ指定などがデフォルトで適用されます。
これをお好みのサイズや色にするためにはCSSを指定する必要があります。
このブログで言えば、h2が水色の大見出し、左に黄緑や緑のバーが付いているものや、右サイドメニュー内のメニューバーが小見出しです。
Webサイトを作ろう！：シリーズ記事
【1】レンタルサーバーとドメイン
【2】必要なソフトを準備する
【3】ページの構成を考える
【4】テーマカラーを決める
【5】トップページと画像を用意
【6】トップページの一例
【7】HTMLソースコードの解説①（この記事です）
【8】HTMLソースコードの解説②
【9】複数ページを作る
【10】横並びメニューをCSSで作る
【11】縦並びメニューをCSSで作る
【12】スタイルシート（CSS）の解説
【 番外編1 】画像編集ソフト・素材サイト
【 番外編2 】商用利用OKな無料素材
「Webサイトはこうしてもらえると嬉しい」という個人的な希望
