サイト内検索  

第1章 基本的なマークアップを施す

初期設定は出来ましたか?
それでは、実際にホームページ・ビルダーを使う前に、ホームページ・ビルダーを使用して作成するHTML文書についての超・基本についておさえておきましょう。そうすれば、ソースを直に編集するときに大いに役立ちます。

HTMLって何?

Hyper Text Markup Languageの略です。前半のHyper Textは、文書と文書を直接関連づける機能が付いた文書です。要するにリンクを貼って、別の文書を参照するということが出来る文書です。後半のMarkup Languageは見出しや段落といった文書構造を目印を付けて区別し、コンピュータにも文書構造を理解させるための言語です。

WWWブラウザ上での見映えを規定するための言語ではありません。特に、ホームページ・ビルダーなどといった、WYSIWYG型のWebオーサリングソフトを使う方は誤解しやすいので気をつけて下さい。

文書構造?

といきなり言われてもピンとこない人もいるでしょう。身近なモノを例にとって説明します。

新聞や雑誌の記事には、それぞれ見出しがあって、本文が続く形になっています。雑誌などでは記事の最後に「文責:誰々」という著者に関する情報が入ることもあるでしょう。

作文では、題名があって、著者の情報があって、本文の部分には段落がいくつか用意されていますね。

レポートなどになれば、作文の本文だった部分に段落だけでなくて、表やリストが入ってくるでしょう。段落の中にグラフや図が入るかもしれません。

1つの文書はそれを構成する各要素(見出し・段落など)から成り立っているというわけです。

マークアップを施す

以下のような文書をテキストエディタで作ったとします。私たち人間は、目で見ればここが見出しなどといった文書構造はある程度理解することは出来ます。けど、機械には出来ません。

斬・Webオーサリングソフト

Webサイトを作成する際に、お世話になる方も多いであろうWebオーサリングソフト。私もお世話になっています。従来、これらのソフトが吐き出すHTMLソースは、とんでもないモノが多いということで、使用すること自体がまずいとか言われてきたものです。
しかし、性能も向上したことですし、インストール後のデフォルト状態でどれだけまともなソースを吐き出すかを検証してみましょう。

検証対象となったソフト
今回、この企画の餌食、もとい対象となったソフトは以下のとおりです。Windows環境で動作する無料ソフトです。
・FrontPageExpress
・Netscape Composer(Netscape4.78付属)
・Netscape Composer(Netscape7.01付属)

文責:FUMING(fuming@hpbuilder.net)

上の文書にマークアップを施してみます。どこが見出しになって、段落になっているかを目印を付けるのです。<目印>で始まりの目印を、</目印>で終わりの目印を示します。

<大見出し>斬・Webオーサリングソフト</大見出し>

<段落>Webサイトを作成する際に、お世話になる方も多いであろうWebオーサリングソフト。私もお世話になっています。従来、これらのソフトが吐き出すHTMLソースは、とんでもないモノが多いということで、使用すること自体がまずいとか言われてきたものです。</段落>
<段落>しかし、性能も向上したことですし、<強調>インストール後のデフォルト状態でどれだけまともなソースを吐き出すかを検証</強調>してみましょう。 </段落>

<中見出し>検証対象となったソフト</中見出し>
<段落>今回、この企画の餌食、もとい対象となったソフトは以下のとおりです。Windows環境で動作する無料ソフトです。</段落>
<リスト>
<リストの項目>・FrontPageExpress</リストの項目>
<リストの項目>・Netscape Composer(Netscape4.78付属)</リストの項目>
<リストの項目>・Netscape Composer(Netscape7.01付属)</リストの項目>
</リスト>
<連絡先>文責:FUMING(fuming@hpbuilder.net)</連絡先>

これで、文書の構造を明確に示すことが出来ました。

HTML文書記述における基本的なルール

ルール1 開始タグと終了タグを使って要素内容を挟む

HTML文書では、<要素名>内容</要素名>としてマークアップをし、文書構造を示します。タグはすべて半角文字で書く必要があります。
HTMLの要素およびタグに関する説明

