[基礎編] [コーディングの基礎] htmlファイルの基本的な構成 | 中国短期大学情報ビジネス学科メディア科目ブログ WEBCRE8TOR.COM

コーディングを始めていく上で、htmlファイルには必ず記述しなければいけない4つのブロックがあります。それが以下の項目です。

文書型定義ブロック
htmlの文書の本体ブロック
<head></head>セクション
<body></body>セクション

それぞれ解説していきます。コーディングを行いながら解説を行いますので、
ひとまずテキストエディタを起動して「index.html」「main.css」へのコーディング準備を行ってください。

Visual Studio Codeの起動と日本語化。

Visual Studio Codeの左のエクスプローラーメニューの「html」フォルダから「index.html」「main.css」を開いて早速始めていきましょう。

この記事の目次

1 文書型定義ブロック
2 htmlの文書の本体ブロック
3 <head></head>セクション
4 <body></body>セクション
5 最終的なファイル
- 5.1 テンプレートにして効率アップ

文書型定義ブロック

最初に「文書型宣言」をする必要があります。
この文書型定義をしないと、Wordなどで作られた文書と同じように単なるテキスト文書として扱われてしまいます。
テキスト文書になると、cssが正しく読み込まれず、レイアウト崩れを引き起こす原因になります。

html文書として扱ってもらうために「どのバージョンのルールで書かれているのか」を宣言し、
ブラウザのルールに沿った表示をさせるために記述が必要です。

早速、index.htmlの最初の行に以下を記述してください。

index.html

<!doctype html>

「doctype」はDocument Type(文書型)のことで、半角スペースを空けて「html」と記述しています。
簡単に解説すると、「文書型はhtmlです」という定義を行いブラウザにhtml文書と認識させています。

htmlの文書の本体ブロック

<html></html>セクションはhtmlの記述部分、表示・制御に関わる部分の範囲全てを包括するものです。
開始タグは<!doctype html>の直後に記述し、閉じタグはhtmlファイルの一番最後の行に記述します。

この<html></html>セクションは、後述する制御のためのブロック<head></head>セクションと、
表示のためのブロック<body></body>セクションを全て含んだブロックになります。

それでは、<!doctype html>の下に、以下のハイライトされている2行目・3行目を記述してください。

index.html

<!doctype html>
<html lang="ja">
</html>

上記で<html lang=”ja”>となっていますが、この<html></html>セクション内で記述されている言語(lang)は日本語(ja)です、という意味を持っています。
例えばブラウザの翻訳機能を使えばlangを読み取ってくれるので、ブラウザが言語を認識する手間を省略することができます。

<head></head>セクション

<head></head>セクションの中身はモニタに表示されるわけではありません。
ただ、デザイン制御を行うcssや、動きの制御を行うJavaScriptなどの外部ファイルを読み込むのはこのブロックです。
あの場所のこの部品を使うよ!という指示書のようなものですね。

また、ページの内容をツイートしたりFacebookのいいねボタンをクリックした時に自動で画像やテキストが抽出されることがありますよね。
その画像やテキストは<head>から</head>の間に記述されたものを抽出して表示していたりします。

それでは、以下の記述を先ほどの<html></html>セクションの開始タグの下を2行改行し、ハイライトされている3行目・4行目を記述してください。

index.html

<!doctype html>
<html lang="ja">
<head>
</head>
</html>

今後、<head></head>セクションの開始タグから終了タグまでの間に、ページの制御に関する記述を行っていきます。
外部に置いている「main.css」や各種JavaScriptファイルの読み込みを行って「index.html」の制御を行いましょう。

headセクションに記述① meta要素を使ってエンコーディング

エンコーディングとは簡単に言うと文字コードの指定のことです。
たまに文字化けしたサイトがあったりしますが、この文字コードの指定ができていないことが原因だったりします。
実務においてはほとんどの場合「UTF-8」を指定していれば問題ないと思います。

