Top▲

文系の人にもわかるHTML5+CSS3入門

第1章 ワープロの文書とホームページの違い

このコラムでは、ホームページの仕組みと作成方法の基本を学びます。

まず、第1章と第2章で、ワープロの文書とホームページとを比較しながら初めてのページを作ってみましょう。

初めてのページ ―― 同じようなページをワープロで

まず、図1-1のような、とても短いホームページについて見てみましょう。

図1-1　これから作成するページ

いきなり、ホームページを作るのはちょっと大変ですので、まずワープロを使って似たようなページを作ってみましょう。Microsoft Word（マイクロソフト・ワード）などのワープロソフトを使って、図1-1と同じようなレイアウトのページを作成してみてください。

たとえば、次のようにしてみてください。

  1. Wordなどのワープロソフトを起動し、新しい文書（白紙の文書）を作成します。

    メモ

    Wordでホームページを作ることもできますが、Wordのホームページ作成機能にはいくつか問題がありますし、この機能を使ってHTMLの勉強をするのは困難ですので、ここでは普通の文書の新規作成を選択してください。

  2. 図1-1と同じように文字を入力し、大きさなどを指定します。
    「インナーウェブへようこそ」の部分はタイトル（見出し）なので、書体（フォント）を大きくして太字にするか、図1-2のように、「見出し１」などの見出し用のスタイル（style）を選択して目立つようにしてください。図1-3のようなページに仕上げてください。
    図1-2　Wordにおける「スタイル」の指定
    図1-3　ワープロで図1-1と同じようなページを作成
    
  3. 入力が終わったら［ファイル］メニューから［上書き保存］（あるいは［保存］）を選択します。
    図1-4のようなファイル保存の「ダイアログボックス」が表示されます。
    図1-4　ファイル保存のダイアログボックス
  4. 適当な場所にwebpageというフォルダを作り、そのフォルダに移動します。
    たとえば［デスクトップ］の下に［webpage］というフォルダを作ってください。このコラムで使う例題をすべてここに入れることにします。
    Windowsの場合、新しいフォルダを作るには、上の図1-4のように、ダイアログボックスの上のほうにある［新しいフォルダ］のアイコンをクリックして作るのが簡単です。
  5. 新しいフォルダを作ったら、それを選択してそのフォルダに移動してください。
  6. example1という名前で保存します（図1-5）。
    図1-5 名前を指定して保存

HTMLではどうなる？

ワープロソフトで図1-3のようなページを作るのは簡単です。 文字を入力して、必要な部分にスタイルを指定すればよいのです。

じつは同じようなホームページをHTMLで作るのもそんなに大変ではありません。次のような「HTMLコード」を書いて、それをHTMLの文書として保存すればよいのです。具体的な方法は第2章で紹介しますが、どのようなものになっているか、まず見てみましょう。

リスト1-1　example1.html　最初のホームページのHTMLコード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"">
<title>インナーウェブ ―― 内なる宇宙を見つめて</title>
</head>
<body>
<h1>インナーウェブへようこそ</h1>
<p>
インナーウェブは現代に疲れたあなたを心からリラックスさせる「癒しの空間」をご提供いたします。
</p>
</body>
</html>

図1-1のウェブブラウザに表示されたものと、リスト1-1のHTMLのコードを比較してみましょう。ウェブブラウザでは色違いの文字だけが表示されています（色を付けたのはわかりやすくするためで、実際には色の違いはありません）。このうち<title>...</title>に囲まれた部分は、ブラウザのウィンドウの「タイトルバー」あるいは「タブ」の部分に表示されます。

残りの<html>、 <head>、<title>、</title>などは「タグ（tag）」と言われるもので、ウェブブラウザには表示されません。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>インナーウェブ ―― 内なる宇宙を見つめて</title>
</head>
<body>
<h1>インナーウェブへようこそ</h1>
<p>
インナーウェブは現代に疲れたあなたを心からリラックスさせる「癒しの空間」をご提供いたします。
</p>
</body>
</html>

-->

ホームページを記述する言語 ―― HTML

さて、HTMLの「タグ」は何のためにあるのでしょうか？

