手っ取り早くサイト作成をなさりたいのでしたら、文書作成のはじめにで、文書の基礎を作り、HTMLリファレンスを用いてマーク付けしていくといいでしょう。
質問疑問などはサイト作成関連BBSにてどうぞ。
簡略目次
詳細目次
構造を表す要素型です。
<a name="how">リンクを張る時の心得</a>
body要素内に記述することが可能な要素です。ブロックレベル要素は新しい行を開始します。
インライン要素は同じ行に存在します。
フロウは特殊で、ブロックレベル要素でもインライン要素でも内容とすることができます。
ins要素とdel要素は、ブロックレベル要素の中でもインライン要素の中でも記述することができます。
ブロックレベル要素を内容とできる要素に対してブロックレベル要素をins|delの内容とすることができ、インライン要素を内容とできる要素に対してインライン要素をins|delの内容とすることができます。
つまり、ins|delの内容は、ins|delの親要素の内容を継承するのでins|delを排除した状態でも正しい構文になるようにしなければいけません。
内容のないものは空要素と言います。空要素には終了タグがありません。
要素を内容とする一つ上の階層の要素を親要素といい、親要素に対する内容を子要素といいます。親要素に対してその子要素及び子要素以下の階層の要素を子孫要素といい、要素に対してその親要素及び親要素以上の階層の要素を祖先要素といいます。
<del><p>俺は<em>本格的</em>に<strong>怒りに満ちて</strong>いたんだよね。</p></del>
というHTMLの記述の場合のそれぞれの要素に対する関係は以下のようになります。
要素の関係は、説明するときやされるときに知っておくと便利かと思われます。
祖先要素の背景色や文字色、文字のサイズなどを受け継ぐことを継承と呼びます。
<del><p>若菜は<em>とても<strong>素敵な具合に</strong>立派に</em>頑張ったんだと思う。</p></del>
というHTMLの記述で、
というレンダリングを提供するユーザーエージェントの場合、p要素は親要素であるdel要素の取り消し線を継承し、em要素は斜体で尚且つ取り消し線を継承し、strong要素は太字で尚且つ取り消し線、斜体でレンダリングされるということです。
要素の関連特性です。要素に続けて半角スペース分空けて記述します。属性は複数記述することが可能です。
<a name="how">リンクを張る時の心得</a>
属性の中身を属性値と言います。属性値は属性と=で結び引用符で括ります。引用符で括らなくてもよい属性値(「a-z」「A-Z」「0-9」「-」「,」「_」「,」のみの場合)も存在しますが、括る必要のあるものとないものの法則を覚えるよりも取り敢えず全部括っておいた方が間違えずに済むでしょう。
<a name="how">リンクを張る時の心得</a>
The following elements are deprecated: APPLET, BASEFONT, CENTER, DIR, FONT, ISINDEX, MENU, S, STRIKE, and U.
HTML 4.01 仕様書邦訳概説 附属書 A: 変更点 Deprecated elements
とあるように、APPLET要素、BASEFONT要素、CENTER要素、DIR要素、FONT要素、ISINDEX要素、MENU要素、S要素、STRIKE要素そしてU要素は非推奨要素です。
一般的に言って、スタイルやフォーマットを整えるためには、HTMLのプレゼンテーション属性ではなくスタイルシートを使用すべきである。
非推奨要素、非推奨属性は、主に「HTMLで見栄えを指定する」というものです。ソースの可読性の向上や、軽量化、管理面から考えてもスタイルシートで見栄えを定義することを推奨します。
要素の開始を表す開始タグと要素の終わりを表す終了タグが存在します。終了タグが存在しない(内容がない)ものを空要素と呼びます。
<a name="how">リンクを張る時の心得</a>
<a name="how">リンクを張る時の心得</a>
<!--と-->で括ることでコメント扱いとすることが可能です。コメント扱いされた文字列はレンダリングされません(非表示です)。コメント内に2つ以上連続した-を入れてはいけません。
利用法としましては、ソースにコメントを入れておくことで修正するときの目印にする、などです。
<!-- ここからはメインコンテンツ -->
<h2>僕の一生</h2>
サイズを指定するには、絶対単位、相対単位などの単位を付ける方法と、絶対サイズ、相対サイズといった大きさを明示する方法とがあります。
| 種別 | 単位 | 意味 |
|---|---|---|
| 絶対単位 | mm | ミリメートル |
| cm | センチメートル(1cm=10mm) | |
| in | インチ(1in=2.54cm) | |
| pt | ポイント(72pt=1in) | |
| pc | パイカ(1pc=12pt) | |
| 相対単位 | em | 大文字「M」の高さ |
| ex | 小文字「x」の高さ | |
| px | ピクセル | |
| % | パーセント |
| 種別 | 値 | 意味 |
|---|---|---|
| 絶対サイズ | xx-small | よりとても小さい |
| x-small | とても小さい | |
| small | 小さい | |
| medium | 中 | |
| large | 大きい | |
| x-large | とても大きい | |
| xx-large | よりとても大きい | |
| 相対サイズ | larger | 大きく |
| smaller | 小さく |
絶対単位、絶対サイズは、親要素のサイズに依存せずに絶対的なサイズを提供します。
相対単位、相対サイズは、親要素のサイズを継承した相対的なサイズの単位です。この中で、px(ピクセル)だけは「解像度に対して相対的」なので、親要素のサイズは継承しません。
従ってブラウザ側でフォントサイズの変更を行っても解像度そのものを変更しない限りサイズは変更されません(インターネットエクスプローラではなぜかptもブラウザ側での変更を無視します)。サイズを指定する場合はpx以外の相対単位(いろいろ考慮するとem、%など)を使用することが好ましいです。
絶対単位が嫌われる理由については、font-sizeプロパティによる文字サイズ固定を参照してください。
<h1 style="font-size : 2em;">橋本たちとの一日<span
style="font-size : 50%;">頑張れ</span></h1>
<p style="font-size : 1em;">俺は叫んだ。<span
style="font-size : 50%;">橋本め!</span></p>
というソースの場合、h1要素のフォントサイズは2emなので、「橋本たちとの一日」は2emとして表示されますが、「頑張れ」は、親要素(h1要素)の2emを継承し、それの50%なので1emとして表示されます。p要素のフォントサイズは1emなので、「俺は叫んだ。」は1emとして表示されますが、「橋本め!」は、親要素(p要素)の1emを継承し、それの50%なので0.5emとして表示されます。
ユーザーエージェント(UAと略されることが多いです)とは、HTMLやhttpを利用するプログラムを指します。サイト作成において、ユーザーエージェントという場合は、ブラウザのことを示していると考えて問題ないと思われます。ユーザーエージェントによって要素の描画方法に差異があったりするので注意が必要です。
ネットスケープ4.xではfloatで回り込んだボックスが折り返されない(横スクロールバーが出現する)、Operaでフォントサイズ100%を入れ子にすると子孫要素が小さくなるなどといった問題がありますので一つのユーザーエージェントで思い通りに表示されたとしても注意が必要です。
リソースの識別子を表します。URLとURNの集合体です。
リソースのある位置指定子を表します。リソースが存在している位置です。
リソースの名前を表します。リソースの存在の有無に関わらず、一意かつ永続的な名前です。
相対URI(相対パスとも呼ばれます)とは、文書の基準となるURIに対するURIの指定方法です。その文書と同じディレクトリに存在するabout.htmlとの関係は、以下のように記述できます。
about.html
./about.html
また、上のディレクトリの場合は、../という記述を用いて遡る事が可能です。二つ上のディレクトリのdiary.htmlの場合は以下のように記述できます。
../../diary.html
また、下のディレクトリの場合は、ディレクトリ名/ファイル名で下ることも可能です。webディレクトリ内のlink.htmlの場合は以下のように記述できます。
web/link.html
違うディレクトリに存在する場合は、遡ってから下る、ということも可能です。一つ上のディレクトリ内にあるwebディレクトリ内のreferenceディレクトリ内のindex.htmlの場合は以下のように記述できます。
../web/reference/index.html
a要素のhref属性や、img要素のsrc属性、link要素などURIを記述する際に用いることが可能です。
<a href="../paranoia/2003_08.html">
base要素を用いて、文書の基準となるURIを設定している場合は、その文書のURIをbase要素のURIを用いて解釈されます。
絶対URI(絶対パスとも呼ばれます)とは、URIそのものです。相対URIに対し、省略せずに記述したものをこのように呼びます。
これはサイト作成の専門用語などではありませんが、よく使われる言葉です。入れ子(ネストと呼ばれることも多いです)とは、要素の中に要素が入っている状態を指します。
子孫要素の終了タグの位置に注意して下さい。要素の終了タグが出現する前に親要素の終了タグが出現してはいけません。
<em>遠足の事ばかり<strong>考えては</em>ダメだよ。</strong>
2003.9.5