| ウェブサイト製作総合支援サイト：たこやき 〜Openソース〜 |
| ←トップページに戻る ←HTMLの書き方入門:目次に戻る →HTMLの書き方入門:補足事項に進む |
HTMLを専用作成ソフトを使わずに作る方法を説明します。
道具はテキストエディターを使用して下さい。OSに付属しているめも帳等で十分ですが、機能的に不便な所もありますので、馴れてきたらもう少し多機能なものを導入する事をお勧めします。
(「MS Word」や「一太郎」等のワードプロッセッサーは、テキスト形式の保管に難が有るのでお勧めできません。→理由)
(ちなみに私はビレッジセンターのWz EditerにXHTML Editer プラグインを追加して使用しています。)
まず、何を書くかを決めましょう。
ここでは説明の為に日記のHTML文書を書くことにします。
まぁ、普通に日記を書くつもりで文章を作ってください。
違うことと言えば、日記帳と違って表紙がないので、一番最初に目立つタイトル(「○○の独り言」とか「日々是口実」みたいな物です。「日々是口実」は高千穂 遥氏のWeb Site で使用している日記のタイトルです。)
次のような形になると思います。
--- ここまでのサンプル ---
Hideのたこ焼き日記 2002年○月○日 今日は朝から雨が降って、外出する気分にもならない。 とりあえず、何もせず。 明日は、たこを買いにいこう。 2002年○月×日 たこ焼きを作ろうと思ったのがけど、たこ焼き用の鉄板が無いので買いに出かけました。 いろいろな種類の鉄板が売っていましたが、コンロに合わせて丸型で一度に12個焼けるも のを選びました。 後必要なものとして、串？と油引きも一緒に買い求めました。
その前にHTMLについて少し説明しておきます。
HTMLと言うのは文書の意味をコンピューターに理解させるためのマークアップ言語です。
どのような形でコンピューターに理解してもらえるようにするのかというと、タグと言うコンピューターが理解できる記号で文(単語)を囲む(以後この行為を「マークアップ」と呼びます)ことによってコンピューター(ソフト)が文書の意味を理解できるようなファイル形式になります。
HTMLとはHyper Text Mark up Lunguage の省略形です。
Hyper Textと言うのは文字情報のみのTextファイルに他のファイルへのリンク情報を埋め込めるようにしたものです。
Mark up lunguageと言うのは、文書にコンピューター(ソフト)が理解できるような記号を埋め込んで文書をコンピューター処理できるようにしたものです。
HTMLではマークアップの手法にSGMLを利用しています。
では、前に作った日記をHTML形式にして行きましょう。
まず、最初にこのファイルがHTMLのファイルで有る事を書く必要が有ります。
最初は意味がわからなくてもかまいませんから、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">とファイルの最初に入れておきましょう。
これでこのファイルの中身がW3C の規定したHTML 4.01で有る事をコンピューターに伝える事ができます。
次にここからHTML文書が始まりますと言う意味のタグ<html>を入れます。このタグには言語を指定できますので日本語のページであれば<html lang="ja">としましょう。(英語のページの場合は"ja"の所が"en"に変わります。)
次に、ファイルの情報を記載する場所を用意します。ファイルの情報は<head>〜</head>の間に記載します
ファイルの情報で必ず記載する必要の有るものは文書のタイトルです。文書タイトルは<title>○○の独り言</title>と言った形で<head>〜</head>の間に記載します。(文章のタイトルがどうしても思いつかない時は、あまりお勧めできませんが"No title"とでも記載しておきましょう、省略するよりはましです。)
次に本文を記載する場所を用意します。本文は<body>〜</body>の間に記載します。
先ほど書いた文書を<body>〜</body>の間に入れてください。
最後にここでHTML文書が終わりますと言う意味の</html>を入れて一応HTML形式の文書になります。(まだ文書意味をマークアップしていないので完成してません。)
ここまでの作業が終わった時点でファイルの内容は次のようになります。
--- ここまでのサンプル ---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>Hideのたこ焼き日記</title> </head> <body> Hideのたこ焼き日記 2002年○月○日 今日は朝から雨が降って、外出する気分にもならない。 とりあえず、何もせず。 明日は、たこを買いにいこう。 2002年○月×日 たこ焼きを作ろうと思ったのがけど、たこ焼き用の鉄板が無いので買いに出かけました。 いろいろな種類の鉄板が売っていましたが、コンロに合わせて丸型で一度に12個焼けるも のを選びました。 後必要なものとして、串？と油引きも一緒に買い求めました。 </body> </html>
このファイルをWebブラウザで見ても、文章の意味をマークアップしていないので改行すら入りませんがこれでも立派なHTML文書です。
タグには開始タグ<...>と終了タグ</...>があります。基本的には開始タグで始まり終了タグで終わりますが、中には終了タグの無い物(br, hr, img等)や終了タグを省略できるもの(p, li等)が有ります。
ただし、省略できるからと言って終了タグを省略する事は、内容の可読性を下げたり、思わぬところでタグの自動補完が行われたりする事があるので望ましくありません。
また、終了タグの無い物に終了タグを付けるのも間違いですのでやめましょう。(これは無視されますので、殆ど実害が有りませんけどね。)
また、タグは入れ子状態にできます。つまり、意味をマークアップした箇所の一部分を更にマークアップすることが可能です。
ただし、タグによって包括できるタグの種類が決められています。
タグの属性と包括規則
まず、見出しの意味を示すタグが有りますので、「Hideのたこ焼き日記」と言う所と日付をマークアップします。
次に段落の意味を示す<p>〜</p>で日記の内容をマークアップします。
最後に改行を意味する<br>タグで段落内の改行を行うと、次のようになります。
(brタグには終了タグが存在しません。)
--- ここまでのサンプル ---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>Hideのたこ焼き日記</title> </head> <body> <h1>Hideのたこ焼き日記</h1> <h2>2002年○月○日</h2> <p> 今日は朝から雨が降って、外出する気分にもならない。<br> とりあえず、何もせず。<br> 明日は、たこを買いにいこう。 </p> <h2>2002年○月×日</h2> <p> たこ焼きを作ろうと思ったのがけど、たこ焼き用の鉄板が無いので買いに出かけました。 <br> いろいろな種類の鉄板が売っていましたが、コンロに合わせて丸型で一度に12個焼けるも のを選びました。<br> 後必要なものとして、串？と油引きも一緒に買い求めました。 </p> </body> </html>
h1はheading level 1、h2はheading level 2の略で見出しレベル１、見出しレベル２を表しています。(ちなみに見出しのレベルは6までしか用意されていません。)
どのような名前で保存して頂いてもかまいません。ただし、OSによっては最後の部分(拡張子)を.htm又は.htmlにしておくと、HTMLに対応したソフトに関連付けされるので便利だと思います。
また、Web上で公開する場合は、httpサーバーによっては名前や拡張子を指定される事が有りますので、サーバーサイドの指示に従った名前を使用して下さい。
前に作った文書では見た目が悪いので、もう少し見た目を良くして行きます。
見た目を調整する方法は、見た目を表現できるタグを埋め込む方法と、スタイルシートを使用してタグそのものの見た目を指定してやる方法の2種類があります。
スタイルシートを使用する方法は、スタイルシートの書き方で説明しますので、ここではタグを使用して見た目を調整する方法を説明します。
W3C(World Wide Web Consortium:WWWの標準化団体)の勧告によりますと、タグで見た目を変える方法は廃止予定になっています。
HTMLの「文書構造をマークアップする」と言う趣旨から外れると言うのが理由でしょう。
ファイルの中身の見通しも悪くなるので、スタイルシートを覚えるまでの一時的な物と考えていた方が良いでしょう。
できれば、最初からスタイルシートを使うことをお勧めします。
これは<body>タグに属性を入れる事で背景の色と基本になる文字の色を変える事ができます。
背景色は bgcolor="(色の値)" 、文字色は text="(色の値)" を<body>タグの中に書くことでそれぞれの色を変更できます。
たとえば、背景色に淡い黄色を使い、文字色に濃い青を指定したい時は、<body bgcolor="#ffffcc" text="#000099">と言った書き方をします。
色の指定方法は#を頭につけた16進数6桁で表す方法と、色の名前で指定する方法の2種類有ります。
16進数6桁の意味は、先頭の2桁が赤色、次の2桁が緑色、最後の2桁が青色の明るさを表しています。また、色の数値は大きくなればなるほど明るくなります。
光の3原色で表していますので、赤＋緑で黄色、赤＋青で紫(マゼンタ)、緑＋青で水色(シアン)となります。
ちなみに赤色は#ff0000 緑色は#00ff00 青色は#0000ff 黄色は#ffff00 紫は#ff00ff 水色は#00ffffといった値になります。
色の名前で指定する方法は、black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua の16色が指定できます。
16進数について16進数とは、0から数えて16個目で桁が上がる数字の数え方の事です。
数字には0〜9までの記号しか割り当てられていないのでその上の数を表すのにa,b,c,d,e,fのアルファベットを使用しています。したがってa=10,b=11,c=12...f=15を表しています。
これは<h1>タグに横方向の位置属性を追加することで行えます。
横方向の位置属性は align="(位置名)" で、位置名は左揃える時はleft、真中で揃える時はcennter、右に揃える時はrightを使用します。
ここでは、真中揃えなので<h1 align="center">とします。
これは<font>タグを使用して行います。
<font>タグに大きさと色の属性を指定すると、フォントタグで囲まれた部分のみに文字の大きさと文字色が反映されます。
属性の指定方法は、size="(数値)" で文字の大きさ、color="(色の値)" で文字の色を指定できます。
一回り大きい文字を青色で表示させる時は<font size="+1" color="#0000ff">大きい青</font>、一回り小さい文字を赤色で表示させる時は<font size="-1" color="#ff0000">小さい赤</font>等とします。
文字サイズの指定方法は、+1, +2, -1と言った相対的な指定方法と、1, 2, 3と言った絶対的な指定方法が選べます。
HTMLには文章の区切りに使用する為の横線を入れる<hr>と言うタグが用意されていますので、これを使用して横線を入れる事ができます。(hr は "horizon rule:水平線" を省略した形です。なお、このタグには終了タグが存在しません。)
このページの一番下に有る、"Copyright..."と言ったページの作成者情報を記載するためのタグもHTMLには用意されています。
作成者の情報は、<address>〜<address>の間にまとめて記載しましょう。
--- ここまでのサンプル ---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>Hideのたこ焼き日記</title> </head> <body bgcolor="#ffffcc" text="#000099"> <h1 align="center"> <font size="+4" color="#0000ff">Hide</font>の <font color="#800080">たこ焼き</font>日記 </h1> <hr> <h2><font color="#008000">2002年○月○日</font></h2> <p> 今日は朝から雨が降って、外出する気分にもならない。<br> とりあえず、何もせず。<br> 明日は、たこを買いにいこう。 </p> <h2><font color="#008000">2002年○月×日</font></h2> <p> たこ焼きを作ろうと思ったのがけど、たこ焼き用の鉄板が無いので買いに出かけました。 <br> いろいろな種類の鉄板が売っていましたが、コンロに合わせて丸型で一度に12個焼けるも のを選びました。<br> 後必要なものとして、串？と油引きも一緒に買い求めました。 </p> <hr> <address> 作成者：○○<br> 感想はこちらへ abcd@mailaddress.com<br> </address> </body> </html>
<img>タグを使用します。このタグは終了タグが有りません。
タグの属性は次のように指定します src="画像ファイルの名前" alt="画像が表示されなかった時に表示する名称" height="画像の高さ" width="画像の横幅"
tako_01.pngと言う横幅203ドット高さ196ドットの、たこ焼きの画像を表示させるには、<img src="tako_01.png" alt="たこ焼き" height="203" width="196">と表記します。
HTMLで使用できる画像のファイル形式は、JPEG、PNG、GIFの3種類で、Windows BMP等の形式は使用できません。
現在WebSite上で使用できる画像ファイル形式は次の３種類があります。
その他にも、JPEG2000と言った画像形式がJPEGに変わる物として標準化されていますが、現時点ではほとんど対応していない状況なのでWebSite上では使えません。
コメントとはHTMLを見るためのソフトで見た時には表示したくない文を指します。
コメントは<!--と-->で括った部分がコメントとして認識されます。(注意事項として-記号はコメント内で使用しない方が安全です。)
--- ここまでのサンプル ---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>Hideのたこ焼き日記</title> </head> <body bgcolor="#ffffcc" text="#000099"> <!-- たこ焼きの画像追加 p align="center" で画像をセンタリング --> <p align="center"> <img src="tako_01.png" alt="たこ焼き" height="240" width="320"> </p> <h1 align="center"> <font size="+4" color="#0000ff">Hide</font>の<font color="#800080 ">たこ焼き</font>日記 </h1> <hr> <h2><font color="#008000">2002年○月○日</font></h2> <p> 今日は朝から雨が降って、外出する気分にもならない。<br> とりあえず、何もせず。<br> 明日は、たこを買いにいこう。 </p> <h2><font color="#008000">2002年○月×日</font></h2> <p> たこ焼きを作ろうと思ったのがけど、たこ焼き用の鉄板が無いので買いに出かけました。 <br> いろいろな種類の鉄板が売っていましたが、コンロに合わせて丸型で一度に12個焼けるも のを選びました。<br> 後必要なものとして、串？と油引きも一緒に買い求めました。 </p> <hr> <address> 作成者：○○<br> 感想はこちらへ abcd@mailaddress.com<br> </address> </body> </html>
リンクは、<a href="リンク先のurl">(文字列や画像)</a>とします。
たとえば、「たこ焼き」と言う文字列をクリックした時に、http://takoyaki.com/と言うサイトへジャンプしたい時は<a href="http://takoyaki.com/">たこ焼き</a>と書きます。
(http://takoyaki.com/と言うサイトがもし存在していたら、勝手に使いました。ごめんなさい。)
<a href="mailto:(メールアドレス)">(文字列や画像)</a>とすることで、メール送信用のタグとしても使用できます。
また、<a name="(適当な名前)" id="(nameと同じ名前)">(文字列や画像)</a>とすることでページの位置情報を入れることもできます。
ここで使う名前に使用できる文字は半角アルファベットと0〜9の数字、-(マイナス記号).(ピリオド)_(アンダーバー):(コロン)しか使えません。また、名前はアルファベットで始まる必要があります。(アンダーバーとコロンはHTML4.0でで追加された規格なので、古いブラウザだと認識しない可能性があります。)
<a href="sample.htm#id1">(文字列や画像)</a>とすることにより、sample.htm内の<a name="id1" id="id1">(文字列や画像)</a>部分へジャンプするリンクを書くことができます。(同一ファイル内へのジャンプはファイル名を省略できます。)
ちなみにa はアンカーの頭文字からきています。
--- ここまでのサンプル ---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>Hideのたこ焼き日記</title> </head> <body bgcolor="#ffffcc" text="#000099"> <!-- たこ焼きの画像 p align="center" で画像をセンタリング --> <p align="center"> <img src="tako_01.png" alt="たこ焼き" height="240" width="320"> </p> <h1 align="center"> <font size="+4" color="#0000ff">Hide</font>の<font color="#800080 ">たこ焼き</font>日記 </h1> <hr> <h2><font color="#008000">2002年○月○日</font></h2> <p> 今日は朝から雨が降って、外出する気分にもならない。<br> とりあえず、何もせず。<br> 明日は、たこを買いにいこう。 </p> <h2><font color="#008000">2002年○月×日</font></h2> <p> たこ焼きを作ろうと思ったのがけど、たこ焼き用の鉄板が無いので買いに出かけました。 <br> いろいろな種類の鉄板が売っていましたが、コンロに合わせて丸型で一度に12個焼けるも のを選びました。<br> 後必要なものとして、串？と油引きも一緒に買い求めました。 </p> <!-- http://takoyaki.com/へのリンクを追加 --> <p> <a href="http://takoyaki.com/">たこ焼きの事はtacotaki.comへ</a> </p> <hr> <address> 作成者：○○<br> <!--mailto: を追加 --> 感想はこちらへ <a href="mailto:abcd@mailaddress.com"> abcd@mailaddress.com</a><br> </address> </body> </html>
箇条書きを行う時はul,ol,li または、dl,dt,dd と言った要素のタグを使用します。
ul又はolタグで囲まれた部分が箇条書きであることを示しています。
箇条書きの内容はliタグで囲みます。
箇条書きのヘッダーが・の時はulを使用し、数字の場合はolを使用します。また、箇条書きにする文書はliタグに包括される形で書きます。(li要素の終了タグは省略可。)
基本的な書き方は次のようになります。(このページの目次を作った場合)
<p>HTML 書き方入門 目次</p>
<!-- 箇条書きのタイトルを付けるタグが無いのでこのように表記してあるだけです-->
<ul>
<li>はじめに</li>
<li>最初に行う事</li>
<li>文章を作る</li>
<!-- (以下同様に続く) -->
</ul>
これは次のように表示されます。
HTML 書き方入門 目次
また、ulの部分をolに変更すると次のように表示されます。
HTML 書き方入門 目次
dlタグで囲まれた部分が表題付きの箇条書き文であることを示しています。
表題はdtタグで囲み、箇条書きの内容はddタグで囲みます。
注：dtタグの中にはインライン要素しか含むことができません。
基本的な書き方は次のようになります。(日記に利用した場合)
<dl>
<dt>2002.xx.xx</dt>
<dd>本日は晴天なり。</dd>
<dt>2002.xx.yy</dt>
<dd>今日は雨でした</dd>
</dl>
表の作成にはtable,tr,th,td,captionと言ったタグを使用します。
まず、<table></table>で表の外枠を設定します。この時にtableタグにはsummary属性で要約をつけておきましょう。
次にcaptionタグで表のタイトルをつけます。(これは省略してもかまいません。)
次に<tr></tr>で行を作ります。その後<td></td>でセルを作ります。(タイトル用のセルはtdの代わりにthを使用します。)
以下にプロ野球の順位表をサンプルとして上げておきます。
<table border="1" summary="パリーグ順位表"> <caption>パリーグ順位表(2002年6月15日現在)</caption> <tr> <th>順位</th><th>チーム</th><th>勝</th><th>負</th><th>引分</th><th>勝率</th><th>ゲーム差</th> </tr> <tr> <td>1</td><td>西武</td><td>36</td><td>17</td><td>1</td><td>.679</td><td>-</td> </tr> <tr> <td>2</td><td>近鉄</td><td>32</td><td>20</td><td>1</td><td>.615</td><td>3.5</td> </tr> <tr> <td>3</td><td>ダイエー</td><td>28</td><td>25</td><td>1</td><td>.528</td><td>4.5</td> </tr> <tr> <td>4</td><td>日本ハム</td><td>27</td><td>29</td><td>0</td><td>.482</td><td>2.5</td> </tr> <tr> <td>5</td><td>オリックス</td><td>21</td><td>33</td><td>0</td><td>.388</td><td>5.0</td> </tr> <tr> <td>6</td><td>ロッテ</td><td>16</td><td>36</td><td>1</td><td>.307</td><td>4.0</td> </tr> </table>
上記順位表を表示させると次のようになります。
| 順位 | チーム | 勝 | 負 | 引分 | 勝率 | ゲーム差 |
|---|---|---|---|---|---|---|
| 1 | 西武 | 36 | 17 | 1 | .679 | - |
| 2 | 近鉄 | 32 | 20 | 1 | .615 | 3.5 |
| 3 | ダイエー | 28 | 25 | 1 | .528 | 4.5 |
| 4 | 日本ハム | 27 | 29 | 0 | .482 | 2.5 |
| 5 | オリックス | 21 | 33 | 0 | .388 | 5.0 |
| 6 | ロッテ | 16 | 36 | 1 | .307 | 4.0 |
表を作成するに当たっての注意点は、一行当たりのセル数を同じにする必要が有ると言うことです。
tableタグを使用して、レイアウトを行う事も可能ですが、サンプルを見てもらえばわかると思いますが、高々７×７の表を作るのにあれだけ沢山のタグを必要とするので、ファイルの見通しが悪くなり間違いが発生しやすくなります、特にNetscape4.xはタグの閉じ忘れでブラウザ自体が固まってしまう事もたびたび発生しますので気を付けて下さい。
良く、テーブルレイアウトに批判的な人が音声ブラウザの事を取り上げますが、表本来の使い方の方が音声ブラウザに対して問題が大きいと思います。
その証拠に、前述の順位表を読み上げて見てください、途中で数値の意味がわから無くなってきますから。これを音声で読み上げても伝わるようにすると、わざわざ表にした意味が無くなってしまいます。
まぁ、表と言うものの本質が見て(視覚に訴えて)解りやすくする為の物だからしかたないでしょう。
HTMLには単語や文字列を強調するためのタグ要素が色々用意されています。
物理的な強調表現に用いるタグ要素とは、見え方が規定されているものの意味が規定されていないタグ要素を指しており以下のようなタグがあります。(かっこ内は廃止予定のタグ要素なので使用しない方がよいでしょう。)
<big>,<small>,<i>,<b>,<tt>,(<u>,<s>,<strike>)
これらのタグ要素は次のような見え方を規定されています。
以下のタグ要素は、強調の意味が規定されています。
強調表現を使用するときはこちらのタグをできるだけ使用することが望ましいと思います。
<em>,<strong>,<cite>,<dfn>,<code>,<samp>,<kbd>,<var>,<abbr>,<acronym>
これらのタグ要素は次のような意味が規定されています。
これらのタグはすべてインライン属性を持つので、単語などを強調するのに使用します。
CODEタグについて：「サンプルプログラムなどをマークアップするのに使用します。」
とよく説明されていますが、よくよく考えてみると「サンプルプログラムなどのマークアップ」にインライン属性を持ったタグを使用することに疑問を覚えます。
サンプルプログラムなどはブロック属性を持つタグでマークアップするべき物ではないでしょうか？
個人的にはサンプルプログラムなどは<pre>でマークアップするのでわざわざ<code>でマークアップする必要はないと考えます。
では、<code>はどのようなときに使用するのかというと、文中に関数名などが出たときにその関数名をマークアップするのが適切な使い方だと考えます。
例：「<code>printf()</code>はディスプレイに出力するための関数です。」
日本語ではプログラムの関数などはアルファベットになるので、特に強調しなくても判別に困るようなことはないと思われ、日本語の環境では特に必要のないタグだと考えています。
ABBRとACRONYMタグについて：意味合いについてほぼ同じ意味のタグです。
なぜ２種類用意されたのかが謎です。
HTMLには乗数を表現するための上付き文字と化学式などに使う下付き文字が用意されています。
上付き文字は<sup>〜</sup>で囲み、下付き文字は<sub>〜</sub>で囲みます。
２nを表現したいときは「２<sup>n</sup>」と表記し、Ｈ2Ｏを表現したいときは「Ｈ<sub>2</sub>Ｏ」と表記します。
HTMLには引用を意味する<blockquote>及び<q>と言うタグが用意されています。
長い文章を引用するときは<blockquote>を使用し、短いセンテンス、単語などを引用するときは<q>を使用します。
希にblockquoteを左右のマージン確保のために使用しているページを見かけます。
blockquoteには引用という意味がありますので良くないタグの使い方ですね。
divとspanというタグがHTMLには用意されていますが、この二つのタグに関しては意味が全く付加されておりませんので、もっぱらスタイルシートを反映させる目的でのみ使用されております。
divはブロック属性を持つ要素に分類され、ほぼすべての要素を包括できます。
基本的には、新たな意味のブロック属性を持つ要素タグを作成するのに使用します。
たとえば、作者注記を記載する意味で<div class="note">などとします。
spanはインライン属性を持つ要素に分類され、インライン要素しか包括できません。
spanは意味を持たないので、できる限り強調表現を利用しましょう。
<head>〜</head>部分をHTMLのヘッダーと呼び、そこには色々な文書情報を記載することができます。
以下に入れておいた方がよい項目を上げておきます。