HTML/CSS解説

手っ取り早くサイト作成をなさりたいのでしたら、文書作成のはじめにで、文書の基礎を作り、HTMLリファレンスを用いてマーク付けしていくといいでしょう。

質問疑問などはサイト作成関連BBSにてどうぞ。

簡略目次

詳細目次

用語

要素(Elements)

構造を表す要素型です。

<a name="how">リンクを張る時の心得</a>

ブロックレベル要素(Block-level elements)

body要素内に記述することが可能な要素です。ブロックレベル要素は新しい行を開始します。

ブロックレベル要素についての注意点

インライン要素(テキストレベル要素)(Inline elements(Text-level elements))

インライン要素は同じ行に存在します。

インライン要素についての注意点

フロウ(flow)

フロウは特殊で、ブロックレベル要素でもインライン要素でも内容とすることができます。

フロウについての注意点

ins|del

ins要素del要素は、ブロックレベル要素の中でもインライン要素の中でも記述することができます。

ins|delについての注意点

ins|delの内容

ブロックレベル要素内容とできる要素に対してブロックレベル要素ins|del内容とすることができ、インライン要素内容とできる要素に対してインライン要素をins|delの内容とすることができます。

つまり、ins|del内容は、ins|del親要素内容継承するのでins|delを排除した状態でも正しい構文になるようにしなければいけません。

空要素(empty elements)

内容のないものは空要素と言います。空要素には終了タグがありません。

親要素子要素子孫要素祖先要素、及び兄弟要素(parent elements, child elements, descendant elements, ancestor elements and sibling elements)

要素内容とする一つ上の階層の要素を親要素といい、親要素に対する内容を子要素といいます。親要素に対してその子要素及び子要素以下の階層の要素を子孫要素といい、要素に対してその親要素及び親要素以上の階層の要素を祖先要素といいます。

<del><p>俺は<em>本格的</em>に<strong>怒りに満ちて</strong>いたんだよね。</p></del>

というHTMLの記述の場合のそれぞれの要素に対する関係は以下のようになります。

del要素
子要素
p要素
子孫要素
p要素、em要素、strong要素
p要素
親要素
del要素
子要素
em要素、strong要素
em要素
祖先要素
del要素、p要素
親要素
p要素
兄弟要素
strong要素
strong要素
祖先要素
del要素、p要素
親要素
p要素
兄弟要素
em要素

要素の関係は、説明するときやされるときに知っておくと便利かと思われます。

継承(inheritance)

祖先要素の背景色や文字色、文字のサイズなどを受け継ぐことを継承と呼びます。

<del><p>若菜は<em>とても<strong>素敵な具合に</strong>立派に</em>頑張ったんだと思う。</p></del>

というHTMLの記述で、

del要素
取り消し線
em要素
斜体
strong要素
太字

というレンダリングを提供するユーザーエージェントの場合、p要素親要素であるdel要素の取り消し線を継承し、em要素は斜体で尚且つ取り消し線を継承し、strong要素は太字で尚且つ取り消し線、斜体でレンダリングされるということです。

属性(Attributes)

要素の関連特性です。要素に続けて半角スペース分空けて記述します。属性は複数記述することが可能です。

<a name="how">リンクを張る時の心得</a>

属性の中身を属性値と言います。属性値は属性と=で結び引用符で括ります。引用符で括らなくてもよい属性値(「a-z」「A-Z」「0-9」「-」「,」「_」「,」のみの場合)も存在しますが、括る必要のあるものとないものの法則を覚えるよりも取り敢えず全部括っておいた方が間違えずに済むでしょう。

<a name="how">リンクを張る時の心得</a>

非推奨(Deprecated)

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 4.01 仕様書邦訳概説 推奨しない

非推奨要素、非推奨属性は、主に「HTMLで見栄えを指定する」というものです。ソースの可読性の向上や、軽量化、管理面から考えてもスタイルシートで見栄えを定義することを推奨します。

タグ(Tag)

要素の開始を表す開始タグと要素の終わりを表す終了タグが存在します。終了タグが存在しない(内容がない)ものを空要素と呼びます。

<a name="how">リンクを張る時の心得</a>

タグについての注意点

内容(Content)

開始タグと終了タグの間にあるものを指します。

内容のない要素空要素といい、終了タグがありません。

<a name="how">リンクを張る時の心得</a>

コメント(Comment)

<!--と-->で括ることでコメント扱いとすることが可能です。コメント扱いされた文字列はレンダリングされません(非表示です)。コメント内に2つ以上連続した-を入れてはいけません。

利用法としましては、ソースにコメントを入れておくことで修正するときの目印にする、などです。

<!-- ここからはメインコンテンツ -->
<h2>僕の一生</h2>

サイズ(Size)

サイズを指定するには、絶対単位、相対単位などの単位を付ける方法と、絶対サイズ、相対サイズといった大きさを明示する方法とがあります。

単位
種別 単位 意味
絶対単位 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として表示されます。

ユーザーエージェント(User Agent)

ユーザーエージェント(UAと略されることが多いです)とは、HTMLやhttpを利用するプログラムを指します。サイト作成において、ユーザーエージェントという場合は、ブラウザのことを示していると考えて問題ないと思われます。ユーザーエージェントによって要素の描画方法に差異があったりするので注意が必要です。

ネットスケープ4.xではfloatで回り込んだボックスが折り返されない(横スクロールバーが出現する)、Operaでフォントサイズ100%を入れ子にすると子孫要素が小さくなるなどといった問題がありますので一つのユーザーエージェントで思い通りに表示されたとしても注意が必要です。

URIURLURN

URIUniversal Resource Identifier

リソースの識別子を表します。URLURNの集合体です。

記述する際には、省略せず記述する絶対URIと、文書の基本となるURIを基とした相対URIがあります。

URLUniform Resource Locator

リソースのある位置指定子を表します。リソースが存在している位置です。

URNUniform Resource Name

リソースの名前を表します。リソースの存在の有無に関わらず、一意かつ永続的な名前です。

相対URI(Relative URI)

相対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(Absolute URI)

絶対URI(絶対パスとも呼ばれます)とは、URIそのものです。相対URIに対し、省略せずに記述したものをこのように呼びます。

入れ子(Nest)

これはサイト作成の専門用語などではありませんが、よく使われる言葉です。入れ子(ネストと呼ばれることも多いです)とは、要素の中に要素が入っている状態を指します。

子孫要素の終了タグの位置に注意して下さい。要素の終了タグが出現する前に親要素の終了タグが出現してはいけません。

<em>遠足の事ばかり<strong>考えては</em>ダメだよ。</strong>

2003.9.5
writer:Rju
BBS:サイト作成関連BBS
参照