HTML 主な要素

HTML 4 の基本的な要素です。 ホームページ作成の参考にしてください。
(私が参考に使用する目的で作成しました。)

トップレベル
ElementsAttributes
<html> - </html> 文書インスタンス
 <head> - </head> 文書ヘッダ
 <body> - </body> 文書本体


ヘッド
ElementsAttributes
<meta>http-equip="NAME"
content="CDATA"
name="NAME"
文書メタ情報
<title> - </title> 文書タイトル
<base>href="%URI;"パス情報
<link>href="%URI;"
rel="%LinkTypes;"
rev="%LinkTypes;"
文書間関係
<style> - </style>type="%ContentType;"
media="%MediaDesc;"
スタイル指定

例: <meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">


ブロック・レベル
ElementsAttributes
<h1〜6> - </h1〜6>align="left | center | right"見出し
<p> - </p>align="left | center | right"段落
<div> - </div>align="left | center | right"文書分割
<blockquote> - </blockquote> ブロック引用
<pre> - </pre> フォーマット済みテキスト
<hr> - </hr>align="left | center | right"
size="%Pixels;"
width="%Length;"
noshade="noshade"
左右方向の罫線
<address> - </address> 文書作成者のアドレス

リスト
ElementsAttributes
<dl> - </dl> 定義リスト
 <dt> - </dt> 定義項目
 <dd> - </dd> 定義データ
<ol> - </ol> 順序付きリスト
 <li> - </li> リスト項目
<ul> - </ul> 順序なしリスト
 <li> - </li> リスト項目

フォーム
ElementsAttributes
<form> - </form>action="%URI;"
method="get | post"
enctype="%ContentType;"
フォーム
 <input>type="%InputType;"
name="CDATA"
value="CDATA"
size="CDATA"
maxlength="NUMBER"
checked="checked"
src="%URI;"
align="top | middle | bottom | left | right"
利用者入力フィールド
 <select> - </select>name="CDATA"
size="NUMBER"
multiple="multiple"
フォーム選択
 <option> - </option>value="CDATA"
selected="selected"
利用者選択
 <textarea> - </textarea>rows="NUMBER"
cols="NUMBER"

name="CDATA"
複数行テキストフィールド

ElementsAttributes
<table> - </table>border="%Pixels;"
align="left | center | right"
 <caption> - </caption>align="top | bottom"表題
 <tr> - </tr>align="left | center | right"
valign="middle | top | bottom"
表行
  <th> - </th>rowspan="NUMBER"
colspan="NUMBER"
align="left | center | right"
valign="middle | top | bottom"
nowrap="nowrap"
表ヘッダセル
  <td> - </td>rowspan="NUMBER"
colspan="NUMBER"
align="left | center | right"
valign="middle | top | bottom"
nowrap="nowrap"
表データセル


特別なインライン
ElementsAttributes
<br>clear="left | right | all"行区切り
<a> - </a>name="CDATA"
href="$URI;"
アンカ
<img>src="%URI;"
alt="%Text;"

width="%Length;"
height="%Length;"
align="top | middle | bottom | left | right"
border="&Pixels;"
hspace="&Pixels;"
vspace="&Pixels;"
行内画像
<font> - </font>color="%Color;"
size="CDATA"
文字変更

注: img 要素の alt 属性は、必須です。


ElementsAttributes
<em> - </em> 強調テキスト
<strong> - </strong> 強い強調
<cite> - </cite> 引用
<code> - </code> プログラムコード
<kbd> - </kbd> キーボード入力
<samp> - </samp> 例の出力
<var> - </var> 一般的変数

文字スタイル
ElementsAttributes
<b> - </b> 太字文字スタイル
<i> - </i> イタリック文字スタイル
<big> - </big> 大きなテキスト
<small> - </small> 小さなテキスト


属性値型 "color"= [sRGB] で指定される色定義
Black = "#000000" Silver = "#C0C0C0"
White = "#FFFFFF" Gray = "#808080"
Red = "#FF0000" Maroon = "#800000"
Yellow = "#FFFF00" Olive = "#808000"
Lime = "#00FF00" Green = "#008000"
Aqua (Cyan) = "#00FFFF" Teal = "#008080"
Blue = "#0000FF" Navy = "#000080"
Fuchsia (Magenta) = "#FF00FF" Purple = "#800080"


参考:BACKGROUND に使用される主な色
Ivory = "#FFFFF0" Ghostwhite = "#F8F8FF"
Lightyellow = "#FFFFE0" Mintcream = "#F5FFFA"
Snow = "#FFFAFA" Azure = "#F0FFFF"
Florawhite = "#FFFAF0" Honeydew = "#F0FFF0"
Seashell = "#FFF5EE" Aliceblue = "#F0F8FF"
Lavenderblush = "#FFF0F5" Lightcyan = "#E0FFFF"


背景色と前景色の組み合わせが、十分なコントラストを与えているかを計算する方法

明るさ:((R値 x 299) + (G値 x 587) + (B値 x 114)) / 1000
   ・背景色と前景色の明るさの差は、125以上とする。

色差:(max (R1, R2) - min (R1, R2)) + (max (G1, G2) - min (G1, G2)) + (max (B1, B2) - min (B1, B2))
 [注:R1 や R2 などの 1 は背景色、2 は前景色]
   ・色差は、500以上とする。

スタイル・シート

