HTML/CSS入門 2021: HTML Living Standardを知ろう

HTMLとは、主にウェブページを制作するために使われる言語で「HTMLタグ」というものを利用して、各要素に「見出し」や「強調」などの「意味づけ」をするためのものです。

HTMLはこれまで、W3C(World Wide Web Consosium) という標準化団体によって規格が策定され、そのバージョン番号と共に「勧告」がされていましたが、2020年に W3Cは策定作業をやめ、Googleや Appleなどのブラウザーベンダーが中心の団体である「WHATWG(Web Hypertext Application Technology Working Group)」が策定する「HTML Living Standard」と呼ばれるものが標準となりました。

この記事では、そんな HTMLの基本を学び、この後に続く CSSなどの知識に繋げていきましょう。

HTML制作に必要なソフト

HTMLはエディターとウェブブラウザーがあれば開発が可能です。とはいえ、OSに標準で付属してくるエディターやブラウザーでは、開発に適していないため、ここでは無償で利用できる Visual Studio CodeGoogle Chromeを利用するとよいでしょう。

それぞれダウンロードして、セットアップしておいてください。

HTMLを書いてみよう

それでは、実際に HTMLを書いてみましょう。Visual Studio Codeを起動したら、次のような内容を入力します。

<h1>ともすた</h1>

これをデスクトップなどに「index.html」などの名前で保存して、ウェブブラウザーにドラッグドロップなどで開くと、次のような画面が表示されます。

「ともすた」と入力したメッセージが画面に表示されていますが、その前後に記述した記号は表示されていません。実はこの、「<」と「>」で囲まれた記号が「HTMLタグ」といい、ウェブブラウザーにその内容を指示するための言語となります。

HTMLは次のような書式で成り立っています。

開始タグと終了タグで対象の文字列などを挟み込む。こうしてできたものを「要素」と言います。

開始タグと、それとペアになる終了タグで挟むことで、その間の文字列などに対して意味をつけることができます。例えばここでは「h1」という「見出し1」を意味するタグで挟んでいるため、「ともすた」という文字列が「見出し1である」という意味づけをしました。

これによってウェブブラウザーは、少し大きく太い文字で表示したというわけです。

このように、対象を挟むことを「マークアップ」と呼びます。HTMLは、ウェブページ(HyperTextといいます)をマークアップ(Markup)という手法を使って作る言語(Language)ということで、頭文字を取って HTMLと呼ばれます。

主な HTMLタグ

HTMLタグは、現状 100種類以上が定義されています。これを正しく記述する事で、文書の各要素に意味を付加することができます。

すべてのタグを確認する場合は、HTML Living Standardの仕様書を確認するか Mozilla Developer Networkなどを確認するとよいでしょう。(最新の仕様は、WHATWGの仕様書になります)

属性で付加情報を使う

HTMLタグの種類によっては、タグ単体では意味づけができないことがあります。例えば、他のページにリンクをするための「a」というタグを利用しましょう。次のように記述しても正しく機能しません。

<a>ともすた</a>

これは、「リンク先のアドレス」が示されていないためで、「a」というタグは「href」という「属性」という付加情報が必要になります。これは次のように記述します。

<a href="https://tomosta.jp">ともすた</a>

これで正しく機能します。

属性は、タグによって使うものや使えるものが決まっていて、次のように属性名と値をタグの中に記述して利用します。

どのタグでどんな属性が利用できるかは、各タグのリファレンスを確認します。

タグの入れ子

HTMLタグは、タグの中にタグを入れる「入れ子」という構造を作る事で、複数の意味づけをすることができます。例えば、次の例を見ていきましょう。

<a href="https://tomosta.jp"><strong>学ぶ。をちゃんと</strong></a>

この場合、「a」は「リンク」を意味するタグで、「strong」は「強調」を意味するタグです。これによってこの要素は「強調したリンク」という2つの意味を付加することができます。実際にブラウザーでも強調したリンクとして表示されます。

ただし、入れ子構造をする場合は終了タグの順番に注意が必要です。開始タグの順番と合わせて終了タグを記述する必要があります。例えば、次の例は正しくありません。

<a href="https://tomosta.jp"><strong>学ぶ。をちゃんと</a></strong>

