|Home|私のLinux活用記録-Home-|

私のLinux活用記録

-Page15-

 

[HTML 4.01 Strict DTD 表記法]

作成:2003年07月26日
更新:2008年02月23日

これまで、HTML ドキュメントは Netscape 4.78 Composer で作成していたので、どのようなソースが生成しているかほとんど気にしていなかったのですが、Mozilla Composer への変更を試みている時に font color 等の無駄なタグがいっぱいあることに気づきました。

あらためて HTML 4.01 リファレンスを読んでみて、現在使用している <center>, <font color>, bgcolor 属性等の使用や、テーブルによるレイアウト等は、HTML 4.01 では推奨されていないことが判りました。これを機会に、HTML 4.01 Strict DTD 準拠のドキュメントに全面書き換えを行いました。

HTML 4.01 Strict DTD への変更にあたって使用した(使用予定も含む) 要素タグ、属性、スタイルシートの要約を作成したので、以下に掲載します。

[参考]

  • http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html
  • http://www.zspc.com/html40/
  • http://www.zspc.com/stylesheets/index.html
  • ホームページ辞典(第3版) / (株)アンク 著 / (株)翔泳社 / 2003年3月20日発行

kh15-01.01 HTML 文書の基本要素
kh15-01.02 テキスト
kh15-01.03 フォント、罫線
kh15-01.04 リスト
kh15-01.05 イメージ
kh15-01.06 リンク
kh15-01.10 クライアントサイドイメージマップ
kh15-01.07 テーブル
kh15-01.11 フレーム
kh15-01.08 スタイルシートの定義と適用方法
kh15-01.09 スタイルシートのプロパティ

戻る

HTML 文書の基本要素

要素 <要素名 属性="値">要素の内容</要素名>
注:属性="値":複数の属性を適用する場合は、属性="値" 属性="値" ... 属性="値"
汎用属性 ■ class="クラス名":要素にクラス定義したスタイルを適用(スタイルシートの定義と適用方法を参照)
■ style="スタイルシート":要素に直接スタイルを適用(スタイルシートの定義と適用方法を参照)
■ lang="言語コード":要素の言語コードを指定、日本語は、lang="ja"、<html>, <body>, <div> 等に使用
HTML 文書の全体構造 <html>
<head>
文書情報1-4
</head>
<body>
文書内容
</body>
</html>
文書情報1(文字コード、スタイルシート等の情報) <meta http-equiv="属性の種類" content="値">
属性の種類:Content-Type, Content-Style-Type, etc.
値:属性の種類に対する値
文書情報2(著者、キーワード、作成ツール等の情報) <meta name="属性の種類" content="値">
属性の種類:author, keyword, generator, etc.
値:属性の種類に対する値
文書情報3(タイトル) <title>タイトル</title>
文書情報4(スタイルシート定義) <style type="text/css">
<!--
定義内容
-->
</style>
文書内容 ■ ブロックレベル要素:div, h1, ..., h6, hr, ol, p, pre, table, ul, etc.
■ インラインレベル要素:a, b, big, i, img, small, span, strong, sub, sup, tt, etc.
文字列の範囲指定(スタイルシート適用に使用) ■ <span style="プロパティ:値">文字列</span>
注:"プロパティ:値":複数のプロパティを適用する場合は、"プロパティ:値; ... ; プロパティ:値"
■ <span class="クラス名">文字列</span>
ブロックの範囲指定(スタイルシート適用に使用) ■ <div style="プロパティ:値">ブロック内容</div>
注:"プロパティ:値":複数のプロパティを適用する場合は、"プロパティ:値; ... ; プロパティ:値"
■ <div class="クラス名">ブロック内容</div>

戻る

テキスト

見出しN <hN>見出し</hN>
N:1, 2, 3, 4, 5, 6
段落 <p>文章
改行 <br>文章
テキスト通り表示 <pre>文章</pre>
注:要素内でタグは用いないこと。空白、改行等をテキスト通り等幅フォント、折り返しなしで表示
強い強調 <strong>文字列</strong>
上付き文字 <sup>文字列</sup>
下付き文字 <sub>文字列</sub>

戻る

フォント、罫線

太字 <b>文字列</b>
斜体 <i>文字列</i>
等幅 <tt>文字列</tt>
大きめの文字 <big>文字列</big>
小さめの文字 <small>文字列</small>
特殊文字 space :&nbsp;
<     :&lt;
>     :&gt;
&     :&amp;
"     :&quot;
'     :&#39;
Others:&#XXXX; による特殊文字の表示
横罫線 <hr>