ルール2 タグは入れ子になるように記述する

正しい <p>タグは<strong>入れ子になるように記述する</strong></p>

間違い <p>タグは<strong>入れ子になるように記述する</p></strong>

ルール3 属性値はダブルコーテーションで囲む

属性は、開始タグの中で指定して、その要素の性質や特性を示すために使用します。複数の属性をつけることが可能で、その場合、半角スペースで区切ります。

例 <a href="hogehoge.htm" title="ほげほげの説明">ほげほげ</a>

関連事項

ホームページ・ビルダーを使ってマークアップ

新規文書の作成を行う

以下のいずれかの方法で新規文書の作成をします。

新規文書を作成すると、以下のような画面が表示されます。

上がページ編集画面です。文字入力をしたり、編集作業を行うための画面です。ここで行った作業はすべて、下のHTMLソース編集画面に反映されます。なお、HTMLソース編集画面でも直接編集することは可能で、編集内容は、ページ編集画面をクリックした後に反映されます。

新規文書を作成すると、ページ編集画面には何も表示されていませんが、HTMLソース編集画面には、以下のような文字列が表示されています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
</head>
<body></body>
</html>

1行目は、文書型宣言を定義しています。HTML文書にはいくつかの文書型の種類が存在します。文書型宣言で、どの文書型に則った文書かを示す必要があります。要するに、どのようなルールに基づいてマークアップを施しているのかを示すためのものです。
ここでは、W3CのHTML4.01 Tranditional DTDの文書型に則った文書ですよというのを表明しています。

次の<html>は、ここからHTML文書の始まりという目印です。最終行の</html>でHTML文書の終わりを示しています。HTMLで使われる各要素はhtml要素を起点としたツリー状の親子関係を持っています。

HTMLの各要素の関係図

<head>〜</head>
head要素は文書の情報を示す部分です。ここには、文書のタイトルや利用するスタイルシート、検索エンジン向けの情報などを記述します。html要素の子要素です。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
この行では、文字コードはShift_JISですよというのを示しています。
<meta http-equiv="Content-Style-Type" content="text/css">
この行では、文書のデフォルトのスタイルシート言語を示しています。

そう言えば、この2つには終了タグが存在しませんね。meta要素は、内容を持たない空要素なので、終了タグは不要です。

<title></title>
HTML文書を記述する上では絶対に必要なtitle要素の部分です。新規作成した時点では内容が入力されていませんので、body要素の属性の変更画面を出して、ページタイトルを入力します。ここでは、「斬・Webオーサリングソフトと入力します。

ポイント

属性の変更画面の出し方は以下の3つの方法があります。

  • 右クリックをして、属性の変更を選ぶ
  • ツールバーの属性の変更ボタンを使用する
  • 編集画面右上の属性変更ボタンをクリックする

1,2番目の方法は現在選択している要素が対象になります。3番目の方法は現在選択している要素以外にも、その親要素も対象となります。直接選択できない要素を対象に属性を指定したい場合には大いに役立ちます。

ページのプロパティ ダイアログ

ベースURLやターゲットの規定値などは入力不要です。ページタイトルの入力が終わったら、OKボタンをクリックしましょう。そうすると、title要素の部分が、<title>斬・Webオーサリングソフト</title>と変化します。

ここで説明した、meta要素やtitle要素はhead要素の子要素です。

要注意

属性パレットで属性を表示させることができますが、属性の変更画面より、表示/設定できる内容が少なくなるのでおすすめしません。

<body></body>
この中に文書の実際の内容となる要素を記述していきます。ページ編集画面で何らかの作業を行うと、body要素の内容が変更されます。body要素はhtml要素の子要素です。

文章を入力する

ページ編集画面で以下の文章を入力して下さい。ShiftキーとEnterキー同時押し となっている部分はShift+Enterキーを入力します。最後のお名前とメールアドレスの部分は、ご自分のを入力して下さい。