では、<head></head>セクションの開始タグと終了タグの間を1行分改行し、ハイライトされている4行目の記述を追加しましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
</head>
</html>

注意点として、ファイルを保存する際に文字コードを指定する項目が出てきますが、
<meta>タグで指定した文字コードと違うものを指定して保存してしまうと文字化けの原因になりますので保存時も同じ文字コードで保存しましょう。

headセクションに記述② link要素を使って読み込むcssを指定する

前回ファイルだけ用意した「main.css」、ダウンロードして設置だけした「reset.css」読み込みを行いましょう。
<link>タグを使ってページのデザインを決めるcssの読み込みを行います。

先ほどの<meta charset=”utf-8″ />の下を1行分改行し、ハイライトされている5・6行目の記述を追加しましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/reset.css">
</head>
</html>

cssファイルを読み込むときはこんな感じの記述になります。
cssを読み込んだことにより、「main.css」で指定した内容が反映され、
ページのデザインをPhotoshopで制作した状態にすることができます。

なお6行目の「reset.css」はブラウザごとの表示の違いを最小限にするため、
ブラウザの持つCSSをリセットするために設置しています。

headセクションに記述③ ページのタイトルを記述し表示させる

<title></title>タグを使ってページのタイトルを記述しましょう。
これが表示されるのは、検索エンジンで検索した時のリンクテキストの箇所になります。
また、ブラウザでページを開いた際にブラウザのタブ部分にはこのテキストが表示されます。

先ほど記述した<link rel=”stylesheet” href=”css/reset.css”>の下を1行分改行し、ハイライトされている7行目の記述を追加しましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/reset.css">
<title>ウェブデザインA</title>
</head>
</html>

ページのタイトルは<title>ウェブデザインA</title>となっている「ウェブデザインA」の部分を変更すれば反映されます。
ページに最もふさわしいページタイトルをつけてSEOで強いページを作りましょう。

<body></body>セクション

<body></body>セクションはブラウザに表示される内容を記述するブロックで、普段みなさんがブラウザで見ているWebサイトは、
<body></body>セクション内に記述されたhtmlタグにcssを使って指定したレイアウトやデザイン、そしてJavaScriptを使った動きが表示されています。

では、以下の記述を<head></head>セクションの閉じタグの下に2行分改行し、ハイライトされている9・10行目を記述してください。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/reset.css">
<title>ウェブデザインA</title>
</head>
<body>
</body>
</html>

もう一度言いますが・・・
<head></head>セクションはページの制御ブロック、
<body></body>セクションはページの表示ブロックと覚えてください。

cssやJavaScriptなど外部から読み込むファイルは<head></head>セクションの内側に記述し、
ブラウザに表示される部分のhtmlコーディングは、この<body></body>セクションの内側に記述していくことになります。

最終的なファイル

index.htmlの準備は以上です。
最終的に出来上がったindex.htmlのファイルの内容はこちら。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/reset.css">
<title>ウェブデザインA</title>
</head>
<body>
</body>
</html>

もし違っていたら、もう一度よく確認して訂正しましょう。
<(小なり)や>(大なり)や/(スラッシュ)は大文字になっていないか??英字の綴りを間違っていないか??
タグの部分の英数字が全角になっているだけでもレイアウトが崩れます。

テンプレートにして効率アップ

今回皆さんが記述したものは、ページのデザインとは違いどの案件でもほとんど変わることがないテンプレートのようなものです。
毎回同じような内容を記述しなくてもいいようにテンプレートにして置いておき、案件のコーディングを始める時に使い回すのが効率アップになります。
もちろん案件ごとに変わるものはありますが、新たに読み込んだり逆に削除したりすればそれだけでかなり時間短縮になります。

なお、このindex.htmlは必ず上書き保存しておいてください。
Windowsなら「Ctrl + S」、Macなら「Cmd + S」で上書き保存ができます。