1. HTML文書の基本構造をつくる

このチャプターでは、サイト制作のうえで基本となるHTMLの構造を作成し、各部分について解説しています。

さっそくHTMLを書いていきます。適当なフォルダを作成し、その中にindex.htmlファイルを作成します。

ドキュメントタイプ宣言をする

index.htmlの1行目で、まずはじめに「HTMLのバージョン」を宣言を行います。VS Codeなど補完機能がついているエディターでは、最初の一文字目を打ったら候補が出てくるかと思います。

<!DOCTYPE html>

これはHTMLの一番新しい仕様である「HTML Living Standard」の宣言で、現在においては必須の記述です。いま新しくHTMLページを作成する場合は何も考えずに<!DOCTYPE html>と書いておいて問題ありません（この仕様のひとつ前のHTML5も同じ記述です）

古いサイトだと、以下のような記述がされているものもあります。いずれも過去のHTMLの仕様に基づいた宣言です（ここに挙げたもの以外もあります）

<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!-- XHTML 1.0 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ブラウザはページを表示する際、このドキュメントタイプ宣言を見て、そのページで表示するモード（HTMLの解釈）を自動で切り替えます。宣言がない場合もページは表示されますが、意図しない表示となる可能性もあるので、必ず宣言しておいた方がよいです（宣言がないことでとんでもない表示になることは稀ですが…）

<!DOCTYPE>は慣例的に大文字で書かれることが多いですが、小文字でも構いません。とりあえず、HTMLの1行目ではまずこの宣言を行います。

HTML構造の大枠をつくる

つぎに、HTML構造の大枠をつくります。といっても、以下の記述で終わりです。

<!DOCTYPE html>

<html lang="[メイン言語]">
<head>
  <meta charset="[文字コード]">
  <title>[サイト名などブラウザのタブバーなどに表示される名称]</title>
</head>
<body>

<!-- ここに記述された内容がブラウザの画面に表示される -->

</body>
</html>

実際にはこの後headの中身をもう少し足しますが、ブラウザにページを表示するために最低限必要な情報はこれだけです。テキストや画像、リンクなどをそのまま表示するだけであれば、上記でじゅうぶん機能します。先述のドキュメントタイプ宣言とこの<html>...</html>の構造は、ひとつの構文として覚えておくとよいかと思います。

<!-- -->で書かれた部分はコメント部分です。この記述箇所はブラウザのソース表示では確認できますが、実際の画面上には反映されません（コメントアウトともいいます）

html要素

要素としてのhtmlは、HTML文書における起点になる要素であり、他のすべてのHTMLはこの配下に記述します。ここでは以下を指定します。

lang属性

htmlのlang属性の値に、「そのページで使用するメイン言語」を指定します。日本語であればja、英語はenです。

ブラウザはページを表示する際、<!DOCTYPE>に続いてこのlang属性を見てページの言語を解釈します。指定がない場合でもブラウザは自動的に解釈をしますが、音声読み上げなどアクセシビリティの面でも重要なので、指定しておいた方がよいです。

head要素

head要素内では、主にブラウザや検索クローラーなどが読み取る情報を記載します。以下はその情報の一例です。

  • 文字コード
  • デバイス（ブラウザ）幅
  • 検索区ローターに対する指示
  • OGP
  • CSSやJavaScriptなどのリソースパス

ここでは、以下の2つを指定します。

metaのcharset属性

文字コードを指定します。日本語サイトで指定されている文字コードとしては、かつてはShift_JISやEUC-JPがほとんどでしたが、現在ではほぼすべての文字や絵文字を表示できるutf-8（大文字でも小文字でも）を指定するのが一般的です。

こちらも<!DOCTYPE>同様、いま新しくHTMLページを作成する場合は何も考えずに<meta charset="utf-8">と書いておいて問題ありません。meta要素のcharset属性とVS Codeなどエディターの文字コードは合わせておきます。

サイトが文字化けしている場合、HTML内でこの文字コードが設定されていないか、meta要素に記述された文字コードと実際のHTMLファイルの文字コードが一致していないか、どちらかの可能性が高いです。自分の環境では大丈夫でも他の人が見たら文字化けしている…ということもあるので、<meta charset="utf-8">も必ず指定しておく方がよいです。

title属性

ブラウザのタブやブックマーク時などに表示されるテキスト文言を指定します。サイト名やそのページのタイトルを表示するのが一般的です。

title要素の文言やタグそのものを記述しなくても、ブラウザ上で表示自体はされますが、この場合ブラウザのタブなどにはファイル名またはURLがそのまま表示されます。あまり省略することはないと思いますが、これも指定しておく方がよいです。

このハンズオンでは、「My Profile」というタイトルを入れています。

body要素

body要素内に記述された内容が、ブラウザの画面に表示されます。