斬・WebオーサリングソフトShiftキーとEnterキー同時押し
Webサイトを作成する際に、お世話になる方も多いであろうWebオーサリングソフト。私もお世話になっています。従来、これらのソフトが吐き出すHTMLソースは、とんでもないモノが多いということで、使用すること自体がまずいとか言われてきたものです。ShiftキーとEnterキー同時押し
しかし、性能も向上したことですし、インストール後のデフォルト状態でどれだけまともなソースを吐き出すかを検証してみましょう。 ShiftキーとEnterキー同時押し
検証対象となったソフトShiftキーとEnterキー同時押し
今回、この企画の餌食、もとい対象となったソフトは以下のとおりです。Windows環境で動作する無料のソフトです。ShiftキーとEnterキー同時押し
・FrontPageExpressShiftキーとEnterキー同時押し
・Netscape Composer(Netscape4.78付属)ShiftキーとEnterキー同時押し
・Netscape Composer(Netscape7.01付属)ShiftキーとEnterキー同時押し
文責:お名前(メールアドレス)

入力すると、body要素の内容は以下に示すようにすべてp要素としてマークアップされてしまいます。これでは適切な文書構造を示しているとは言えません。

<p>斬・Webオーサリングソフト</p>
<p>Webサイトを作成する際に、お世話になる方も多いであろうWebオーサリングソフト。
私もお世話になっています。従来、これらのソフトが吐き出すHTMLソースは、とんでも
ないモノが多いということで、使用すること自体がまずいとか言われてきたものです。</p>
<p>しかし、性能も向上したことですし、インストール後のデフォルト状態でどれだけ
まともなソースを吐き出すかを検証してみましょう。</p>
<p>検証対象となったソフト</p>
<p>今回、この企画の餌食、もとい対象となったソフトは以下のとおりです。
Windows環境で動作する無料ソフトです。</p>
<p>・FrontPageExpress</p>
<p>・Netscape Composer(Netscape4.78付属)</p>
<p>・Netscape Composer(Netscape7.01付属)</p>
<p>文責:お名前(メールアドレス)</p>

適切なマークアップを施す

適切な文書構造を示すために、ツールバーを使って、編集をしましょう。書式選択メニューを使います。一覧を表示すると、以下のようになります。
書式選択一覧

標準
p要素を挿入します。
見出し 1
h1要素を指定します。大見出しですね。
見出し 2
h2要素を指定します。中見出しですね。
見出し 3
h3要素を指定します。小見出しですね。
見出し 4、見出し 5、見出し 6
順に、h4,h5,h6要素を指定します。hの後の数字が大きくなるほど、見出しレベルは下がります。
アドレス
address要素を指定します。連絡先や奥付の記述に使用します。
引用文
blockquote要素を指定します。引用部分が長く、ブロックレベルで使用したい場合に使用します。
なお、HTML4.01 Strict DTDの場合、文字データはブロック要素の下に入れます。
ベタ書き
pre要素を指定します。ソースコードや詩などで、空白文字や改行も入力されているとおりに表示させたい場合に使用します。

ポイント

インラインで引用する場合は、q要素を使用します。ただし、ホームページ・ビルダーのメニューバーからはマークアップさせることが出来ません。HTMLソース編集画面で直接打ち込みます。

また、引用をする場合、cite要素で引用した元の文章や関連情報のあるページのURLを指定することが出来ます。
<blockquote cite="出典先URL"> 〜 </blockquote>
<q cite="出典先URL"> 〜 </q>

ここで以下にあげる部分を見出し、アドレスとしてマークアップしてみましょう。変更部分にカーソルを当ててから、ツールバーで変更です。

マークアップを変更すると、以下のようになります。

<h1>斬・Webオーサリングソフト</h1>
<p>Webサイトを作成する際に、お世話になる方も多いであろうWebオーサリングソフト。
私もお世話になっています。従来、これらのソフトが吐き出すHTMLソースは、とんでも
ないモノが多いということで、使用すること自体がまずいとか言われてきたものです。</p>
<p>しかし、性能も向上したことですし、インストール後のデフォルト状態でどれだけ
まともなソースを吐き出すかを検証してみましょう。</p>
<h2>検証対象となったソフト</h2>
<p>今回、この企画の餌食、もとい対象となったソフトは以下のとおりです。
Windows環境で動作する無料ソフトです。</p>
<p>・FrontPageExpress</p>
<p>・Netscape Composer(Netscape4.78付属)</p>
<p>・Netscape Composer(Netscape7.01付属)</p>
<address>文責:お名前(メールアドレス)</address> 

