HTML

HTMLの基本

HTML（HyperText Markup Language：ハイパーテキスト・マークアップ・ランゲージ）は、Webページの内容や文書構造を記述するためのマークアップ言語です。

Webページには、見出し、文章、画像、リンク、表など、さまざまな要素が含まれています。HTMLは、これらの要素がどのような役割をもつのかを、タグと呼ばれる記号を使って記述します。

例えば、次のような内容をHTMLで表すことができます。

<h1>情報Ⅰを学ぼう</h1>
<p>情報Ⅰでは、情報社会や情報技術について学びます。</p>
<a href="https://example.com/">学習サイトを見る</a>

この例では、最初の行が見出し、2行目が段落、3行目がリンクを表しています。

HTMLで作成された文書は、通常、.htmlという拡張子を付けたテキストファイルとして保存されます。WebブラウザはHTMLを読み取り、記述された構造に従って文章や画像などを画面に表示します。

HTMLの名前に含まれる「HyperText（ハイパーテキスト）」は、文書内に設けられたリンク（ハイパーリンク）によって、別の文書や情報へ移動できるしくみを指します。「Markup（マークアップ）」は、文章などに印を付けて、その意味や構造を明らかにすることを意味します。

HTMLは、一般的なプログラミング言語とは異なり、主に文書の内容や構造を表すために使われます。

HTMLのタグ・要素・属性

HTMLでは、<と>で囲まれたタグを用いて、文書の各部分に意味を与えます。

例えば、次の記述は一つの段落を表しています。

<p>これは段落です。</p>

<p>を開始タグ、</p>を終了タグといいます。開始タグと終了タグ、およびその間の内容を合わせたものをHTMLの要素といいます。

よく使われるHTMLの要素には、次のようなものがあります。

HTMLでは、タグに属性を追加することで、要素に関する情報を指定できます。

例えば、次のHTMLは、文字列にリンクを設定したものです。

<a href="https://example.com/">学習サイトを見る</a>

hrefは、リンク先のURLを指定する属性です。利用者が「学習サイトを見る」をクリックすると、指定されたページへ移動できます。

また、画像を掲載する場合は、次のように記述します。

<img src="photo.jpg" alt="校庭に咲いている桜">

src属性は画像ファイルの場所を指定し、alt属性は画像の代わりとなるテキストを指定します。なお、img要素には終了タグがありません。

このように、HTMLはタグと属性を組み合わせることで、Webページの内容とその意味を記述します。

HTML・CSS・JavaScriptの役割

Webページを作成するときは、HTMLだけでなく、CSSやJavaScriptもよく利用されます。

それぞれの基本的な役割は次のとおりです。

例えば、Webページに「学習を始める」という見出しを置き、文字を青色にしたい場合を考えます。

まず、HTMLで見出しを記述します。

<h1>学習を始める</h1>

次に、CSSで文字色や余白を指定します。

h1 {
  color: blue;
  margin-bottom: 20px;
}

HTMLのh1要素は、その文字列が見出しであることを示します。一方、CSSは、その見出しを青色で表示し、下側に余白を設けることを指定しています。

さらに、ボタンをクリックしたときに説明文を表示したり、入力した数値に応じて計算結果を変更したりする機能には、主にJavaScriptが使われます。

つまり、HTMLが「何を、どのような意味で配置するか」、CSSが「どのように見せるか」、JavaScriptが「どのように動かすか」という役割を担っています。

ただし、これは基本的な役割分担です。HTMLにも一部の表示や動作に関係する機能があり、CSSでもアニメーションなどを実現できます。

CSSによってデザインを共通化する

複数のWebページで同じデザインを使う場合、CSSを独立したファイルとして作成すると便利です。

例えば、style.cssというファイルを用意し、その中に次のように記述します。

h1 {
  color: navy;
}

p {
  line-height: 1.8;
}

各HTML文書には、次の記述を加えます。

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

これにより、複数のHTML文書で共通のCSSファイルを使用できます。

後から見出しの色を変更したい場合も、各HTMLファイルを個別に修正する必要はなく、共通のCSSファイルを変更すればよいです。

このように、文書の構造と見た目を分離することには、修正や管理がしやすくなるという利点があります。

レスポンシブWebデザイン

パソコンとスマートフォンでは、画面の幅が大きく異なります。そのため、同じ内容でも、画面の幅に応じて配置を変えることが望ましいです。

