Lesson4　3. HTMLの基本ルール

Lesson4　3. HTMLの基本ルール

3.1 HTMLファイルの作成

HTMLファイルはテキストファイルです。
テキストファイルの編集には「テキストエディタ」を使用します。
（Lesson10でテキストエディタを使用します。）

既存のHTMLファイルを開いて編集したい際は「メモ帳」などの簡易的なテキストエディタでも良いのですが、本格的にHTMLコーディングやPHPコーディングをする際は入力補助機能の充実したエディタを使用します。

新規でHTMLファイルを作成・保存する場合ですが、通常テキストファイルは拡張子が「.txt」で保存されます。
これをHTML文書としてWebブラウザなどに認識させたい場合は、拡張子を「.html」に変更します。

その反対に既存のHTMLファイルの拡張子を.txtに変更した場合は、Webブラウザで開いてもソースコードしか表示されなくなります。

このLesson4-3.4では、CodePenというサービスを使って説明します。
CodePenを使うと上記のようにページ上にHTML/CSSを埋め込んで動作確認をすることができます。

CodePen

CodePenで表示されているコードを、 みなさんも自由に変更を加えてみてください。
実際に色々と試してみることで、HTML/CSSの動作を確認してください。

3.2 DOCTYPEとhtml

HTML文書の冒頭には、この文章がHTMLのどのバージョンで書かれているのかを宣言する「DOCTYPE宣言」が必要です。

HTMLは緩やかに進化しており、その過程でいくつものバージョンが存在します。
現在主流のバージョンは「HTML5」ですが、少し古いバージョンの「HTML4」「HTML4.01」などもまだ多く使われています。
同じHTMLタグでもバージョンにより解釈の違いが存在するため、最初にDOCTYPE宣言をするわけです。

以下はHTML5のDOCTYPE宣言です。

<!DOCTYPE html>

DOCTYPE宣言の下からHTML文書を記述していきます。
HTML文書全体はhtmlタグで囲わなければいけません。

<!DOCTYPE html>
<html>
    <!-- ここにHTML文書がはいります -->
</html>

3.3 head と body

HTML文書の中身を大きく分けると「head」と「body」に分かれます。
それぞれ<head>タグと<body>タグで囲います。

head要素内には文書に関する「ヘッダー情報」を記述し、body要素には「本文」を記述します。
ヘッダー情報(head)には閲覧者に表示されない設定やページ情報などを記述し、本文(body)には閲覧者に見てもらうためのWebページを記述します。

ここでいうヘッダー情報とは、Webデザイン上のヘッダー（サイトロゴやグローバルナビゲーションがある箇所）ではありませんので注意しましょう。Webデザイン上のヘッダー部分は閲覧者に表示されるためbody要素内に記述します。

headタグ内に記述するヘッダー情報には、ページタイトル、外部スタイルシートの場所、外部JavaScriptファイルの場所、文字エンコーディング情報、ページの概要、などが含まれます。
ブラウザで表示した際に、これらの内容は（ページタイトルを除き）表示されません。

ソースコードは以下になります。

<!DOCTYPE html>
<html>
    <head>
        <!-- ヘッダー情報がここにはいります -->
    </head>
    <body>
        <!-- 本文がここにはいります。 -->
    </body>
</html>

この形が全てのHTML文書の基本となります。

3.4 HTMLの基本

彼は（元気よく）あいさつをしました。
「おはようございます」

上の文章は私たちが普段メールや小説などで目にしている、ごく一般的な日本語の表現です。
これらは文章の一部を「」や（）で囲うことにより、意味を伝えています。
「」は会話、（）は注釈、という意味ですね。

HTMLも同じように、私達が普段使っている文章をタグで囲い意味をつけます。

<h1>これは見出しです</h1>
<p>これは段落です</p>

HTMLでは、<h1>や<p>などの要素を組み合わせてWEBサイトを制作していきます。
文章を囲っている最初のタグを「開始タグ」、最後のタグを「終了タグ」と呼び、
タグ名の頭に「/（スラッシュ）」をつけたものが終了タグとなります。

HTML要素の種類 >>

みなさんご存知のように、HTMLではリンクを設定したり画像を表示することもできます。
これら外部ファイルとの連携にはURLを使用します。

<a href="https://l-works.design/blog/">ぬるま湯デザイン通信</a>
<img src="/img/photo.jpg">

