ホームページを作られる方をサポート致します
ホームページ作成＞HTMLでの作成①
HTMLタグ
Webページは HTML (Hyper Text Markup Language) を使って作成します。
HTMLでは、テキスト、画像などの要素を表現するために仕様書で用意されたタグとその属性を使います。
これらのタグは、テキストのどの部分を見出しや段落にするか、どこで段落区切りを入れるか、他のページへのハイパーテキストのリンクをどこに入れるかなどを示す「文書の構造」を記述するものです。
HTMLの要素は ユーザエージェント (Webブラウザなど) は、その HTML要素を解釈して、コンピューター画面上に出力します。
<p style="color:#006">～</p>
pを要素、styleを属性、ダブルコーテーションで囲んだものを値（属性値） と呼びます。
タグは単に <p> というものを指します。
また、これらをまとめて要素（エレメント）とも呼び、ごく普通の文書にマークアップします。
ヘッダと本体
HTML文書では、大きく分けて 「ヘッダ」 と 「本体」 に区別されます。
ヘッダ部では、文書そのものの情報を HTTPサーバやユーザエージェント (HTTPを解釈するソフトウェア) に、文書がどのように成り立っているのかを伝えます。
伝達される情報は、記述されている文字符号コード、文書の MIMEタイプ、その文書と他の文書の関連や、文書のタイトルなどがあります。
ヘッダ部は、<head> ～ </head> の中で、文書情報などを配置します。
HTMLでは、この head要素を省略することができますが、文書のタイトルを示す title要素だけは省略することができません。
実際のコンテンツを表現する部分を 「本体」 と呼び、HTMLでは、body要素というタグに囲まれた範囲で配置します。
Webブラウザの画面で表示される唯一の要素は、 title要素で囲まれた範囲のみです。
title要素は省略することができませんので注意してください。
body要素は、head要素同様に省略することが可能です。
ただし、将来のことを考えて、なるべく省略しないようなクセをつけておくことを強くお勧めします。
html要素内では、head、bodyと、２つの要素によって構造化されています。
そして、コンテンツを配置する body要素でも、それぞれの要素内容を囲むタグによって構造化されることが望まれています。
つまり、HTMLの基本は 「文書の構造化」 にあります。
文書の構造化については、「要素の親子関係」 をお読みください。
マークアップすること
HTMLとは、ハイパーテキストによるマークアップ言語という意味があります。
ここでいうマークアップとは、「意味付け」と解釈されており、HTMLのタグや属性を利用して文書の要素内容にマークアップします。
例えば、下記の文章を参照してください。
HTML初級講座のご案内
場所： ばんばんの家
日時： そのうちいつか
参加費： １億円
講座の内容
正しく意味付けされた HTML文書の作成について学習します。
また、HTMLから、XHTML、XMLについても順次開催していきます。
講座のお申し込みは、こちらの申込書からお願いいたします。
この文書からマークアップすることで、HTML文書を作成します。
この文章は、見出し、箇条書き、小見出し、段落という構成要素で記述されているのが分かります。
そういった要素内容に対して、HTMLで用意された適切なタグを利用してマークアップします。
<h1>HTML初級講座のご案内</h1>
<ul>
<li>場所： ばんばんの家</li>
<li>日時： そのうちいつか</li>
<li>参加費： １億円</li>
</ul>
<h2>講座の内容</h2>
<p>正しく意味付けされた HTML文書の作成について学習します。
また、HTMLから、XHTML、XMLについても順次開催していきます。
講座のお申し込みは、こちらの <a href="form.html">申込書</a>から
お願いいたします。</p>
このようにして、各文章の文脈から判断して、それに応じたタグを選択することで、HTML文書が作成されるのが理解できると思います。
HTMLにおけるすべての要素は、テキストやグラフィックスを Webブラウザが解釈して表示するときの見た目を指定するだけで、必ずしも正確な配置を指定するものではないということです。
HTMLの当初の設計目的に、ドキュメントにレイアウトではなく、論理構造を提供するという目的があります。
この構造によって、さまざまな OS上で動くさまざまな Webブラウザで、同じように表示されるような Webページを作成し、表示されるための柔軟性が生まれるものなのです。
つまり、緻密なレイアウト機能を捨てて論理構造をとったため、誰もがあなたの作った Webページを見ることができるにしても、新聞や本などのようなテキストとグラフィックの不変のレイアウトを作るようなことは出来ません。
タグはタグ自体のテキストをかぎブラケット < > で囲んだものです。
基本的な形として、タグには２つのタイプがあります。
「コンテナタグ」と「空タグ」です。
これら２つのタイプのタグは、どちらもそれぞれのタグに固有の属性によってさらに細かく修飾することができます。
コンテナタグ
ほとんどの HTMLタグはコンテナタグと呼んで、開始タグと終了タグを持つものです。
これらのタグは Webページ上のテキストなどのコンテンツを囲む形で使います。
開始タグは、特定の HTMLエレメントがどこから始まるかを指定し、終了タグはそれがどこで終わるかを示します。
終了タグはスラッシュ "/" をつけて開始タグと区別します。
＜Sample＞
初心者のための<strong>ホームページ講座</strong>
＜結果＞
初心者のためのホームページ講座
<strong>～</strong> まで囲まれたテキストが強調されます。
空タグ
HTMLタグにはいくつかの空タグがあります。
これはタグが何もしないという意味ではなく、単独で用いられるもので終了タグが必要としないタグです。
つまり、何も囲むものがないということです。
こうしたタグは、特定の整形処理をどこで行うかを示すものです。
空タグの典型的なものに強制改行タグ <br> があります。
これはテキストの改行位置を指示するためのものです。
＜Sample＞
このテキストは、ここで<br>改行されます
＜結果＞
このテキストは、ここで
改行されます
<br> タグによって強制的に改行されます。
空タグにも終了タグを設けようとしています。
次世代マークアップ言語 (XHTML、XML) では、従来の空タグの後ろに 半角スペースと、"/" を <br /> のように記述することが決定されています。
構造上の規則
HTMLには、構造上に関する規則があります。
つまりタグが入れられる場所と、そうでない場所があるわけです。
例えばレベル１見出しタグ <h1> で囲まれた中で使えるタグは限られています。
ヘッダのテキストには改行や強調を入れられることはできますが、他のものはあまり入れられません。
例えば、次の HTMLコードは無効です。
＜Sample＞
<h1><h3>これは見出しのテキストです</h3></h1>
＜解説＞
これはレベル１のヘッダの中にレベル３ヘッダを入れることができないのです。
論理的に考えても、そんなことをする理由がないのですから。
もう１つの構造上の規則として、エレメントを部分的に重複させることができないということです。
コンテナタグには正しい入れ子になっていなければならないのです。
次の HTMLコードは、見出しタグの中にイタリック体タグ <i> を使ったものです。
正しい構造のものと不正な構造のものを例に挙げました。
＜適正コード＞
<h1>これは見出しの<i>テキスト</i>です</h1>
<h1>これは見出しの<i>テキスト</h1>です</i>＜解説＞
コンテナタグの中にコンテナタグを入れる場合は、開始、終了タグ共に同じコンテナタグの中に入っていなければなりません。
また、上記のように順番を間違えて記述することもできません。
構造上の規則 その２
HTMLのタグには、構造を示すものと、意味を示すものとに大別されています。ブロックレベル要素
ブロックレベル要素とは、HTMLの論理的な構造を形成する重要なタグが集まっています。
見出しや段落、リスト、表組などを定義する場合に利用され、このブロックレベル要素の中には、別のブロックレベルが配置できないもの、あるいは別のブロックレベル要素を配置できないものに区別されています。
ブロックレベル要素は、文書の構造を成すものであり、すべてのインラインレベル要素はこの中に配置しなければならないのです。
ブロックレベル要素は、HTMLを表示する画面の左から右までの１つの矩形を持ち、一般的な視覚系ブラウザ (Microsoft Internet Explorer、Netscape、Mozilla、Opera、Safariなど) では、この要素の前後に改行を持たせて出力します。
インラインレベル要素
インラインレベル要素とは、普通の文字列と同じ扱いで、基本的にはその要素内に囲まれた「意味」をマークアップします。
インラインレベル要素は、必ずブロックレベル要素内で記述されなければなりません。
単独で使用することができないのです。
つまり、HTMLとは、「文書の論理構造を表わす」ためのマークアップ言語だからです。
構造の中で配置され、その要素内容に意味付けすることになります。
ブロックレベル、インラインレベル要素については、HTML基本データ形式 を参照してください。
タグは大文字か小文字か？
タグを書くのには大文字でも小文字でもかまいません。
また、両方使っても問題ありません。
しかしながら、今後 HTML4.01は、XHTML、あるいは XMLに移行することが予定されています。
その場合、大文字と小文字が厳密に区別されます。
そういった状況ですので、本講座ではすべて小文字にて記述します。
＜表記サンプル＞
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 1234567890
要素、属性、値
本講座では、要素、属性、値という言葉が非常に多く出てきます。
かいつまんで説明すると、
<body style="background-color:#fff">の場合
body＝要素、style＝属性、"background-color:#fff"＝値、となります。
また、これらすべてを要素と呼ぶこともあります。
要素と要素の囲まれた内容をコンテンツといいます。
特に、HTMLリファレンスを読むときには、これらの言葉が多く記述してありますので覚えておいてください。
正しい文法で
時折見かけるサイトに、「このサイトは Microsoft Internet Explorer 6.0 で最適化されています。」といったメッセージがあります。
一体最適化とは何でしょう？
作者だけの環境で作成された HTML文書を、まったく同じ環境で閲覧することができれば、「最適化」と言えなくもありませんが、それはかなり無理な話です。
例え同じ Webブラウザ銘柄であっても、OSやそのバージョンが異なれば、決して「最適化」など実現するわけではありません。
HTMLはコンピュータの画面で表示する「見栄え」を作成するものではありません。
ビジュアル・デザインで視覚化されたページはなるほど華麗ですが、それを閲覧できない環境もあるということを、制作者は知らなければなりません。
ブラウザ銘柄の違いによって引き起こす視覚効果の違いは、HTMLにはまったく関係ないのです。
HTMLはあくまで文書の論理構造を示すものであり、「見栄え」にこだわるページを作成するためのマークアップ言語ではありません。
正しい文法で作成された Webページは、閲覧者の環境がどんなものであっても正しくレンダリングされます。
それは何よりも、あなたが主張する意見、有用な情報の提供などを、正しく相手に伝えられるということに他なりません。
文字を強調して太字に見せるタグとして <b> がありますが、これは物理タグなので<strong>を使うようにしましょう。
同時に、イタリック体を表示する <i> も物理タグですので、スタイルシート を利用しましょう。
論理的な構造とは？
例えば、以下の構文を見てみましょう。
<body>
<font size="6">文書の論理構造</font><br>
<font size="3">マークアップの基本は文書の論理構造にある</font>
</body>
この構文は、単にフォントの大きさを変化させただけの文字列 (テキスト) に過ぎません。
一般的なグラフィカル・ブラウザでは「見出し」と「段落」のように見えますが、そう見えるだけであって決して見出しや段落が形成しているわけではありません。
これを音声や点字、あるいはテキストのみを中心とした非視覚系ブラウザでレンダリングした場合、文字サイズは無視されてしまいます。
つまり作者の意図とは異なり、見出しや段落として判断してくれません。
一般的な新聞や書籍では、各記事の冒頭に見出しがあり、その見出しに対する段落があります。読者は見出しを中心としてナナメ読み (いわゆる読み飛ばし) をしながら、自分にとって興味のある記事や内容を読むことになります。
このように、「見出し」や「段落」は文書全体の構造を提供します。
世の中のあらゆる文書がそうであるように、コンテンツ (内容) には、こうした見出しや段落、リストや表などといった構造の中で配置されているということがお分かりでしょう。
上記のサンプル構文を構造的に記述すると、以下のとおりとなります。
<body>
<h1>文書の論理構造</h1>
<p>マークアップの基本は文書の論理構造にある</p>
</body>
論理構造の必要性
Webページを閲覧する場合のソフトウェアが、必ずしもグラフィカルなインターフェイスを持っているとは限りません。
ユーザエージェント (各種ブラウザやプロキシ、あるいは検索サーチロボットなど）と呼ばれるソフトウェアに対し、正確に情報を伝えるためには論理的な文書構造が必要になります。
平たく言えば、そこが「見出し」であり、それは「表組」であるというそれぞれの「まとまり」として用意し、すべてのコンテンツはそうした構造の中で配置されなければなりません。
その意味では、上記に提示したサンプル構文は、厳密には文法違反となります。
