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文書やRSSフィードなどで利用されるXML文書におけるコメント表記です。コメントアウトともいい、この記述部分はブラウザのソース表示では確認できますが、実際の画面上には反映されません。

html要素

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

lang属性

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

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

head要素

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

  • ウェブサイトを表示するための文字コード指定
  • コンテンツを表示する領域幅などの指定
  • 検索クローラーに対する指示
  • OGP設定
  • CSSやJavaScriptなどのリソースパス読み込み
  • ウェブサイトのタイトル情報

ここでは以下を指定しています。

meta要素

meta要素はメタデータを表示するための要素です。メタデータの意味は幅広いですが、HTML文書においては「データに関する情報」「データを定義するためのデータ」を、meta要素を使用して記述します。

ここではHTML文書の「文字コードに関する情報」を記述します。

charset属性

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

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

ウェブサイトが文字化けしている場合、HTML文書内で文字コードが指定されていないか、記述された文字コードと実際のHTML文書ファイルの文字コードが一致していないか、どちらかの可能性が高いです。自分の環境では文字化けなく表示されていても、他の人が見たら文字化けしているということもあるので、<meta charset="utf-8">も必ず記述することを推奨します。

title要素

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

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：横幅の指定（device-width＝表示デバイスの横幅 / 自動的に算出される）
  • initial-scale=1.0：ページを最初に読み込んだときの表示倍率（1.0あるいは1が規定値 / 倍率100%）

meta要素でformat-detectionを設定する

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

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

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

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

meta要素で検索クローラーのクロールを拒否する

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

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

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

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

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

link要素でCSSファイルを読み込む

現状ではHTML文書にスタイルシート（CSS）記述によるスタイルがあたらないので、これを読み込むための記述をします。

.cssファイルの読み込みには、link要素を使用します。link要素は「外部リソースを読み込む」ための要素で、CSSファイルのほか、RSSフィードのリンクもlink要素で読み込みます。

「外部リソース」といっても他のサイトということではなく、「HTMLファイルから見て外にあるリソース」のことを指します。JavaScriptの.jsファイルも外部リソースにあたりますが、こちらはscript要素のsrc属性で読み込みます。

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

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

href属性には、CSSファイルのパスを指定します。このパス指定には、以下の3つを指定できます。

  • 相対パス：リソースファイルを読み込むHTML文書ファイルの場所を起点としてパスを指定する（カレント（同階層）ディレクトリは./、ひとつ上の階層は../、ふたつ上の階層は../../）
  • 絶対パス：https://からパスを指定する（リソースファイルの読み込みに通信が発生する）
  • ルートパス：ウェブサイトのドキュメントルート（公開領域 / public_htmlなど）である/からはじめるパス指定

絶対パスは指定されたURLのファイルを参照します。また、ルートパスは実際にインターネットでWebサイトを閲覧する際には問題ありませんが、PC上で作業する際は、MAMPなどを使用しない限りそのままではパスを辿れずに読み込みエラーとなってしまいます。

WordPressなどのCMSでは絶対パスやルートパスで記述することも多いですが、通常のサイト制作でHTML文書を作成する際は、相対パスで記述することをおすすめします。

上記のパス指定では、index.htmlの場所を起点として、同階層にある/cssディレクトリ内のstyle.cssファイルを読み込んでいます。

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

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

media属性の記述を省略した場合（link要素の初期値）の対象メディアは「すべて（all）」になります。通常のウェブサイトでは、media属性値を省略した状態で問題ありません。

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

ここまで記述した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 ""