この時点で、ページ編集画面やプレビューを見てみると、見出しの部分が本文より文字が大きくなっていたり、連絡先の部分が斜体になったりしています。実は、ホームページビルダーの場合、ページ編集画面とプレビュー表示にはInternetExplorerの表示エンジンを使っています。見出しの文字が大きくなっていたり、連絡先の部分が斜体になっているのはInternetExplorer自身が持っているスタイルシートに基づいて表示している結果です。後で説明するスタイルシートを使えば、見映えを変更することなどは朝飯前のことです。

これで、見出しと連絡先部分のマークアップは出来ました。後は、リストと、強調部分をマークアップします。

まずはリスト部分のマークアップです。・FrontPageExpressの文字列を選択した後、リスト挿入ボタンをクリックすると、以下のような画面が出てきます。

リスト挿入画面

ここでは、番号なしのリストを使用するので、そのままにしておきます。この画面で使って良いのは、丸印がついている、通常、数字付き、説明付きの3つです。見映えを変えるのは、スタイルシートで行いますので、ここで選ぶ必要はありません。

もしくは、リスト挿入ボタンの右側の▼をクリックして出てくるメニューから、「番号なしリスト」を選択します。

そうすると、黒丸リストマークが付いてきます。これは、あくまでInternetExplorerのデフォルトスタイルシートによる表示結果です。

この時点で、ページ編集画面を見ると、

  • ・FrontPageExpress

・Netscape Composer(Netscape4.78付属)

・Netscape Composer(Netscape7.01付属)

となっています。このままでは見映えもマークアップも中途半端です。ですので、リストの項目を増やす必要があります。

FrontPageExpressの文字列の最後にカーソルをあわせてから、Enterキーを1回入力します。

  • ・FrontPageExpress

・Netscape Composer(Netscape4.78付属)

・Netscape Composer(Netscape7.01付属)

黒丸リストマークが下の行へついて、リストの項目が1つ増えます。次の項目の文字列を選択して切り取り、リスト部分に貼り付けます。3つ目の項目も同様です。

  • ・FrontPageExpress
  • ・Netscape Composer(Netscape4.78付属)
  • ・Netscape Composer(Netscape7.01付属)

リストの項目を入力し終わったら、Enterキーを2回入力して、リスト部分の入力を終了します。

テキスト文書の時はリストマークとして中点を用いましたが、HTML文書ではリストマークがありますので、中点は不要になります。ですので、削除しましょう。

リスト部分のマークアップは以下のように変更されます。

<ul>
<li>FrontPageExpress
<li>Netscape Composer(Netscape4.78付属)
<li>Netscape Composer(Netscape7.01付属)
</ul>

ul要素は番号なしリストを記述するための要素です。li要素はリストの項目を記述するための要素です。

これをみて、あれ?と思った方もいるでしょう。li要素は空要素じゃないのに、終了タグがない状態になっています。実は、HTML4.01ではいくつかの要素については、タグの省略が可能です。li要素の場合、子要素がインライン要素の場合、省略が可能です。ホームページビルダーでは、li要素の終了タグを付けてきません。気になるのであれば、HTMLソース編集画面で</li>を補いましょう。

ポイント

番号付きリストを選択した場合、ul要素ではなく、ol要素となります。リストの項目を記すli要素は同じように使用します。

説明付きリストを選択した場合は、dl要素で定義リストであることを記述し、dt要素で定義する用語を記述、dd要素で説明文を記述することになります。

最後に、強調部分のマークアップを行います。「インストール後のデフォルト状態でどれだけまともなソースを吐き出すかを検証」の文字列部分を選択後、メニューから、書式→論理強調→ストロング を選択します。そうすると、strong要素が挿入されます。