CSS 1 の主要な特性です。 Internet Explorer 4.01, Netscape 4.06 以降で対応しているものです。

フォント
PropertyValue
font-family:<family-name> | <generic-family>フォントファミリ
font-style:normal | italic | obliqueフォント書体
font-size:<absolute-size> | <relative-size> | <length> | <percentage>フォントサイズ
font:<font-style> | <font-size> | <font-family>フォント・短縮形

カラー及び背景
PropertyValue
color:<color>テキストカラー
background-color:transparent | <color>背景の色
background-image:none | <url>背景画像
background-repeat:repeat | repeat-x | repeat-y | no-repeat画像を繰り返す
background:<background-color> || <background-image> ||
<background-repeat>
背景・短縮形

テキスト
PropertyValue
text-decoration:none [ | underline || overline || line-through || blink ]テキスト修飾
text-align:left | right | centerテキスト揃え
text-indent:<length> | <percentage>字下げ
vertical-align:baseline | top | text-top | middle | bottom | text-bottom上下の位置決め
line-height:normal | <number> | <length> | <percentage>ベースライン間の距離

ボックス
PropertyValue
margin-top:<length> | <percentage> | auto上部余白
margin-right:<length> | <percentage> | auto右余白
margin-bottom:<length> | <percentage> | auto下部余白
margin-left:<length> | <percentage> | auto左余白
margin:[ <length> | <percentage> | auto ]{1,4}余白・簡略表記
padding-top:<length> | <percentage>上部パディング
padding-right:<length> | <percentage>右パディング
padding-bottom:<length> | <percentage>下部パディング
padding-left:<length> | <percentage>左パディング
padding:[ <length> | <percentage> ]{1,4}パディング・簡略表記
border-top-width:medium | thin | thick | <length>上部境界の幅
border-right-width:medium | thin | thick | <length>右境界の幅
border-bottom-width:medium | thin | thick | <length>下部境界の幅
border-left-width:medium | thin | thick | <length>左境界の幅
border-width:[ medium | thin | thick | <length> ]{1,4}境界の幅・簡略表記
border-color:<color>{1,4}境界のカラー
border-style:none | dotted | dashed | solid | double | groove |
ridge | inset | outset
境界のスタイル
border:<border-top-width> || <border-style> || <color>境界・簡略表記
width:auto | <percentage> | <length>
float:none | left | right浮動要素
clear:none | left | right | both浮動要素を解除


これからウェブページを作ってみようと思う方に参考になるサイトと書籍を紹介します。

簡単で正しいHTMLの書き方」に行ってみて下さい。 また、「ホームページ作成無料リンク集」で、情報や素材を得ることが出来ます。 規格は、日本規格協会がW3C勧告のHTML4.01を標準情報(JIS TR X 0033)として公表していますので、必見です。 スタイルシートCSS1は、(JIS TR X 0011)です。

参考書は、「ひとりでつくれる ホームページHTML入門」 村井知生、相原哲哉/著、2002-05-01・成美堂出版/発行 が初心者用としてお勧めです。 また、じっくりと勉強するには、「標準HTML4」 デーブ・ラゲット、他/著 滝沢徹、牧野祐子/訳 1998-09-11・星雲社/発売 と 「Web標準の教科書」 益子貴寛/著、2005-07-20・秀和システム/発行 が良いと思います。

次に、デザイン手法の技術的な解説は、「ウェブ・アクセシビリティ」 マイケル・パチェロ/著 ソシオメディア/訳 2002-06-21・アスキー/発行 がお勧めです。 リファレンスは、「詳解HTML&スタイルシート辞典」 岡蔵龍一/著 2000-09-15・秀和システム/発行 と 「必携 HTML/CSS/JavaScript Webブラウザー互換性辞典」 佐藤和人/著 2003-09-11・インプレス/発行 が便利です。

HTMLエディタとして、初心者はWYSIWYG(What You See Is What You Get)エディタを使用するかと思います。代表的なエディタは、「Front Page」「ホームページ・ビルダー」があります。
しかし、「Front Page」は使い易いが、タグを勝手に書き換えられてしまい、標準HTMLに準拠していないIEのソースになります(Microsoftだから当たり前か?)。「ホームページ・ビルダー」は初心者でも操作が容易で、ソースも標準HTMLに準拠しているのですが、操作性が悪く重いです。
取り敢えず、「ホームページ・ビルダー」で作成して、タグ挿入型のエディタで修正や最終編集をするのが良いのかも知れません。ある程度書けるようになったら、タグ挿入型HTMLエディタのみで作成する方が軽快で容易です。
HTMLエディタでお勧めは、「TTTEditor」で、タグや属性を色分けし、リンクチェックやページ表示時間測定が便利です。また、「ez-HTML」は、高機能で正確なソース生成、CSS対応、FTP機能ありと最もお勧めですが、初心者が扱うには少々難しいかも知れません。

新しくウェブサイトを作るのなら、自分の持っている情報を発信するようにしましょう。優れたサイトの内容を真似するのでは、所詮そのサイトを越えることが出来ませんし、非難されるのが落ちで、恥でもあります。もし、情報を共有したければ、リンクの依頼をして相互協力を申し出ましょう。

なお、インターネット協会 のサイトにインターネットを利用する方のためのルール&マナー集がありますので、参考にして下さい。


(c) J. Shinshi

戻る | ホーム