ホームページは「HTML」という「言語」を使って書かれます。HTMLはHyperText Markup Language（ハイパーテキスト用マークアップ言語）を略したものです。「ハイパー」は日本語にすれば「超」です。したがって「ハイパーテキスト」は単に文字が並んでいるだけでなく、それを超えたものであるというわけです。

「マークアップ」は印刷の用語で活字や並べ方などを指定する「組み指定」のことです。

Wordなどの従来のワープロでは、たとえば文字を大きくして「見出し」にするのに、文字を選択してから太字にして大きくしたり、「見出し１」などのスタイルを指定したりします。これに対してHTMLの文書では、「タグ」で「見出し」を指定（マークアップ）するのです。

トレーナーやTシャツなど首のところに「タグ」がついています。タグを見ると、大きさ（S, M, L, XL, XXL, ...）、メーカーや加工した国、時には洗濯の仕方などがわかります。同じように、HTMLの文書では文字や単語、文などにタグを付けて、「これが見出し」「ここから次の段落の始まり」などと示すわけです。

タグをつける場所は対象の前と後ろ。開始タグで始めて、終了タグで終わります。たとえば、一番大きな見出しならば、<h1>ではじめて</h1>で終わるといった具合です。

おもなタグの意味

それでは、上の文書で使われているタグの意味を見てみましょう。いずれのタグもとてもよく使われるものばかりですので、しっかり覚えてください。

これまでのところをまとめてみましょう。どのようなHTML文書（ホームページ）でも次のような感じでできているというわけです。 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
　　＜＜本文＞＞
</body>
</html>

<<本文>>のところに、書きたい内容を書けばよいわけです。ここまでに紹介したタグでは、見出しと段落からなる単純な文章を書くことができるだけですが、これからいろいろなタグを覚えれば徐々に面白いことができるようになります。

メモ

ブログとかオークションなどで「HTMLコードで書く」といったような欄がある場合、上の＜＜本文＞＞のところで使えるタグを使って、HTMLのコードを書くことができます。
これから学んでいくいろいろなタグを使って、見栄えのするブログの記事やオークションの説明などを書いてみてください。

開始タグと終了タグ ―― <xxx> ... </xxx>

多くのタグには「開始タグ」と「終了タグ」があります。終了タグは開始タグの名前の頭に「/」が付いたもので、開始タグと終了タグに囲まれた部分が、そのタグが適用される対象となります。<html>、<head>、<title>などが開始タグで、</html>、</head>、</title>などが終了タグです。

終了タグがないものもあります。metaタグには終了タグ</meta>が使われていませんでした。範囲を指定する必要のないタグには終了タグがありません。上で見た<meta>タグは、この文書の文字コードを指定するものでしたから、対象はファイル全体であり、特定の範囲をそのタグの対象とするものではないため終了タグがないのです。

終了タグがないことを明示するために、<meta ... /> のように最後の「>」の前に「/」を加えてもよいことになっています。

タグとウェブブラウザの関係

HTML文書について、別の角度からタグの特徴を整理してみましょう。

ホームページ vs. ワープロ ―― ホームページの特徴

HTMLの文書（ホームページ）では、このように「実際に表示される内容（コンテンツ）」と、「内容をどう表示するか（見栄え）」を分離したため、どのようなコンピューターを使ってもブラウザさえあれば内容を表示できるのです。たとえばリスト1-1の文書をMacintosh（macOS）に付属するSafari（サファリ）というブラウザで表示しても、似たように表示されます（図1-12）。

図1-12　macOSのブラウザ「Safari」で表示

また、同じ内容を図1-13のようにスマートフォンで表示しても（画面の大きさは変わりますが）同じように表示されます。

図1-13　スマートフォンで表示

さらに、同じ内容を図1-14のように従来型の携帯電話（いわゆるガラケー）で表示することもできます。

図1-14　携帯電話のブラウザで表示

メモ

つまり、このコラムの内容をマスターすれば、あなたの使っている携帯電話（ガラケーやスマフォ）から見られるページも作成できるわけです。

携帯電話の場合