上記のコード例には<!-- ここに記述された内容がブラウザの画面に表示される -->と記述していますが、<!-- -->の記述はHTMLではコメントアウトの記述となり、ブラウザでこのHTMLファイルを開いても現状は何も表示されません。中身は次以降のチャプターで記述していきます。

head要素の中に追記する

このままだとスマホで見たときの画面幅やレイアウトのスタイルがなにもあたらない状態なので、headの中にもう少し記述を追加します。

ビューポートを追加する

meta要素として、ビューポート（viewport）を指定します。ビューポートとはウェブコンテンツを表示できるウインドウの領域のことで、これによりブラウザの幅により表示が切り替わるレスポンシブ対応」が可能になります。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

meta要素のname属性にviewportを指定し、content属性にはビューポートで指定できる値を設定します。指定できる値はいくつかありますが、基本的には以下の2つを指定するでOKです。

  • width=device-width：横幅をデバイスの横幅に
  • initial-scale=1.0：ページを最初に読み込んだときの表示倍率（1.0あるいは1が規定値 / 倍率100%）

format-detectionを設定する

同じくmeta要素にformat-detectionを指定します。format-detectionはもともとAppleが独自に定義したもので、主にiOSなどのデバイスで電話番号の表示を自動的にリンクされるのを制御するためのタグ指定です。ブラウザによってサポート状況はまちまちなようですが、少なくともiOS+Safariでは有効です。

<meta name="format-detection" content="telephone=no">

meta要素のname属性にformat-detectionを指定し、content属性にはtelephone=noを指定します。これで電話番号表示の自動リンクを無効化できます。

個人の運営するサイトにおいて電話番号を表示することは稀なケースかと思いますが、ときどき「電話番号っぽい数字とハイフンの文字列」が電話番号と認識されて自動リンクされているケースを見かけるので、指定しておくとよいです。

検索クローラーのクロールを拒否する

検索クローラーに拾われてGoogleなど検索エンジンにインデックス（登録）されたくないという場合は、以下のように指定します。

<meta name="robots" content="noindex,nofollow,noarchive">

meta要素のname属性にrobotsを指定し、content属性には拒否する値を指定します。上記の指定は、以下を拒否しています。

  • noindex：指定のあるページを検索結果に表示しないようにする
  • nofollow：指定のあるページからのリンクを辿らないようにする
  • noarchive：指定のあるページのキャッシュを表示しないようにする

検索エンジンのインデックス制御については、当サイトの以下記事でも詳しく解説しているので、こちらもご参考ください。

CSSファイルを読み込む

このままではbody要素内にHTMLタグを書いてもスタイルシート（CSS）によるスタイルがあたらないので、これを読み込むための記述をします。

.cssファイルの読み込みは、link要素を使用します。link要素は「外部リソースを読み込む」タグでCSSファイルのほか、RSSフィードのリンクもlink要素で読み込みます。「外部リソース」といっても他のサイトということではなく、「HTMLファイルから見て外にあるリソース」のことを指します。JavaScriptの.jsファイルも外部リソースにあたります。

<link rel="stylesheet" href="./css/style.css">

link要素のrel属性にstylesheetを指定します。この指定により、「このリソースのリンク先はスタイルシートである」と宣言しています。

href属性には、CSSファイルのパスを指定します。このパス指定は、CSSファイルを読み込むHTMLファイルから見た相対パスのほか、https://からはじまる絶対パス、サイトのドキュメントルート（public_htmlなど）である/からはじまるルートパスでも指定できますが、いったんローカルのPC上で作業するのであれば、相対パスでの記述をおすすめします。

上記のパス指定では、index.htmlから見て/cssディレクトリ内のstyle.cssファイルを読み込んでいます。

かつてはtype="text/css"という属性値も入れていましたが、現在では省略可能であり記述は不要です。

なお、link要素にはmedia属性というものもあります。これは読み込むCSSファイルの対象メディア（プリント用など）を指定するものですが、詳細はCSSのチャプターで解説します。

media属性の記述を省略した場合、対象は「すべて（all）」であり、通常のWebサイトのレイアウトとしては省略で問題ありません。

ここまでに記述したコード

ここまで記述したHTML文書の中身です。

<!DOCTYPE html>

<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="format-detection" content="telephone=no">
  <meta name="robots" content="noindex,nofollow,noarchive">
  <title>My Profile</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>

<!-- ここに記述された内容がブラウザの画面に表示される -->

</body>
</html>

この状態では、index.htmlをブラウザで開いても画面が真っ白でなにも表示されません。次のチャプターから少しずつ表示用のHTMLを書いていきます。

参考情報など

このチャプターで解説した各HTMLタグについて、詳細の仕様を知りたい場合は、以下MDN (MDN Web Docs)のドキュメントもご覧ください。

以下はmeta要素のname="format-detection"属性に関するAppleのドキュメントです。ページ自体が古いものなので、meta要素の情報については、上記MDNの方をご参考ください。

results matching ""

    No results matching ""