このように、画面の大きさなどに応じて表示方法を調整する設計を、レスポンシブWebデザインといいます。

例えば、CSSのメディアクエリを使うと、画面幅に応じて配置を変更できます。

.content {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .content {
    grid-template-columns: 1fr 1fr;
  }
}

この例では、通常は1列で表示し、画面幅が800ピクセル以上の場合は2列で表示します。

HTMLで記述した文章や見出しの意味構造はそのままに、CSSだけで表示方法を切り替えられます。

HTMLとWebのしくみ

WWWとWebページ

WWW（World Wide Web）は、インターネット上の文書や画像などを、ハイパーリンクによって相互に結び付けて利用するしくみです。

WWWで利用される個々のページをWebページといい、共通する目的や内容をもち、互いに関連するWebページをまとめたものをWebサイトといいます。

例えば、学校のWebサイトには、学校紹介、入学案内、年間行事、問い合わせなど、複数のWebページが含まれています。

Webサイトの入口に当たるページはトップページやホームページと呼ばれます。「ホームページ」という言葉は、日常的にはWebサイト全体の意味で使われることもありますが、厳密には区別できます。

URLとハイパーリンク

Webページや画像など、インターネット上の情報資源の所在を示すものがURL（Uniform Resource Locator）です。

例えば、次のようなURLがあります。

https://example.com/guide/index.html

このURLは、主に次の部分から構成されます。

HTMLのa要素では、href属性にURLを指定することでハイパーリンクを作成できます。

こうしたリンクによって、利用者は関連するWebページや情報資源へ移動できます。

HTTP・HTTPS

HTTPはWebブラウザとWebサーバの間で情報をやり取りするための通信プロトコルです。

例えば、WebブラウザでWebページを開くときは、おおむね次のような流れで処理が行われます。

1. 利用者がWebブラウザでURLを指定します。
2. WebブラウザがHTTPまたはHTTPSを使ってWebサーバに情報を要求します。
3. WebサーバがHTML文書などを応答として返します。
4. Webブラウザが受信したHTMLを解釈し、必要に応じてCSSや画像なども取得してWebページを表示します。

HTTPSは、HTTPによる通信をTLSという技術で保護するしくみです。通信内容を暗号化し、盗聴や改ざんなどの危険を減らすために使われます。

HTMLとアクセシビリティ

アクセシビリティとは、障害の有無や利用環境などにかかわらず、必要な情報や機能を利用できることをいいます。

Webページでは、画面を見ることが難しい人が音声読み上げソフトを利用したり、キーボードだけで操作したりすることがあります。

HTMLで内容の意味や構造を適切に記述すると、こうした支援技術にも情報を伝えやすくなります。

見出しを適切に設定する

HTMLの見出し要素は、単に文字を大きくするためのものではありません。

h1は最上位の見出し、h2はその下位の見出し、h3はさらに下位の見出しというように、文書の階層構造を示します。

例えば、次のように記述します。

<h1>情報Ⅰ</h1>

<h2>情報社会の問題解決</h2>
<h3>情報モラル</h3>
<h3>情報セキュリティ</h3>

<h2>コンピュータとプログラミング</h2>

見出し要素を適切に使用すると、音声読み上げソフトなどで見出しの階層を把握したり、見出し単位で移動したりしやすくなります。

一方、普通の文章をCSSで大きく表示したり、太字にしたりするだけでは、それが見出しであるという意味を十分に伝えられません。

見出しの意味や階層はHTMLで表し、文字の大きさや色はCSSで指定することが基本です。

画像の代替テキスト

Webページで画像を使用するときは、img要素のalt属性によって代替テキストを指定できます。

代替テキストとは、画像が伝えている情報や役割を、文字で表したものです。

例えば、学校紹介のページに校舎の写真を掲載する場合を考えます。

<img src="school.jpg" alt="正面玄関から見た学校の校舎">

このように記述すれば、画像を見られない利用者にも、画像の内容を文字で伝えられます。

代替テキストの書き方は、画像の役割によって異なります。

特に注意したいのは、画像の見た目を機械的に説明するのではなく、その画像がページ内で果たす役割を伝えることです。

例えば、家の形をしたアイコンがトップページへのリンクになっている場合、単に「家のアイコン」と記述するよりも「トップページへ」と記述する方が、操作の目的を理解しやすくなります。