「strong」が後に開始したにもかかわらず、「a」が先に終了してしまっています。この場合、ウェブブラウザーでの表示は基本的には変化はありません。ウェブブラウザーは、HTMLが多少間違えていても解釈が可能な範囲であれば、正常に表示しようと試みます。

とはいえ、文法的に正しくないため、どこかのタイミングで正しく表示されなくなったり、検索エンジンなどに正しく認識されなくなってしまうなど、不具合が起こる可能性があります。そこで、「バリデーター」というツールを利用して、HTMLの正しさを検査する必要があります。

HTMLバリデータを利用しよう

HTMLバリデータは、HTMLの文法が正しいかを検査してくれるツールで、W3Cが提供しています。

ここに、アドレスやファイル、又は直接入力で HTMLを入力して検査結果を確認します。例えば、先の例を入力すると、次のようにエラーが表示されます。

そのため、これを修正する必要があるというわけです。こうして、バリデーターのエラーがなくなるまで、HTMLを修正していくとよいでしょう。ただし、ここまでの HTMLは実は文法的に正しくないため、エラーが発生し続けてしまいます。これを取り除くために「決まり文句」を記述して行きましょう。

HTMLの決まり文句

HTMLにはここまで記述したような「表示したい内容」を記述する以外に、ウェブブラウザーに必要な情報を与えるための「決まり文句」があります。これを正しく指定しないと、表示が正しく行われなかったりなどの不具合が起こる可能性があります。あらかじめ、次のような文書を作成しておきましょう。

主なタグは次の通りです。

<!DOCTYPE html>

DOCTYPE宣言というもので、ここでは作成している文書が HTML Living Standardで制作されていることを示します。それまでは、HTMLのバージョン番号などを含めた DOCTYPE宣言を記述していましたが、Living Standardの前身である「HTML 5」からはこのような簡素な指定になりました。

<html lang=”ja”>

この文書が HTML文書であり、日本語(ja)で記述されていることを示します。ja以外の文書を日本語環境のブラウザーで表示しようとすると、翻訳機能が働くことがあります。そのため、正しい言語を指定しましょう。

<head>, <body>

<html>タグの中には、<head>と <body>のみが記述できます。「head」にはブラウザーに必要な情報を、「body」には実際に表示したい内容を記述します。つまり、ここまで記述した内容は実際には「body」タグ内に記述する必要があるというわけです。

<meta charset=”UTF-8″>

この文書が、UTF-8の文字コードで記述されていることを示します。文字コードについてはこの後紹介します。

<title>

この文書のタイトルです。ブラウザーのタブ部分や、Twitterなどでシェアしたとき、検索エンジンの検索結果などに表示されます。

UTF-8ってなに?

UTF-8というのは、文字をデジタルデータとして管理するための「コード表」の1つです。これまで日本語には、Microsoftの「Shift JIS(SJIS)」や UNIX等で使われていた「EUC-JP」、そして電子メールなどで使われる JISコードなどが存在しており、混在していました。

そのため、正しい文字コードを指定して作成しないと、「文字化け」と呼ばれる読めない文章になってしまう恐れがありました。そこで、日本語を含めた世界の各言語を統一した文字コードとして「Unicode(ユニコード)」というコードが策定され、その中の「UTF-8」が現在では広く使われています。

Visual Studio Codeでも標準の文字コードは、UTF-8となっているため、現在ではあまり意識する必要はありませんが、決まり文句として記述しておきましょう。

画像を貼ろう

ウェブページを作る際、文字情報だけでは伝えきれない場合は画像を活用することができます。ただし、ウェブで利用できる画像には制限があり、次の各種類のみ利用できます。これらは、対応した画像編集ソフト(Adobe Photoshop / Illustrator / XDや Affinity Designerや Canvaなど)で「書き出し」という操作によって保存したりできます。

それぞれの特徴について紹介しましょう。

JPEG(ジェイペグ)

写真などで広く利用されている形式で、デジカメやスマホで撮影した場合もこの形式になる事が多いです。写真を「圧縮(非可逆圧縮)」という操作を加えることで、サイズを小さくすることができるのが特徴ですが、イラストのような色の差がはっきりした画像は、ぼやけたように見えてしまうことがあるため、あまり適していません。

