HTML 4 の基本的な要素です。 ホームページ作成の参考にしてください。
(私が参考に使用する目的で作成しました。)
| Elements | Attributes | |
|---|---|---|
| <html> - </html> | 文書インスタンス | |
| <head> - </head> | 文書ヘッダ | |
| <body> - </body> | 文書本体 |
| Elements | Attributes | |
|---|---|---|
| <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">
| Elements | Attributes | |
|---|---|---|
| <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> | 文書作成者のアドレス |
| Elements | Attributes | |
|---|---|---|
| <dl> - </dl> | 定義リスト | |
| <dt> - </dt> | 定義項目 | |
| <dd> - </dd> | 定義データ | |
| <ol> - </ol> | 順序付きリスト | |
| <li> - </li> | リスト項目 | |
| <ul> - </ul> | 順序なしリスト | |
| <li> - </li> | リスト項目 |
| Elements | Attributes | |
|---|---|---|
| <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" | 複数行テキストフィールド |
| Elements | Attributes | |
|---|---|---|
| <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" | 表データセル |
| Elements | Attributes | |
|---|---|---|
| <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 属性は、必須です。
| Elements | Attributes | |
|---|---|---|
| <em> - </em> | 強調テキスト | |
| <strong> - </strong> | 強い強調 | |
| <cite> - </cite> | 引用 | |
| <code> - </code> | プログラムコード | |
| <kbd> - </kbd> | キーボード入力 | |
| <samp> - </samp> | 例の出力 | |
| <var> - </var> | 一般的変数 |
| Elements | Attributes | |
|---|---|---|
| <b> - </b> | 太字文字スタイル | |
| <i> - </i> | イタリック文字スタイル | |
| <big> - </big> | 大きなテキスト | |
| <small> - </small> | 小さなテキスト |
| ■ | White = "#FFFFFF" | ■ | Silver = "#C0C0C0" |
| ■ | Black = "#000000" | ■ | 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" |
| ■ | Orange = "#FFA500" (FF9900) | ■ | Gold = "#FFD700" |
| ■ | 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 以降で対応しているものです。
| Property | Value | |
|---|---|---|
| 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> | フォント・短縮形 |
| Property | Value | |
|---|---|---|
| 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> | 背景・短縮形 |
| Property | Value | |
|---|---|---|
| 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> | ベースライン間の距離 |
| Property | Value | |
|---|---|---|
| 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機能ありと最もお勧めですが、初心者が扱うには少々難しいかも知れません。新しくウェブサイトを作るのなら、自分の持っている情報を発信するようにしましょう。優れたサイトの内容を真似するのでは、所詮そのサイトを越えることが出来ませんし、非難されるのが落ちで、恥でもあります。もし、情報を共有したければ、リンクの依頼をして相互協力を申し出ましょう。
なお、インターネット協会 のサイトにインターネットを利用する方のためのルール&マナー集がありますので、参考にして下さい。