論理強調で選択できるのは、以下の8つです。

強調
em要素を指定します。
ストロング
strong要素を指定します。より強い強調をしたいときに使用します。
コード
code要素を指定します。プログラミングのソースコードを示したりするときに使用します。
サンプル
samp要素を指定します。プログラムによって出力される内容のサンプルを示すときに使用します。
キーボード
kbd要素を指定します。ユーザーによってキーボードなどから入力される文字を示すときに使用します。
変数
var要素を指定します。変数や引数であることを示すときに使用します。
定義
dfn要素を指定します。文章の中で用語の意味を定義・説明している部分の用語を示すときに使用します。文章中に初めてその用語が出てきたときに使用することが多いでしょう。
引用
cite要素を指定します。本来は出典や参照先を表す要素です。文章自体を引用するのではなく、書名、文書名、著者名などの名前やタイトルを示すために使用します。

これで、基本的なマークアップは完成しました。HTMLでのマークアップ結果は、以下のようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>斬・Webオーサリングソフト</title>
</head>
<body>
<h1>斬・Webオーサリングソフト</h1>
<p>Webサイトを作成する際に、お世話になる方も多いであろうWebオーサリングソフト。
私もお世話になっています。従来、これらのソフトが吐き出すHTMLソースは、とんでも
ないモノが多いということで、使用すること自体がまずいとか言われてきたものです。</p>
<p>しかし、性能も向上したことですし、<strong>インストール後のデフォルト状態でどれだけ
まともなソースを吐き出すかを検証</strong>してみましょう。</p>
<h2>検証対象となったソフト</h2>
<p>今回、この企画の餌食、もとい対象となったソフトは以下のとおりです。
Windows環境で動作する無料ソフトです。</p>
<ul>
<li>FrontPageExpress
<li>Netscape Composer(Netscape4.78付属)
<li>Netscape Composer(Netscape7.01付属)
</ul>
<address>文責:お名前(メールアドレス)</address>
</body>
</html>

これで、HTML文書が1ページ作成できました。作成した文書を名前を付けて保存しましょう。メニューのファイル→名前を付けて保存でtext1と名前を付けて保存します。拡張子は自動でつけてくれるので、入力しなくても良いです。

ブロックレベル要素とインライン要素

説明が後になってしまいましたが、body要素の子要素として使われる要素は、ブロックレベル要素かインライン要素に分類することが出来ます。ここでは、HTMLとして本来あるべき姿であるHTML4.01 StrictDTDで定義されている要素について取り上げます。

ブロックレベル要素
名前の通り、ブロックとして表される要素です。一般的に改行をともないます。
該当する要素は、address、blockquote、div、dl、fieldeset、form、h1〜h6、hr、ol、p、pre、table、ul
インライン要素
主に文章の一部として、ブロックレベル要素の中で使用される要素です。一般的に改行はされません。文字データもインライン要素として扱われます。
該当する要素は、a、abbr、acronym、b、bdo、big、br、button、cite、code、dfn、em、i、img、input、kbd、label、map、object、q、samp、select、small、span、sub、sup、textarea、tt、var
この中で、img、input、object、select、textareaはその要素自体が特定のモノで置き換えられるので、置き換え要素(置換要素)とも言います。

ins要素とdel要素は指定する範囲により、ブロックレベル要素、インライン要素いずれにもなります。

HTML4.01 Strict DTDでは、body要素の子要素にインライン要素を置くことは出来ません。必ずブロックレベル要素の子要素として配置します。
Transitonal DTDでは、body要素の子要素としてインライン要素を置くことも許されています。

今回作成するHTML文書は、ホームページ・ビルダーのデフォルトであるHTML4.01Transitional DTDを採用していますが、書き方の説明はHTML4.01 Strict DTDに準ずるものとします。

ホームページ・ビルダーでHTML文書を作成する場合には、body要素の子要素として必ずブロックレベル要素が吐き出されるので問題ありません。(V11以降では、当サイトお勧め設定をしている場合)

この章で作成されたHTML文書を見てみる