戻る

リスト

リスト <ul>
<li>文字列</li>
・・・
<li>文字列</li>
</ul>
番号付きリスト <ol>
<li>文字列</li>
・・・
<li>文字列</li>
</ol>
用語の定義リスト <dl>
<dt>用語</dt><dd>定義内容</dd>
・・・
<dt>用語</dt><dd>定義内容</dd>
</dl>

戻る

イメージ

画像表示 <img src="画像のURL">
画像のテキスト <img src="画像のURL" alt="代替テキスト">
画像のサイズ <img src="画像のURL" width="px|%" height="px|%">

戻る

リンク

追記:2004年04月29日
リンク先設定 <a name="リンク名"></a>
リンク設定 <a href="URL|#リンク名">文字列</a>
リンク先を新しいウィンドウで表示 <a href="URL|#リンク名" target="_blank">文字列</a>
注:target 属性は、HTML 4.01 Transitional(loose.dtd) です
リンク先を既存フレームを解除して表示 <a href="URL|#リンク名" target="_top">文字列</a>
注:target 属性は、HTML 4.01 Transitional(loose.dtd) です

戻る

クライアントサイドイメージマップ

追記:2004年04月29日
<img src="画像のURL" usemap="#マップ名" alt="代替テキスト">
<map name="マップ名">
<area shape="領域の形" coords="領域の座標" href="URL|#リンク名" alt="代替テキスト">
・・・
<area shape="領域の形" coords="領域の座標" href="URL|#リンク名" alt="代替テキスト">
</map>
領域の形 :default: 全体; rect: 四角形; circle: 円; poly: 多角形
領域の座標:
rect :左上X座標,左上Y座標,右下X座標,右下Y座標
circle:中心X座標,中心Y座標,半径
poly :X1座標,Y1座標,X2座標,Y2座標,...,Xn座標,Yn座標,X1座標,Y1座標

戻る

テーブル

テーブル作成 <table 属性>行要素</table>
行要素 <tr 属性>セル要素</tr>
見出し行(列) <th 属性>データ</th>
セル要素 <td 属性>データ</td>
枠線幅 <table border="px">行要素</table>
セル間隔とマージン <table cellspacing="px" cellpadding="px">行要素</table>
テーブル幅 <table width="px|%">行要素</table>
セルの幅 <td style="width: px|%">データ</td>
キャプション <caption>文字列</caption>
テキストの横位置 <tr align="属性値">セル要素</tr>
<th align="属性値">データ</th>
<td align="属性値">データ</td>
属性値:left, center, right
テキストの縦位置 <tr valign="属性値">セル要素</tr>
<th valign="属性値">データ</th>
<td valign="属性値">データ</td>
属性値:top, middle, bottom, baseline
縦方向セル連結 <th rowspan="N">データ</th>
<td rowspan="N">データ</td>
横方向セル連結 <th colspan="N">データ</th>
<td colspan="N">データ</td>
背景色 <table style="background-color: #rrggbb">行要素</table>
<tr style="background-color: #rrggbb">セル要素</tr>
<th style="background-color: #rrggbb">データ</th>
<td style="background-color: #rrggbb">データ</td>
注:rr:赤成分16進数2桁、gg:緑成分16進数2桁、bb:青成分16進数2桁

戻る

フレーム

追記:2004年04月29日
<frameset> は、HTML 4.01 Frameset(frameset.dtd) です。
フレーム作成(縦割) <frameset cols="px|%|*,...,px|%|*">
<frame src="ファイルのURL" name="フレーム名">
・・・
<frame src="ファイルのURL" name="フレーム名">
</frameset>
フレーム作成(横割) <frameset rows="px|%|*,...,px|%|*">
<frame src="ファイルのURL" name="フレーム名">
・・・
<frame src="ファイルのURL" name="フレーム名">
</frameset>
スクロールバーの表示・非表示 <frame src="ファイルのURL" scrolling="属性値">
属性値:auto, yes, no
フレーム名を指定してリンクする <a href="URL|#リンク名" target="#フレーム名">
注:フレーム名は
<frame src="ファイルのURL" name="フレーム名">
によって定義されている必要があります
フレーム非対応ブラウザーへの対応 <frameset ... >
<frame ... >
・・・
<noframes>
文書内容
<a href="noframes-index.html(example)">
</noframes>
</frameset>
注:フレーム非対応ブラウザーでは、<noframes>〜</noframes> に記述された内容が表示されます