PNG(ピング)

イラストに適した形式で、非常にきれいに圧縮できます。ただし、写真を圧縮しようとするとファイルサイズがかなり大きくなってしまうため、バランスをみながら形式を決めていく必要があります。

SVG(エスブイジー)

比較的新しい形式で、「ベクター形式」である事が特徴です。JPEGや PNGは「ビットマップ形式」と呼ばれる、画素を集めて作られたもので、これは拡大をすると画素が大きくなってしまって荒れてしまうと言う欠点があります。

しかし、ベクター形式の場合は線の場所や太さの「情報」だけを持っているため、拡大しても再計算をすることで非常に美しい状態を保つことができます。

ただし、SVG形式はベクター形式に対応した画像編集ソフトが必要となるため、どんな画像でも SVGにできるとは限りません。また、古いウェブブラウザーでは表示できないものもあります。

GIF(ジフ・ギフ)

PNG形式が登場する前に使われていた画像形式ですが、現在ではほとんど使われていません。GIFは簡単なアニメーションを作れる特徴があるため、その制作に一部利用されています。

仮の画像を取得できる Lorem Picsumを使って画像を貼ろう

それでは、実際に画像を貼ってみましょう。

画像を利用する場合、てきとうな画像を準備する必要がありますが、とりあえずてきとうな画像を準備した場合、「Lorem Picsum」というサービスを利用すると便利です。

次のようなアドレスを使えば、簡単に写真を取得できます。

https://picsum.photos/200/300

そしたら、次のように「img」タグを記述します。

<img src="https://picsum.photos/200/300" alt="写真">

すると、画像が表示されます。

imgタグには次の属性が必要です。

src属性

「Source(ソース)」の略称で、画像の「パス」を指定します。パスについてはこの後紹介します。

alt属性

「Alternative」の略称で、代わりとなる文章を指定します。画像は、音声でウェブサイトの内容を聞いている場合など、環境によっては正しく表示できないことがあり、それによって文書の内容が伝わらなくなることがあります。そのようなときに、画像の内容をテキストや音声で伝えるための内容を記述します。

ページの装飾的な画像で、特に意味がない場合は次のように alt属性に空の内容を指定することができます。

<img src="https://picsum.photos/200/300" alt="">

ただし、属性自体を指定してしまうと内容が不要なのか、指定をし忘れたのかの判断ができなくなるため、明示的に空の属性を指定しておくとよいでしょう。

終了タグのない「空要素」

「img」タグにはもう1つ、他のタグとは違って「終了タグ」がありません。これは、「マークアップ」をする必要がないタグであるためで、このようなタグを「空要素」と言います。

パスとは

「img」タグで画像を貼る場合や、「a」タグでリンクを貼る場合は、その場所を示す必要があります。これを「パス」といい、例えば次のようにアドレスをすべて指定する方法を「絶対パス」と言います。

https://example.com/img/logo.svg

この他にも、いくつかの方法があります。

絶対パス

アドレスをすべて指定する方法で、最も確実にリンクをすることができます。ただし、パスが長くなりがちなためすぐ近くにある場所を示したい場合にはあまり適していません。

相対パス

自分の場所からの相対的な場所で示す方法です。例えば、自分と同じ場所にあるファイルを示す場合はファイル名やディレクトリー名だけで表すことができます。

img/logo.svg

また、自分より上位のディレクトリーを示すには「..」という記述を使うことができます。例えば次のような場合は「../img/char.png」と指定します。

相対パスは最も手軽に利用できる方法ですが、ファイルの場所を移動するとリンクが途切れてしまうなどのデメリットがあります。また、WordPressなどのシステムではファイルの場所が定まらずに相対パスが利用できないケースがあります。

ルート相対パス

相対パスと絶対パスのデメリットを解消するもので、「/」から始めることでアドレスの先頭部分(ドメイン部分)を省略できます。

/img/logo.svg

リンクも途切れにくく、また短く記述できるため最も便利な方法ですが、ウェブサーバーがないとリンクが機能しないため、HTMLを制作している途中では利用できないなどのデメリットがあります。

ともすたチャンネルに
チャンネル登録する