従来型の携帯電話（ガラケー）のブラウザとパソコンのブラウザでは、表示できる内容がかなり異なります。たとえば、ガラケーでは大きさの違う文字を表示したり、複数の書体を使ったりはできません。また、そういった携帯では動画の再生もできないことが多いでしょう。これに対してスマートフォンではパソコンとほぼ同じように表示できます（だからこそ、「スマートフォン」と呼ばれるわけです）。なお、パソコンのブラウザでも、動画の再生には対応していないものもあります。

じつは、ブラウザごとに対応しているタグが違っており、そのブラウザが対応していないタグは無視されます。つまり、そのタグがなかったものとして扱われます。タグが無視されるだけなので、無視されたタグに囲まれた文字は画面に表示はされます。ただし、それがタグで意図したとおりに表示される保証はなくなります。たとえば、文字を強調表示するためのタグを使っても、従来型の携帯のブラウザでは対象の文字は強調はされずに他の部分と同じ種類の文字で表示されるわけです。動画の表示に対応していないブラウザでは、動画はまったく表示されないことになります。

このコラムで紹介するような基本的なタグはインターネットが広まってから使われているすべてのブラウザ（携帯電話のブラウザも含む）が対応していますから、この種の問題は起こらないはずです。ほかの本などで調べたタグを使うときには、そのタグにほとんどのブラウザが対応しているか意識して使った方がよいでしょう。

ホームページ vs. ワープロ ―― ワープロの特徴

これに対して、Wordを初めとするワープロソフトには次のような特徴があります。

HTMLはさまざまな環境をもつさまざまなコンピューターがつながれたインターネットの世界で、誰もが文書を表示できるようにする目的で作られた言語です。このため、HTMLのタグを解釈できるブラウザさえ用意すれば、どのようなコンピューターでもHTML文書を見ることができるのです。これに対して、Wordを代表格とするワープロソフトは、印刷時にどのようなものになるかを常に念頭において使われます。したがって、文書の作成者が表示のされ方を細部まで規定できますが、逆に、たとえば「別の種類のパソコンでは見られない（別のOSでは見られない）」「新しいバージョンのワープロソフトで作った書類なので、このバージョンでは見られない」といった問題も起こりうるわけです。

最近では、携帯電話を使ってホームページを見ることも多くなりましたが、Wordの文書を見ることは多くの携帯電話ではできません。しかし、普通のホームページならば携帯電話でも読むことができます。HTMLという言語が決められたときには、携帯電話がこれほど普及してホームページを見られるようになるとは多くの人は予想していなかったのですが、どんなコンピューターを使っても見られるように、「テキスト形式」で保存して、「タグ」によって文字列の意味を指定するという仕組みが採用されていたがために、今の携帯電話でも簡単にホームページが見られるのです。

ホームページ vs. ウェブページ

この章の最後に言葉の定義をしておきましょう。パソコンや携帯電話を使って「ホームページ」を見るのはすっかり一般的になってしまいました。しかし、じつは英語のhome pageあるいはhomepageは、もともと次のいずれかの意味で使われていた言葉です。

日本ではインターネットが一般的になるにつれて、入り口のページに限らず、どのページも「ホームページ」と呼ばれるようになってしまいましたが、英語の意味に従うと「ウェブページ（Web page）※」が「正しい」呼び方です。

「ホームページ」という言葉を使うと、現在広く使われている意味なのか元々の意味なのかが曖昧になってしまいますので、このコラムでは、これ以降「ホームページ」という言葉は使わずに、「ウェブページ」という言葉を使うことにします。

メモ

※ WebはWorld Wide Web（ワールド・ワイド・ウェブ）を省略したものですが、あまりに長いので、多くの場合、単にWebと呼ばれます。

まとめ

HTMLの文書の特徴をワープロで作った文書と比較しました。ワープロソフトは最終的なイメージを見ながら文書を作成しますが、HTML文書（ウェブページ）ではタグによって対象の文字列がその文書においてどのような意味をもつのか、どんな役割をしているのかを指定していきます。これにより、インターネットにつながっている世界中のコンピューターにある文書を、携帯電話からスーパーコンピュータまで、どのようなコンピュータを使っても簡単に見ることができるのです。

この章で登場したタグ

HTML文書の「型紙」

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
　　＜＜本文＞＞
</body>
</html>

文系の人にもわかるHTML5+CSS3入門
第1章 次の章へ