また、単に飾りとして配置された画像には、alt=""という空の代替テキストを設定することがあります。これにより、読み上げソフトが不要な説明を読み上げることを避けられます。

一方、重要な情報を含む画像には、必要な情報が伝わるようにします。複雑なグラフや図の場合は、短い代替テキストに加えて、本文などに詳しい説明を用意することもあります。

これらは、Webアクセシビリティを確保するための基本的な配慮です。

情報を画像や色だけに頼らずに伝える

文字を画像として掲載すると、文字として検索したり、音声読み上げソフトで読み上げたり、利用者の設定に合わせて表示を変更したりすることが難しくなります。

そのため、本文は基本的にHTMLの文字として記述することが望ましいです。

また、情報を色だけで表現しないことも重要です。

例えば、入力フォームのエラーを赤色にするだけでは、色の違いを判別しにくい利用者にエラーが伝わらない可能性があります。「入力内容を確認してください」などの文章も併用すると分かりやすくなります。

このように、HTMLで意味構造を適切に表し、CSSによる見た目だけに依存しないことが、アクセシビリティの向上につながります。

HTML形式の電子メール

HTMLはWebページだけでなく、電子メールの本文にも利用されます。

電子メールの本文の形式には、主にプレーンテキスト形式とHTML形式があります。

プレーンテキスト形式

プレーンテキスト形式は、基本的に文字と改行によって本文を表す形式です。

文字の色や大きさを細かく指定したり、任意の文字列に別のURLを埋め込んだりする機能はありません。

ただし、本文にURLをそのまま記述すれば、メールソフトが自動的にリンクとして扱うことはあります。

HTML形式

HTML形式では、HTMLを使ってメール本文の内容や構造を記述できます。CSSなどを組み合わせることで、文字の大きさ、色、配置などの書式を指定できます。

例えば、次のような本文を作成できます。

<p>新しい教材を公開しました。</p>

<p style="color: blue;">
  情報Ⅰの学習に活用してください。
</p>

<a href="https://example.com/">
  教材を見る
</a>

この例では、一部の文章を青色にし、「教材を見る」という文字列にリンクを設定しています。

プレーンテキスト形式ではURL自体を記述するのが基本ですが、HTML形式では、表示する文字列とリンク先のURLを別々に指定できます。

ただし、HTML形式で指定した書式が必ずそのまま表示されるとは限りません。使用するメールソフトや受信側の設定によって、対応する書式や表示方法が異なることがあります。

HTML形式と添付ファイル・デジタル署名

HTML形式とプレーンテキスト形式の違いは、主にメール本文の表現方法にあります。

画像や文書などのファイル添付は、どちらの形式でも可能です。添付ファイルの取り扱いには、MIMEなどのしくみが使われます。

また、電子メールの送信者や内容の真正性を確認するためのデジタル署名も、HTML形式であることを必須条件としません。

HTML形式だから添付ファイルが利用できる、あるいはデジタル署名が付けられるというわけではありません。

HTMLと著作権

Webページを作成する際には、HTMLの記述内容と著作権の関係にも注意が必要です。

著作権は、思想や感情を創作的に表現した著作物を保護するものです。文章、画像、プログラムなどが著作物に該当する場合があります。

Webページに含まれる文章や画像、プログラムのソースコードなども、創作性が認められる場合には著作権の保護対象になり得ます。

例えば、他人が作成したWebページのHTMLソースを無断で複製し、別のWebページに流用すると、著作権侵害に当たる可能性があります。

ただし、HTMLで記述されたものがすべて著作権で保護されるわけではありません。

例えば、<h1>で見出しを作るというHTMLの一般的な記述方法や、誰でも同じように書くような単純なコードそのものに、必ずしも創作性が認められるわけではありません。

重要なのは、アイデアや技術的なしくみと、具体的で創作的な表現を区別することです。

他人のWebページを参考にして、使われている機能や構成の考え方を学び、自分で独自に作成するこ場合は著作権の侵害にならないが、他人の創作的な表現を無断で複製し公開すると著作権の侵害になりうる。

また、公開された仕様に従って自分でプログラムを作成することも、それだけで他人の著作権を侵害するわけではありません。

他人のソースコードを再利用する際は、著作権の有無や利用条件を確認し、必要に応じて許可を得ることが大切です。