※本記事は「HTML&CSS 基礎講座（全4回）」の第1回目の内容を踏まえて作成しています
第1回目は「HTMLとはなにか」「HTMLの記述ルール」などの基礎知識や、「絶対パス・相対パス」といった重要な概念の解説がありました。
本講座では、講座内容をただの知識で終わらせないために、講座参加者自身が実際に1つのサイトを作ることをゴールとしています。本記事でHTML&CSSを勉強する人も、実際に手を動かしてみることをおすすめします。自分で記述したHTML&CSSがブラウザにちゃんと反映されていると、格別の達成感を得られるはずです。
HTMLとは
HTML（Hyper Text Markup Language）は、Webページを表示するためのマークアップ言語の1つです。マークアップとは、コンテンツの前後にタグと呼ばれる印（マーク）をつけて意味づけをすることを指します。
HTMLが実際にどのように使われているかを知るために、Webページのソースコードを確認してみましょう。パソコンで任意のWebページを表示し、以下のショートカットキーを押してください。
Mac : opt + command + U
Windows : Alt + Ctrl + U
すると、以下のようなページが表示されます。
これがHTMLです。素人には呪文のようにしか見えませんが、本講座を一通り勉強すれば、何が書かれ、そのWebページがどのような構成で作られているのかが分かるようになります。
HTMLのバージョン
現在は2014年に勧告されたHTML5が主流で、サイト制作における標準規格となっています。「HTML5」という表記は、5.1や5.2といったバージョンの小数点以下を省略したものです。バージョンによって使えるタグやルールが異なるため、更新情報はしっかりとチェックしておく必要があります。
現在はHTML5の中でも2017年に勧告されたバージョン5.2が使用されていますが、このバージョンの勧告とともに、バージョン5.3の草案も公開されているため、近いうちに更新される可能性があります。正確な更新情報については、Web技術の標準化団体W3Cのサイトで確認すると良いでしょう。ただし英語のサイトなので、最初のうちは日本のサイトで情報収集をしても問題ありません。
HTML5になって変わったこと
HTML5になって、以下のような点が変わりました。
- たくさんのブラウザに対応できるようになった
- 動画や音声の挿入が簡単になった
- すっきりした構造で書けるようになった
- タグの意味が見直された
- アプリケーションが作りやすくなった
全体的に記述が楽になったという特徴があります。
またHTML5の大きな特徴の1つとして、文書型宣言（DOCTYPE宣言）の記述が簡素である点が挙げられます。文書型宣言とは、当該HTML文書がどのバージョンで作成しているかを明示するもので、必ずHTML文書の一番上に記載する必要があります。
この文書型宣言がHTML4では長く、かつ種類もいくつかありました。しかし、HTML5では<!DOCTYPE html>とスッキリした形に統一されました。
HTMLの記述ルール
HTMLの記述は以下のように、「コンテンツ」を「開始タグ」と「終了タグ」で囲むのが基本となります。そして、このコンテンツとタグを合わせた全体を「要素」と呼びます。
こんにちは
上記はpタグと呼ばれるものを用いた例です。
が開始タグで、終了タグはタグ名の前にスラッシュを挿入してと記入します。一部に終了タグがいらないタグもありますが、それらは随時覚えていくとして、基本は「開始タグ」と「終了タグ」がセットとなることを頭に入れてください。
「終了タグ」の書き忘れはよくあるミスなので注意しましょう。特に「開始タグ→コンテンツ→終了タグ」の順に書くとタグの閉じ忘れが起きやすいです。したがって書き忘れを防ぐために、「開始タグ→終了タグ→コンテンツ」のように、コンテンツを記入する前に、先にタグを閉じておくのがポイントとなります。
開始タグ内に「属性」を追加することで、各要素に固有の情報を追加していくことができます。今は重要性が分からないと思いますが、CSSを勉強すればすぐに属性の便利さが理解できるはずです。
属性は以下の通り、「属性名」と「属性値」をイコールで結びます。
<a href=”#” class=”more-btn”>もっと見る</a>aタグは「anchor（アンカー）」を略したもので、主にリンクを設置する際に用いられます。
上記のaタグの開始タグ内に記述された内容のうち、「href」（リンク先の指定）や「class」（要素に分類上の名前を指定）が「属性名」で、「=」の後ろでダブルクオテーションマーク内に書かれるのを「属性値」と言います。「属性名」は既存のものが使われますが、「属性値」には基本的に自由な値を設定することができます。
また例のように、属性は複数追加することができます。複数の属性を与える場合は、1つ前の属性の後に半角スペースで区切って記述します。
なおHTMLの記述の際は、「入れ子」構造に注意する必要があります。
入れ子とは、要素内に複数の要素を挿入する記述方法です。以下の例のように、pタグの中にaタグを包含して、入れ子構造にすることも可能です。
<p>
<a href=”#” class=”more-btn”>もっと見る</a>
</p>
しかし入れ子構造にすることで、終了タグの位置を誤るリスクが高まります。以下は失敗例です。
<p><a href=”#” class=”more-btn”>もっと見る</p></a>pタグの中にaタグを包含させたいのに、がの前に出てしまって、包含関係が崩れてしまっています。入れ子構造にすることで以上のようなミスが起こるため、やはり先ほど述べたように、開始タグと終了タグをはじめにセットで記述しておくことが重要となります。
HTMLの構造
HTMLの基本構造は以下の画像の通りです。大きく「head」と「body」に分かれて、さらに「body」の中に「header」「main」「footer」などが内包されます。
head
headの中には、当該文書のタイトルや文字コード、サイトの概要などの情報を記載します。また、CSSやJavaScriptなどの外部読み込みファイルの指定もhead内で行います。
body
bodyの中にはコンテンツを記載します。したがって、bodyの中に記載された内容が、実際にブラウザに表示される部分となります。
またbodyの中は、大きく「header」「main(article)」「footer」の3つに分かれます。ただし必要に応じて、nav(ナビゲーション)やaside(サイドバーなど補足的なセクション)を使用しマークアップします。
HTMLの基本の雛形
HTML文書には以下のような基本の雛形があります。ただし、一部は現在あまり使われないものもあります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
</body>
</html>
- <html lang=”en”>･･･文書の言語コード。「en」は「english」のことを指すため、基本は「ja」に書き換えて、言語コードを「japanese(日本語)」に変更します。
- <meta charset=”UTF-8”>･･･文字コードを指定。初めのうちは「UTF-8」だけで大丈夫です。属性値は大文字でも小文字でも問題ありません。
- <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>･･･インターネットエクスプローラーを開く際に最新版で表示させることを指示するもの。現在はあまり必要がないので、本講座でも使用しません。
- <meta name=”viewport”~>･･･レスポンシブ表示設定。レスポンシブとは、デバイスに合った表示にすることを意味します。したがって、スマホやタブレット、パソコンなど様々な大きさのデバイスが普及している現在、非常に重要な要素となります。
- <title>･･･当該webページのタイトル。
- <meta name=”keyword” content=””>･･･キーワード対策。以前は検索上位を獲得する対策の1つとして用いられていましたが、現在は大手検索エンジンが無視しているため、あまり重要性は高くありません。
- <meta name=”description” content=””>･･･文書の概要。ここに書いた内容が検索結果の一覧に表示されることがあるため、重要な要素です。
以上がHTMLの雛形で、新しい文書を作成する度に毎回記入する必要があります。しかし、毎度手打ちするのは面倒なので、慣れてきたらよく使うテンプレートファイルを用意しておくと良いでしょう。
また本講座で使用するVScodeと呼ばれるエディターの場合、HTML文書の1行目に「!」を記入しtabキーを入力すると、上述のような雛形が自動生成されるので、積極的に活用していきましょう。
絶対パス・相対パスとは
HTML文書内には、画像や音声などを挿入する場合が多々あります。その際、どの画像ファイル・音声ファイルを使用するかをコンピューターに正しく認識してもらうために、ファイルの指定の仕方に気をつける必要があります。ファイルの指定方法は、以下の2つに分けられます。
1つは「絶対パス」。http(s)から始まるURLを使用して、ファイルをダイレクトに指定する方法です。主に外部ファイルなど、違うサーバのファイルを指定する場合に使用します。ファイルがどこにあっても、URLという一義的な値で指定するため常に同じパスが示されます。
絶対パスの例：<img src=”https://XXXXX.com/img/news.png” alt=”news”>
もう1つは「相対パス」。現在のファイルの位置から目的のファイルまでの位置を相対的に指定する方法です。サイト内部のファイルを指定する場合に使用します。上の階層に戻る場合は、「../」と書き、下の階層にあるファイルを指定する場合は、「/」で降りていきます。
相対パスの例：<img src=”../../img/news.png” alt=”news”>（この例では、現在作業中のファイルから2つ階層を遡り、その階層にあるimgフォルダ内のnews.pngの画像を指定する、といった流れになります。）
イメージとしては、人に自分の家を教える場合、住所だけ教えるのが「絶対パス」で、道順を教えるのが「相対パス」です。
見出しタグの付け方・使い方
テキストに見出しを付ける場合は、「見出しタグ」を使用します。見出しタグは以下のように、数字が小さいほど大きな見出しになります。
<h1>これは見出しです</h1>
<h2>これは見出しです</h2>
<h3>これは見出しです</h3>
<h4>これは見出しです</h4>
<h5>これは見出しです</h5>
通常h1タグは1ページに１つです。また、数字は飛ばして使うことは好ましくありません。つまり、<h2>の次に<h4>を持ってくるようなことは避けましょう。階層構造を無視した見出し設定を行うと、検索エンジンに悪い評価を受けてしまいます。
文字サイズを調整するために見出しタグを使いたくなるかもしれませんが、誤った使用方法です。文字サイズを変更したい場合は、見出しタグを乱用するのではなく、CSSで詳細な設定を行います。見出しタグはあくまでコンテンツに階層を与えるものだと理解しておきましょう。
VSCode実演
実演では、実際に1つのサイトを作ることを目指します。では1つずつ順を追って説明していきます。
VSコードを開く
まずは事前にダウンロードしたVSCodeを開いてください。まだVSCodeのダウンロード・日本語化が完了していない人は、以下のサイトを参考に用意してください。
VSCodeのインストール・日本語化の方法：https://breezegroup.co.jp/201904/visualstudiocode/
ファイルを開く
VSCodeを開くと、以下の画像のような表示になります。
次に本講座用にダウンロードしてもらった「kiso-kouza」というフォルダを開くために、左上隅にある紙のようなマークをクリックします。すると以下の画像のように表示されます。
そして「フォルダーを開く」をクリックして、「kiso-kouza」を開いてください。ファイルの場所によって多少表示が異なる場合がありますが、以下の通りになれば問題ありません。
テキストファイルを開く
次は「kiso-kouza」のフォルダ内に、「index.html」というファイルを作ります。ファイル名の最後に「.html」を付けることで自動的にHTMLファイルになります。
「index.html」というファイルを作ったら、右側にHTML文書が生成されます。
- 雛形を作成する
次はHTML文書の雛形を作成していきます。まずは先ほど解説したように、「!」を入力してtabキーを押します。
では次に自動生成された雛形を、「HTMLの基本の雛形」の見出しで説明した内容を踏まえて、以下の画像ようにカスタマイズしていきます。
変更点は以下の通りです。
- <html lang=”en”> → <html lang=”ja”>
- <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>の削除
- titleタグの内容を「保護猫カフェドマーニャ」に変更
- <meta name=”description” 〜>を追加。
実際に使うとすぐに分かるのですが、VSCodeには補助機能が用意されています。
たとえば、<meta>と記入したい場合、「met」あたりまで打つと候補が提示されるので、候補の中から「meta」を選択すると、自動で<meta>が生成されます。
補助機能を上手く利用することで記述のスピードが大幅にアップするので、積極的に活用していきましょう。
bodyの中に骨子を作成する
次にbodyの中に、「header」「main」「footer」の3つのパーツをあらかじめ用意しておきましょう。
header内に必要な情報を記入する
次は「header」内に画像等、必要な情報を記入していきます。最終的には以下の画像の通りになります。
記述した内容について詳しく見ていきます。なお行数については、必ずしも一致している必要はありません。
- 11行目
-
imgタグには必ずsrc属性が必要になります。src属性には画像ファイルの場所（パス）を示す属性値を記入します。今回は画像のように相対パスで書いています。imgフォルダは現在の作業中のファイルと同じ階層にあるので、「img/main.png」という記述になります。
alt属性は、当該画像がどのような内容かを説明する文です。画像が上手く表示されなかった場合に表示されます。また、webページを読み上げ機能を使って閲覧する場合には、画像の代わりにalt属性に記載された内容が読み上げられます。
なお、imgタグには終了タグはありません。
- 12行目
-
入れ子構造になっています。つまり、imgタグで挿入した画像を、h1の見出しとして設定しているのです。
- 13~21行目
-
navタグでナビゲーションを作成します。ナビゲーションの中には複数の項目が含まれるので、箇条書きリストを表示するulタグを用います。
そして、各項目にはliタグを使います。liタグは「li*5」と書くことで、一度で5つのliタグを作成することができます。 ではこの時点一度、ブラウザ上でどのように表示されるかを見てみましょう。
VSCodeから一旦離れて、「kiso-kouza」フォルダ内の「index.html」を開いてみましょう。
「index.html」をダブルクリックすると、ブラウザ上でHTMLファイルを開くことができます。すると、以下のように表示されるはずです。
画像が表示されていないなどの場合は、パスの指定に誤りがあるなど必ずミスがあるはずで。もう一度画像と見比べて見ましょう。
main内に必要な情報を記入する
次はmainを埋めていきます。
では記入した内容について解説していきます。
・24行目他
main内をいくつかのパーツで分けるために、それぞれのパーツをsectionタグで囲います。sectionで囲うことによって、本で言う「1章」「2章」のように、まとまり与えることができます。
・28~31行目
日付を記入する場合は、コンピューターに日付であることを認識してもらうために、timeタグを使用します。そしてdatetime属性に日付を属性値として与えます。
timeタグの終了タグの位置には注意してください。<time></time>で囲うのは、あくまで日付だけです。
・46行目
aタグはリンクを設置する際に用いますが、今回は「もっと見る」の先にページを用意していないので、「#」としておきます。
・51~55行目
pタグは1つの段落であることを示すタグです。pタグ内では改行を行ったとしても、実際の表示には反映されません。そこでbrタグを用いて改行を実現します。ただし、行空きを作る場合にはbrタグは推奨されないので、新たにpタグを使います（上の画像では55行目にあたります）。
・59~68行目
ある項目と、その項目の内容説明がペアとなるような形式のリストを作成する場合、dl（definition list）タグが便利です。dlタグの中では、dt(definition term)タグで項目を定義し、dd(definition description)タグで項目の詳細を説明します。したがってdtタグddタグはセットとなるので、記入する順番には注意してください。
ではブラウザ上の表示を見てみましょう。必要項目が過不足無く表示されているか、dlタグのリストが項目と項目の説明がペアになっているかなどに注意して確認してみてください。
まとめ
本記事ではHTMLの基礎知識を解説してきました。おそらく「全て理解できた」という人は少ないでしょう。たとえば、CSSを勉強していない段階では、属性の役割について実感の伴った理解をすることは困難です。しかし心配ありません。HTMLは実際に手を動かしながら少しずつ理解していくものです。ぜひもう一度手を動かしながら復習してみてください。
次回はCSSの基礎を解説します。
コメント