以下が実際に実装したコードになります↓↓

aタグ：ぬるま湯デザイン通信

<a>タグで囲った文章は、指定したURLにページ遷移されます。
<img>タグは指定したURLの画像を表示します。URLの指定には絶対パス（URLを全て記述する）のほかに、相対パス（この文書からみた位置を記述）も使用できます。

中には<img>要素のように、終了タグを必要としない要素も少数ながら存在します。

彼は（元気よく）あいさつをしました。<br> <!-- brは改行です -->
「おはようございます」

<!--と-->で囲われた部分は、コメントとして扱われます。コメントはブラウザがWebページを表示する際には無視されます。

HTML文書内では半角スペースや改行は無視されるため、改行をしたい箇所には <br> を挿入しましょう。

3.4 HTML練習

CodePen

 CodePenでは、head要素内を記述できません。body要素内のみ記述できます。head要素とbody要素については後述します。  

ページに埋め込まれたCodePenの画面構成

CSS

HTMLタグは文章の意味を説明するためだけに使い、見栄えを変更するために使用してはいけません。
例えば <br> を連続で使用することで文章間のスペースを調整することができますが、この使い方は本来の使用方法ではありません。

HTMLのデザインを指定する際はCSS（カスケーディング・スタイル・シート）を使用します。

CSSファイルには「（HTML文書内の）◯◯要素の△△を□□にする」という指定を書き込み、HTML文書内で外部ファイルとしてCSSファイルを読み込みます。

<p>pタグは段落を囲います。強調したい箇所は<strong>strongタグ</strong>で囲います</p>

上のHTML文書のstrong要素を太字にして文字色を赤にしたい場合、CSSファイルにはこのように記述します。

strong {
    font-weight: 800;
    color: red;
}

このようにCSSでデザインされたHTML文書をWebブラウザで表示すると、私達が普段みている美しいWebページの姿になります。

 

3.4 属性

多くのタグは属性と合わせて使用します。

例えば画像を表示するimgタグは画像の場所を指定するsrc属性と、リンクを表示するaタグはリンク先URLを指定するhref属性などと合わせて使用します。

先ほど登場したコードを見てみましょう。

<a href="https://l-works.design/">ライブワークス</a>
<img src="img/photo.jpg">

上のaタグにはhref属性が、imgタグにはsrc属性がそれぞれ使われています。

タグによって使用可能な属性は異なりますので、タグとセットで覚えるようにしましょう。

3.5 クラスとID

class属性とID属性を理解することは、Web制作を進める上で非常に重要です。

これらの2つの属性は、CSSで特定の要素だけのデザインを変更するときに使用されます。

例えば以下のコードを見てください。

<p>天気をお伝えします</p>
<p>「本日は晴れるでしょう」</p>

会話の箇所（2段落目）だけを赤文字にしたい場合、どうすればよいでしょうか？

CSSで「p要素を赤文字にする」と指定した場合、HTML文書内の全てのp要素が赤文字になってしまいます。
そんなときにclass属性を使います。

<p>天気をお伝えします</p>
<p class="today">「本日は晴れるでしょう」</p>

このようにclass属性を付加することで、CSSで「class属性がtodayのp要素を赤文字にする」と指定することができます。
id属性も同じように使用できます。

class属性とid属性の違い

  • class属性は、HTML文書内で何度も同じスタイルを適用するグループに与えます
  • id属性は、HTML文書内で特定の1つの要素に対して一意のidを与えます

「赤文字にする」「文字サイズを大きくする」のように、文書内で繰り返し同じスタイルを使用する際にはclass属性を使い、「ここはサイドバー」「ここはフッター」のように文書内で唯一の要素に対してはidを与えます。

インデントとは、プログラムの構造を見やすくするために行などを、空白文字によって字下げすることを指します。

HTMLやCSSでは、行頭のスペースやタブといった空白文字を無視することになっているので、インデントをつけることができるのです。
HTML文書を作成する際は、開始タグと終了タグの関係を把握しやすいようにインデントをつけることが一般的です。
上の例のように、各タグごとにインデントをつけることで、開始タグと終了タグが視覚的に把握しやすくなります。
インデントはスペースでもタブ文字でも良いですし、文字数も特に決められてはいませんが、2文字または4文字が推奨されていますので、レッスンでも2文字または4文字が使用されています。