戻る

スタイルシートの定義と適用方法

デフォルトスタイルシート指定 <head>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
外部スタイルシート指定 <head>
<link rel="stylesheet" href="URL(.css file)" type="text/css">
</head>
文書内スタイルシート定義 <head>
<style type="text/css">
<!--
定義内容
-->
</style>
</head>
文書内スタイルシートの定義内容 <style type="text/css">
<!--
要素名 {プロパティ:値}
・・・
要素名.クラス名 {プロパティ:値}
・・・
.クラス名 {プロパティ:値}
・・・
疑似クラス名 {プロパティ:値}
・・・
-->
</style>
注1:要素名:特定の要素にスタイルを定義
注2:要素名.クラス名:特定の要素に有効なクラスを定義
注3:.クラス名:不特定の要素に対してクラスを定義
注4:疑似クラス名:"疑似クラスの定義"を参照
注5:{プロパティ:値}:複数のプロパティを適用する場合は、{プロパティ:値; ... ; プロパティ:値}
疑似クラスの定義 <style type="text/css">
<!--
a:link {プロパティ:値}
a:visited {プロパティ:値}
a:hover {プロパティ:値}
a:active {プロパティ:値}
-->
</style>
注:a 要素の状態に対するスタイルの定義、状態によって文字色を定義する場合に使用
要素に直接スタイルを適用 <要素名 style="プロパティ:値">要素の内容</要素名>
注:"プロパティ:値":複数のプロパティを適用する場合は、"プロパティ:値; ... ; プロパティ:値"
要素にクラス定義したスタイルを適用 <要素名 class="クラス名">要素の内容</要素名>
任意の文字列にスタイルを適用 ■ <span style="プロパティ:値">文字列</span>
注:"プロパティ:値":複数のプロパティを適用する場合は、"プロパティ:値; ... ; プロパティ:値"
■ <span class="クラス名">文字列</span>
任意のブロックにスタイルを適用 ■ <div style="プロパティ:値">文字列</div>
注:"プロパティ:値":複数のプロパティを適用する場合は、"プロパティ:値; ... ; プロパティ:値"
■ <div class="クラス名">文字列</div>

戻る

スタイルシートのプロパティ

ボックスのマージン(ボックスの外側空白部)指定 margin-top: %|px
margin-right: %|px
margin-bottom: %|px
margin-left: %|px
margin: auto
注:% は、親要素のボックス幅に対する割合
ボックスのパディング(ボックスの内側空白部)指定 padding-top: %|px
padding-right: %|px
padding-bottom: %|px
padding-left: %|px
注:% は、親要素のボックス幅に対する割合
ボックスの枠線の太さ指定 border-top-width: px
border-right-width: px
border-bottom-width: px
border-left-width: px
ボックスの内容領域の指定 ■ width: %|px
注:% は、親要素のボックス幅に対する割合
■ height: %|px
注:% は、親要素のボックス高に対する割合
文字色の指定 color: #rrggbb
注:rr:赤成分16進数2桁、gg:緑成分16進数2桁、bb:青成分16進数2桁
文字の修飾 text-decoration: 値
値:overline(上線), underline(下線), line-through(取り消し線), blink(点滅)
行の高さ設定 line-height: px|%
行揃え text-align: 値
値:left(左揃え), right(右揃え), center(中央揃え)
文字の垂直位置の指定 vertical-align: 値
値:super(上付き文字), sub(下付き文字), top(上揃え), middle(中央揃え), bottom(下揃え)
文字間隔の指定 letter-spacing: px|%
フォントの指定 font-family: 値
値:serif(明朝系), sans-serif(ゴシック系), monospace(等幅)
フォントサイズの指定 font-size: 値
値:px|%|xx-small(極小), x-small(小), small(微小), medium(標準), large(微大), x-large(大), xx-large(極大)
フォントを斜体にする font-style: italic
フォントの太さ指定 font-weight: 値
値:100, 200, ..., 400(標準), ..., 900|normal(標準), bold(太字)
背景色の指定 background-color: #rrggbb
注:rr:赤成分16進数2桁、gg:緑成分16進数2桁、bb:青成分16進数2桁
背景画像の指定 background-image: 画像ファイルの url
注:画像ファイルの url:外部スタイルシートを使用している場合、画像ファイルの url は、スタイルファイルからの相対 url

戻る

counter1counter2counter3counter4counter5counter6

|Home|
 
Valid XHTML 1.1 Valid CSS!