婚活LABより、ブライダルネットの期間限定クーポン配布中!!

第2回 WEBサイト作成講座 『必須となる要素の解説』

第2回 WEBサイト作成講座 『必須となる要素の解説』

 今回は、前回作成したsampleディレクトリの中のindex.htmlを良く使うタグを確認しながらマークアップしていこうと思います。
前回の記事を確認する方は以下のリンクよりご覧ください。

第1回 WEBサイト作成講座 『HTMLの基礎中の基礎』

html必須の要素の解説

 まずは前回の入力したコードの確認です。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>

 上から順に解説していきます。

文書型の定義を宣言する<!DOCTYPE html>について

 HTMLを記述していくには『文書型の定義を宣言』する必要があります。文書型の定義は1番最上段に記述しなければなりません。

 一行目の<!DOCTYPE html>がそれにあたります。

 !DOCTYPEの後に使用する言語型を指定しますが、上記は単にHTMLを使用すると宣言している訳ではなく、HTML5を使用すると宣言しています。

 前バージョンのHTML4.01では一例として
 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
の様に、使用目的に従って文書型宣言を指定する非常に長い記述となっていましたがHTML5ではバージョンの標記が省略可能となり簡素化され『html』とだけ記述するだけでよくなりました。

 当講座では、HTML5に準拠してサンプルサイトを作成していく為『html』とだけ入力してください。

HTML文書であることを宣言する。html要素について

 !DOCTYPEでは文書の『型』(言語の種類とバージョン)を宣言しました。html要素では開始タグから終了タグまでがHTML文書であることをブラウザに宣言しています
 
HTMLで書かれた各要素がすべて入れ子となるように記述してください。

入れ子とは・・・

 ネストとも呼ばれ、大きな入れモノの中に小さな入れモノが入っている構造のことを指します。
 例えば、上記のコードではhtml要素の大きな入れモノの中にheadやbody要素が含まれているため入れ子の関係といえます。
 また、親子の関係になぞらえてhtml要素から見た場合、headやbody要素は子要素と呼ばれ、逆に見た場合はhtml要素を親要素と呼ぶような表現も使われます。

htmlファイルの情報を宣言するhead要素について

 head要素にはファイルの設定や情報を記述する為に記述します。一般的にはブラウザの画面上には表示されませんが、上記コードでも記述したtitle要素はブラウザのタイトルバーに表示されます
タイトルバーとは

 他にはmeta要素やlink要素等をhead要素の中に記述します。meta要素とは、ページの情報をブラウザやクローラー等に明確に伝えるための要素であり、link要素とは現在のHTML文書と外部リソースを関連させる為に記述します。この辺の詳しい解説は当講座で追って解説します。

<meta charset=”utf-8″>について

 前回入力して頂いたサンプルコードのhead要素内に記述した<meta charset=”utf-8″>について解説します。
 
 meta要素とは、上記で解説した通り、ブラウザにページの情報を伝えます。サンプルコードではcharset属性に属性値utf-8を指定していることがわかると思います。charsetとは、文字を意味するcharacterという単語と設定を意味するsetの略であり『文字コード』を設定する属性です。HTML5では一般には推奨されているマルチバイト文字を扱える標準的な文字コードのutf-8を指定します。定型文として覚えていただいても構いません。

 

マルチバイト文字とは・・・

 余談となりますので飛ばしていただいても結構です。
 コンピューターが扱うデータ単位バイトは、00000000~11111111までの2進数8桁分を扱います。なぜ2進数を使用するかという0と1をスイッチのオンとオフに置き換え、例えば電流が流れたらオン、流れてない場合はオフといった具合に処理できるためコンピュータが処理しやすい方法だからです。
 文字コードに置き換えると2進数8桁の場合、1バイトでは文字は256種類しか扱えません。日本語は漢字が含まれるため1バイトでは表現ない為、日本語などを表現するためにま複数のバイトが必要となります。この様に複数のバイトで表現される文字をマルチバイト文字と呼びます。

コンテンツを表示するbody要素について

 body要素に記述した内容がブラウザ画面に表示されます。今読まれている記事もbody要素内に書かれています。
 
 段落や画像、リスト等様々な要素をbody要素の子要素として記述することによりブラウザの画面上に表示されます。ページのコンテンツとなるので基本的い一番記述が多くなるのがbody要素です。

サンプルサイトのタイトルを入力しよう

 では実際に、サンプルサイトを『サンプル株式会社』のホームページとして作成していきたいと思います。

 前回作成したindex.htmlのコードを編集していきます。head要素内のtitle要素内に『サンプル株式会社』、body要素内に一番重要である見出しを表すh1タグを使用し、<h1>サンプル株式会社</h1>と入力して上書き保存しましょう。

 前回、ファイルの拡張子をhtmlに変更しているのでそのままファイルをダブルクリックをするとブラウザが開いてしまいます。ファイルを右クリックしてプログラムから開くでテキストエディタを指定するか、テキストエディタ内にドラッグ、またはテキストエディタのファイルタグからファイルを開いてコードを編集してください。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル株式会社</title>
</head>
<body>
<h1>サンプル株式会社</h1>
</body>
</html>

 では、編集したindex.htmlファイルをダブルクリックしてブラウザを起動してみましょう。下の画像はchromeの場合ですが以下の様にタイトルバーと表示画面に『サンプル株式会社』と表示されたら成功です。
サンプルサイトタイトル画面

meta descriptionを設定しよう

 次に、meta descriptionを設定していきます。meta descriptionを設定すると、Google等で検索した際の、サイトの説明文として使われます

descriptionの解説

 meta descriptionを記述しなかった場合、検索エンジンは本文から抜粋してサイトの説明文として使われますが、検索ユーザーにどのようなサイトであるのかわかりやすく説明するためにも必ず設定するようにしましょう

meta descriptionの記述方法

 meta descriptionの記述方法は、上記でも出てきたhead要素内に記述するmeta要素のname属性にメタデーター名『description』を定義して、content属性にその内容を記述します。

<meta name="description" content="サイトの説明">

 meta descriptionの内容に記述する文字数は多すぎると表示が切れてしまう為、100字程度、多くても120文字程度に要約して記述するようにしましょう。
 今回はindex.htmlに以下のように記述しました。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル株式会社</title>
<meta name="description" content="このサイトはサンプル株式会社のサイトです。サンプルサイトの為、自由に説明していただいて結構です。descriptionは100字程度が良いとされています。">
</head>
<body>
<h1>サンプル株式会社</h1>
</body>
</html>

 次回は、サイトの構造とデザインについて解説していきたいと思います。

第3回 WEBサイト作成講座 『サイトの構造とデザイン』

グループサイト。婚活LABより!婚活無料診断実施中!

CTA-IMAGE 簡単な質問に答えるだけですあなたに最適な婚活タイプが丸わかり!