ASCII.jp HTML & CSS...「ASCII.jp HTML & CSSリファレンス」は、HTMLのタグやCSSのプロパティの定義、使い方を説明するリファレンスです。2006年1月に発行された

ASCII.jp

HTML & CSSリファレンス［PDF版］

アスキー・メディアワークス

http://reference.ascii.jp/

「ASCII.jp HTML & CSSリファレンス」について「ASCII.jp HTML & CSSリファレンス」は、HTMLのタグやCSSのプロパティの定義、使い方を説明するリファレンスです。2006年1月に発行された『超図解 HTML & CSSリファレンス』（エクスメディア刊）の著作権を法的な手続きを経て弊社が譲り受け、PDF版を作成いたしました。

なお、PDF版の内容は元の書籍のままです。また、HTML 3.2、HTML 4.01のタグについては執筆時の記述であり、現時点では適切でない場合があります。内容に関するお問い合わせについて、

アスキー・メディアワークスはお答えできません。

htmlheadbodytitlemetahndiv

span

HTMLリファレンス

文書構造

第1章

2

ルート要素

HTMLドキュメントであることを示す役割・機能

htmlWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

書式

■head（P.3） ■body（P.4）参照項目

記述例

HTML＆CSSリファレンス

HTMLドキュメントです。

属性概要指定可能な値version バージョンを指定する任意の文字列

文書構造

表示・配置

リスト・表・フレーム

リンク・画像・フォーム

テキスト・罫線の設定

背景の設定

配置の指定

リスト・表の設定

表示例

HTMLドキュメントであることを宣言します。version属性でHTMLの

バージョンを定義することができますが、バージョン情報は文書の先頭

で定義する文書型宣言（DTD）に含まれるため、W3Cでは推奨されて

いません。

解説

タグの中で共通属性lang（P.143）を使って、言語コードを指定しておけば、その文書全体の基本言語を設定することができます。同時に、dir属性でテキスト表記の方向も指定できます。

Note

～

3

html要素の子要素

ドキュメントのヘッダ情報を記述する役割・機能

headWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

書式

記述例


ヘッダ情報を記述します。

属性概要指定可能な値

profile メタ情報のプロファイルを URI指定する

文書構造

表示・配置




背景の設定

配置の指定


表示例

タイトルやドキュメントの概要、キーワードなどのヘッダ情報を記述しま

す。～の中に直接テキストは表記せず、、

タグを使います。

解説

profile属性で使用するプロファイルは、タグでメタ情報を記述する際、その解釈に使われます。

Note

■ body（P.4） ■ title（P.5） ■ meta（P.6） ■ script（P.34）

参照項目

～

4


ドキュメントの本文を記述する役割・機能

bodyWin ･･･5.5/06Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

書式

■html（P.2） ■head（P.3） ■frameset（P.53）参照項目

記述例


ドキュメントの中身を記述します。


text 基本の文字色を指定するカラーネーム、カラーコード

link 未訪問のリンクの文字色カラーネーム、を指定するカラーコード

vlink アクセス済みのリンクのカラーネーム、文字色を指定するカラーコード

alink リンクをクリックしたときのカラーネーム、文字色を指定するカラーコード

background 背景画像を指定する URI

bgcolor 背景色を指定するカラーネーム、カラーコード

文書構造

表示・配置




背景の設定

配置の指定


表示例

HTMLドキュメントの本体を～の中に記述します。

タグの中で文字色や背景色を指定することもできますが、

HTML4.01の仕様では非推奨です。

解説

～

5

head要素の子要素

ページのタイトルを記述する役割・機能

titleWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

～書式

■head（P.3） ■meta（P.6） ■script（P.34）参照項目

記述例


タイトルを指定します。

文書構造

表示・配置




背景の設定

配置の指定


表示例

ページのタイトルを指定します。必ず、～の中に記述

します。ここで指定したタイトルは、ブラウザのタイトルバーやステータ

スバーに表示される他、お気に入りやブックマークに登録される際の名

前になり、ページの重要な要素となります。タイトルを指定しない場合、

ブラウザのタイトルバーにはファイル名が表示されます。

解説

検索エンジンに登録してもらいたい内容を指定する場合、通常はタグが重視されます。しかし、キーワードがヒットして検索結果の表示ページで見出しとなるのはタイトルです。アクセスされるかどうかタイトルで決まる、非常に重要な要素です。

Note

6


ドキュメントの情報を記述する役割・機能

metaWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

書式

■head（P.3） ■title（P.5） ■script（P.34）参照項目

記述例


文字コードを「shift_jis」に指定します。


http-equiv HTTP通信に使用するプロパティ名

name プロパティの名前を指定するプロパティ名

content プロパティの値を指定するプロパティの値

文書構造

表示・配置




背景の設定

配置の指定


終了タグはなく、また属性の設定は、http-equiv属性、name属性で指

定したプロパティに対する値をcontent属性で指定するという形をと

ります。記述例の他、キーワードや検索エンジンのロボット用の設定フ

ァイルなどを指定することができます。

たとえば、以下の２行の記述で

・検索ロボットにページのクロールを許可

・ヒットさせたいキーワードは「HTML」「リファレンス」「CSS」

ということを指定しておくことができます。

解説

7

ブロック要素

見出しを記述する役割・機能

hnWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

書式

■div（P.8） ■span（P.9） ■p（P.12）参照項目

記述例見出しレベル1見出しレベル2見出しレベル3


align 配置を指定する left：左寄せcenter：センタリングright：右寄せjustify：均等割り

文書構造

表示・配置




背景の設定

配置の指定


表示例

h1～h6で、見出しレベル1～6を示します。ブラウザによって解釈され、

自動的にレベル付けされて表示されます。

解説

共通属性style（P.143）を使って、CSSによるスタイル設定を記述することができます。スタイル設定の書式は、"CSSプロパティ:値"です。

Note

～

8

ブロック要素

ブロック要素であることを示す役割・機能

divWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

書式

■span（P.9） ■hn（P.7） ■p（P.12）参照項目

記述例

この部分を1つのブロック要素とし、テキストを右寄せに

します。



文書構造

表示・配置




背景の設定

配置の指定


表示例

～で括った部分を1つのブロック要素とします。それに

より、ひとかたまりの領域として、位置やスタイル設定を適用させるこ

とができます。

解説

共通属性style（P.143）を使って、CSSによるスタイル設定を記述することができます。スタイル設定の書式は、「CSSプロパティ:値」です。

Note

～

9

インライン要素

インライン要素であることを示す役割・機能

spanWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

書式

■body（P.4） ■title（P.5）参照項目

記述例文章中の一部に背景色を指定することができます。

文書構造

表示・配置




背景の設定

配置の指定


表示例

～で括った部分を1つのインライン要素とします。

と違い、文章の一部として扱われるため、前後に改行は入り

ません。

解説


Note

～

pbrem

strongblockquote

qdelinspresupsubbi

bigsmallttsu

basefontfonthr

centerscript

noscriptstyle

marqueeblinknobr


表示・配置

第2章

～書式

12

インライン要素・ブロック要素

段落を記述する役割・機能

pWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

書式

記述例


1つの段落を示します。

段落の後は改行されます。

文書構造

表示・配置




背景の設定

配置の指定


段落を示します。通常、段落の後は改行されます。また共通属性title

（P.142）で、その段落に対しコメントを付けることができます。

解説



表示例

■body（P.4） ■hn（P.7） ■div（P.8） ■br（P.13）参照項目

～


Note

～書式

13


強制改行する役割・機能

brWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

書式

記述例


文章中において、
改行する
位置
を示します。

文書構造

表示・配置




背景の設定

配置の指定



clear 回り込みを指定する none：回り込みなしleft：左要素への回り込みなしright：右要素への回り込みなしall：回り込みなし

表示例

テキストや画像などの改行位置を指定します。回り込みの有無につい

てはCSSでの指定が推奨されているため、clear属性は非推奨です。

解説

■float（P.125） ■clear（P.126）参照項目

～書式

14


強調する役割・機能

emWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

～

■strong（P.12）参照項目

記述例


文章中において強調する部分を示します。

文書構造

表示・配置




背景の設定

配置の指定


表示例

文章中で強調する部分であることを示します。その表示方法はブラウ

ザにより異なりますが、多くはイタリック体（斜体）で表示されます。

解説

テキストの構造的な意味を示すもので、斜体にすることが目的ではありません。その他、同じように構造的な意味を示すものには、cite（引用あるいは参照）、dfn（定義）、code（コード文）、samp（プログラムの出力例）、kbd（ユーザーが入力するもの）、var（変数あるいは引数）、abbr（省略形）、acronym（頭文字）があります。

Note

～書式

15


より強く強調する役割・機能

strongWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■em（P.14）参照項目

記述例


文章中においてより強調する部分を示します。

文書構造

表示・配置




背景の設定

配置の指定


～

表示例

文章中で、よりもさらに強調する部分であることを示します。そ

の表示はブラウザにより異なりますが、多くは太字で表示されます。

解説

emと同様テキストの構造的な意味を示すもので、太字にすることが目的ではありません。その他、同じように構造的な意味を示すものには、cite（引用あるいは参照）、dfn（定義）、code（コード文）、samp（プログラムの出力例）、kbd（ユーザーが入力するもの）、var（変数あるいは引数）、abbr（省略形）、acronym（頭文字）があります。

Note

～書式

16

ブロック要素

引用文を示す役割・機能

blockquoteWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■q（P.17）参照項目

記述例

今日の予報です。北陸地方や関東甲信地方北部を中心に、日本海側の地域では24日朝にかけて再び大雪となる見込みです。12月に入ってから各地で記録的な積雪となっているため、大雪やなだれに警戒が必要です。関東の人も注意しましょう。


cite※ 引用元を示す URI※IE、Opera、Safari未対応

文書構造

表示・配置




背景の設定

配置の指定


表示例

引用文であることを示し、インデント表示され、前後に改行が入ります。

cite属性で引用元を埋め込むことができますが、IE、Opera、Safariは

対応していません。Netscape7は対応しており、プロパティとして引

用先情報を表示することができます。

解説

共通属性style（P.143）を使って、CSSによるスタイル設定を記述し、表示をカスタマイズすることも可能です。

Note

～

～書式

17


引用部分を示す役割・機能

qWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■blockquote（P.16）参照項目

記述例

気象庁によると、北陸地方や関東甲信地方北部を中心に、日本海側の地域では24日朝にかけて再び大雪となる見込みです。12月に入ってから各地で記録的な積雪となっているため、大雪やなだれに警戒が必要とのことなので、関東の人も注意しましょう。

文書構造

表示・配置




背景の設定

配置の指定



cite※ 引用元を示す URI※Opera、Safari未対応

表示例

引用部分であることを示し、前後に引用符が入ります。IEは未対応です。

cite属性で引用元を埋め込むことができますが、Opera、Safariは対

応していません。Netscape7は対応しており、プロパティとして引用

先情報を表示することができます。

解説

共通属性style（P.143）を使って、CSSによるスタイル設定を記述し、表示をカスタマイズすることも可能です。

Note

～

18

ブロック要素・インライン要素

削除箇所であることを示す役割・機能

delWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■ins（P.19）参照項目

文書構造

表示・配置




背景の設定

配置の指定


書式


cite※ 引用元を示す URI

datetime※ 変更日時を示す日時※IE、Opera、Safari未対応

記述例


表示例

削除箇所を示し、取り消し線で表示されます。cite属性、datetime属

性はIE、Opera、Safariでは未対応です。Netscape7は双方に対応し

ており、プロパティとして引用先情報・変更日時情報を表示することが

できます。

解説

cite属性、datetime属性はIE、Operaなどで未対応です。共通属性title（P.142）を使って、引用元、変更日時などの情報を埋め込むことで、多くのブラウザで表示することができます。

Note

～

19

インライン要素・ブロック要素

挿入された箇所であることを示す役割・機能

insWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■del（P.18）参照項目

文書構造

表示・配置




背景の設定

配置の指定


書式


cite※ 引用元を示す URI

datetime※ 変更日時を示す日時※IE、Opera、Safari未対応

記述例


表示例

挿入箇所を示し、下線で表示されます。cite属性、datetime属性はIE、

Opera、Safariでは未対応です。Netscape7では双方に対応してお

り、プロパティとして引用先情報・変更日時情報を表示することができ

ます。

解説

cite属性、datetime属性はIE、Operaなどで未対応です。共通属性title（P.142）を使って、引用元、変更日時などの情報を埋め込むことで、多くのブラウザで表示することができます。

Note

～

20

ブロック要素

整形済みテキストとして表示する役割・機能

preWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■sup（P.21） ■sub（P.22）参照項目

記述例

┌─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┐│Ｈ│ａ│ｐ│ｐ│ｙ│　│Ｂ│ｉ│ｒ│ｔ│ｈ│ｄ│ａ│ｙ│└─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┘


width 表示幅を示す文字数（整数値）

文書構造

表示・配置




背景の設定

配置の指定


書式

～で括った範囲を整形済みテキストとして、空白や改行

などをそのまま表示します。ブラウザでの表示には等幅のフォントが使

用されます。

解説

～

表示例

21


上付き文字で表示する役割・機能

supWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■pre（P.20） ■sub（P.22）参照項目

記述例

102=100

1002=10000

文書構造

表示・配置




背景の設定

配置の指定


書式

解説～で括った範囲を上付きで表示します。

～

表示例

共通属性style（P.143）を使って、上付き文字のスタイルをカスタマイズすることができます。たとえば、次のように記述します。

Note

共通属性style（P.143）を使って、下付き文字のスタイルをカスタマイズすることができます。たとえば、次のように記述します。

Note

22


下付き文字で表示する役割・機能

subWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■pre（P.20） ■sup（P.22）参照項目

記述例

水の元素記号はH2Oです。

文書構造

表示・配置




背景の設定

配置の指定


～書式

～で括った範囲を上付きで表示します。解説

表示例

23


太字で表示する役割・機能

bWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■i（P.24） ■big（P.25） ■small（P.26）参照項目

記述例

今日は私の誕生日です！

文書構造

表示・配置




背景の設定

配置の指定


～書式

表示例

～で括った範囲を太字で表示します。解説

共通属性style（P.143）を使って、太字のスタイルをカスタマイズすることができます。たとえば、次のように記述します。

Note

24


斜体で表示する役割・機能

iWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■b（P.23） ■big（P.25） ■small（P.26）参照項目

記述例

子ブタのことをpiglet（ピグレット）といいます。だから、くまのプーさんのお友だちはピグレットなんですよ。

文書構造

表示・配置




背景の設定

配置の指定


～書式

表示例

～で括った範囲を斜体で表示します。解説

共通属性style（P.143）を使って、斜体文字のスタイルをカスタマイズすることができます。たとえば、次のように記述します。

Note

25


1つ大きいサイズで表示する役割・機能

bigWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■b（P.23） ■i（P.24） ■small（P.26）参照項目

記述例

子ブタのことをpiglet（ピグレット）といいます。だから、くまのプーさんのお友だちはピグレットなんですよ。また、鷲の子どもはeaglet（イーグレット）です。

文書構造

表示・配置




背景の設定

配置の指定


～書式

表示例

～で括った範囲を、一段階大きいサイズで表示します。解説

共通属性style（P.143）を使って、文字のスタイルをカスタマイズすることができます。たとえば、次のように記述します。

Note

26


1つ小さいサイズで表示する役割・機能

smallWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■b（P.23） ■i（P.24） ■big（P.25）参照項目

記述例

子ブタのことをpiglet（ピグレット）といいます。だから、くまのプーさんのお友だちはピグレットなんですよ。…と、トロイ先生に聞きました。

文書構造

表示・配置




背景の設定

配置の指定


～書式

～で括った範囲を、他の部分より一段階小さいサイ

ズで表示します。

解説

共通属性style（P.143）を使って、文字のスタイルをカスタマイズすることができます。たとえば、次のように記述します。

Note

表示例

27


等幅のフォントで表示する役割・機能

ttWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■pre（P.20） ■s（P.28） ■u（P.29）参照項目

記述例

この指定は、次の3行と同じ効果になります。

background-color: #ffffcc;
background-image: url(http://***);
background-attachment: fixed;

文書構造

表示・配置




背景の設定

配置の指定


～書式

～で括った範囲を等幅フォントで表示します。共通属性

style（P.143）を使って、表示に使用する等幅フォントの詳細を指定

することができます。

解説

での表示とは異なり改行コードは無視されてしまいますから、必要な場所に
を入れる必要があります。

Note

表示例

28


取り消し線を表示する役割・機能

sWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■del（P.18） ■tt（P.27） ■u（P.29）参照項目

記述例


文書構造

表示・配置




背景の設定

配置の指定


～書式

表示例

～で括った範囲に取り消し線を引きます。同じように、取り消

し線を表示するものとしてがあります。

解説

、ともHTML4.01の仕様では非推奨で、を使うことが推奨されています。

Note

29


下線を表示する役割・機能

uWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■ins（P.19） ■tt（P.27） ■s（P.28）参照項目

記述例


文書構造

表示・配置




背景の設定

配置の指定


～書式

表示例

～で括った範囲に下線を引きます。解説

はHTML4.01の仕様では非推奨で、を使うことが推奨されています。

Note

30


基本のフォントを指定する役割・機能

basefontWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■font（P.31）参照項目

記述例



size フォントサイズを指定する整数値（1～7）、＋－を付けた相対値

color テキストの色を指定するカラーネーム、カラーコード

face 基本のフォントを指定するフォント名

文書構造

表示・配置




背景の設定

配置の指定


書式

表示例

フォントのサイズ、色、種類を指定します。size属性の値は7段階の整数

値で実数値ではありません。＋－を付けた相対値で表すこともできます

が、この場合も1～7の範囲内です。

解説

HTML4.01の仕様ではは非推奨で、CSSによる指定が推奨されています。

→

Note

31


フォントを指定する役割・機能

fontWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■basefont（P.31）参照項目

記述例



size フォントサイズを指定する整数値（1～7）、＋－を付けた相対値

color テキストの色を指定するカラーネーム、カラーコード

face 基本のフォントを指定するフォント名

文書構造

表示・配置




背景の設定

配置の指定


書式

部分的に使用するフォントのサイズ、色、種類を指定します。サイズの指

定を相対値で行う場合、の指定をもとにします。

解説

HTML4.01の仕様ではは非推奨で、CSSによる指定が推奨されています。

→

Note

～

表示例

align 配置を指定する left：左寄せcenter：センタリングright：右寄せ

noshade 影なしで表示する

size 太さを指定するピクセル

width 長さを指定するピクセル、パーセント

color ※ 色を指定するカラーネーム、カラーコード

※Netscape、Operaで非対応

32

ブロック要素

罫線を引く役割・機能

hrWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

文書構造

表示・配置




背景の設定

配置の指定


書式

記述例子ブタのことをpiglet（ピグレット）といいます。だから、くまのプーさんのお友だちはピグレットなんですよ。

罫線を表示します。デフォルトでは影付きの表示ですが、noshade属

性を指定することで影なしの表示にすることができます。noshade属

性は値を持たず、属性名を指定するだけです。また、終了タグはなく、

の前後で改行されます。Netscape、Operaは、color属性に対応

していません。

解説


表示例

33

ブロック要素

センタリングする役割・機能

centerWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■div（P.8）参照項目

記述例


文書構造

表示・配置




背景の設定

配置の指定


～書式

表示例

テキストや画像、罫線など～で括った中身をセン

タリングして配置します。

解説

HTML4.01の仕様ではでの配置指定が推奨されており、は非推奨です。

Note

34


スクリプトを埋め込む役割・機能

scriptWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■noscript（P.35） ■iframe（P.58）参照項目

記述例


type スクリプト言語の種類を MIMEタイプ指定する

language スクリプト言語を指定する文字列

src 外部ファイルを指定する URI

charset※ 文字コードを指定する文字コード※IEでは未対応

文書構造

表示・配置




背景の設定

配置の指定


書式

表示例

HTMLドキュメントにJavaScriptなどのスクリプトを埋め込みます。

は、～あるいは～の中

に記述します。

解説

外部ファイルを使用せずページ中に記述する場合は、スクリプトの中身がテキストとして表示されないように、でコメント扱いにします。

Note

～

35


スクリプト非対応時の代替を記述する役割・機能

noscriptWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■script（P.34）参照項目

記述例

あなたの環境ではスクリプトが実行されていません。

文書構造

表示・配置




背景の設定

配置の指定


～書式

表示例

HTMLドキュメントにJavaScriptなどのスクリプトを埋め込むときに、

スクリプトに対応していない場合（未対応あるいはスクリプトを実行し

ない設定にしている場合）の代替コメントを記述します。スクリプトの

実行に対応している環境ではは無視されます。

解説

36


スタイルシートの設定をに記述する役割・機能

styleWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■head（P.3）参照項目

記述例 HTML＆CSSリファレンス

見出しは赤

本文フォントは茶色に表示されます。


type スタイルシートの種類を MIMEタイプ指定する

文書構造

表示・配置




背景の設定

配置の指定


書式

表示例

スタイルシートのスタイル設定を～内に記述します。

テキストで表示されないようにでコメント扱いし、「セレクタ

{CSSプロパティ:値}」として指定します。

解説

～

37

インライン要素、ブロック要素

テキストをスクロール表示する役割・機能

marqueeWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

記述例最新ニュース　最新ニュース　最新ニュース　最新ニュース

文書構造

表示・配置




背景の設定

配置の指定


書式


direction スクロールの方向 left：左right：右

loop スクロールの回数整数値

behavior スクロールの動き scroll：一方向で繰り返すalternate：左右に往復slide：一回

height スクロール範囲の高さピクセル、パーセント

width スクロール範囲の幅ピクセル、パーセント

bgcolor 背景色カラーネーム、カラーコード

hspace 左右の余白ピクセル

vspace 上下の余白ピクセル

scrolldelay 再描画までの間隔ミリ秒

scrollamount再描画までの移動距離ピクセル

表示例

ブラウザの独自拡張機能で、HTML4.01の仕様ではありません。もと

もとはIEの独自のものでしたが、現在ではNetscapeもOperaも対応

しています。

解説

～

ブラウザ独自拡張

38


テキストを点滅表示する役割・機能

blinkWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■text-decoration（P.89）参照項目

記述例最新ニュース　最新ニュース　最新ニュース　最新ニュース

文書構造

表示・配置




背景の設定

配置の指定


～書式

表示例

ブラウザの独自拡張機能で、HTML4.01の仕様ではありません。もと

もとはNetscapeの独自のもので、Operaは対応していますが、IE、

Safariともに対応していません。

解説

テキストの点滅表示は、CSSのtext-decorationプロパティで同等の効果を得ることができます。

Note


39


自動改行を禁止する役割・機能

nobrWin ･････5.5/6Mac ･････････5Win･･････････5Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

■white-space（P.92）参照項目

記述例

どんなに長くてウィンドウ幅に収まらなくても改行は絶対にしません！

文書構造

表示・配置




背景の設定

配置の指定


～書式

表示例

通常ブラウザの幅におさまらない場合、折り返して表示されますが、そ

の自動改行を禁止します。ブラウザの独自拡張機能で、HTML4.01の

仕様ではありません。もともとはNetscapeの独自のものですが、現在

では、IE、Operaとも対応しています。

解説

自動改行の禁止は、CSSのwhite-spaceプロパティで同等の効果を得ることができます。

Note


ulolli

tabletrthtd

framesetframe

noframesiframe



第3章

42

ブロック要素

リストを作成する役割・機能

ulWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

～属性＝"値"書式

記述例

材料は以下のとおりです。

鶏もも肉きゅうりしいたけ春雨


type リストマークを指定する disc：●circle：○square：■、□

文書構造

表示・配置




背景の設定

配置の指定


書式

表示例

は順不同のリストを作成します。各リストの項目はで記述しま

す。type属性で、リストマークのスタイルを設定することができます。

解説

～

■ol（P.43） ■li（P.44）参照項目

～書式

43

ブロック要素

番号付きのリストを作成する役割・機能

olWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

書式

記述例

ルールは簡単です。

カードは52枚使用し、等分に配る順番に手札からカードを出していく場のカードより強い札を出す同じ数であれば、ツーペア、スリーペア、フォーペアで出すことができる手札が早くなくなった人から勝ち抜け

文書構造

表示・配置




背景の設定

配置の指定


表示例

は番号付きリストを作成します。各リストの項目はで記述しま

す。type属性で番号付けの数値タイプを、start属性で開始の番号を

指定することができます。

解説

■ul（P.42） ■li（P.44）参照項目

～


type リストの数値タイプ 1：数字を指定する a：小文字アルファベット

A：大文字アルファベットi：小文字ローマ数字I：大文字ローマ数字

44

ul、ol要素の子要素

リストの項目を記述する役割・機能

liWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

文書構造

表示・配置




背景の設定

配置の指定

リスト・表の設定参照項目

書式

記述例

記述例

記述例、で共通に使用し、リストの中身（項目）を記述します。type

属性を使って、項目ごとにリストマークを変えることもできます。

好きなもの／嫌いなもの

ライゾウブタ睡眠徹夜菊地成孔


type リストマークを指定する ul、ol要素のtype属性値value リスト項目の番号番号

■ul（P.42） ■ol（P.43）

～

summary 表の目的などの要約を文字列記述する

align 配置を指定する left：左寄せcenter：センタリングright：右寄せ

width 幅を指定するピクセル、パーセント


background※ 背景画像を指定する URI

border 外枠の太さピクセル

bordercolor※ 外枠の色カラーネーム、カラーコード

cellspacing 外枠と表のセルの間隔ピクセル

cellpadding セル枠と中身の余白ピクセル※ブラウザの独自拡張機能

45

ブロック要素

表を作成する役割・機能

tableWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

記述例タイトル発売日種類

MUSICAL FROM CHAOS2000.6.25DVD

DCPRG & ROVO PAN-AMERICAN BEEF STAKE ART FEDERATION'S /SINO2001.7.10Single

REPORT FROM IRON MOUNTAIN2001.8.10Album


文書構造

表示・配置




背景の設定

配置の指定


書式～

46

文書構造

表示・配置




背景の設定

配置の指定


表示例

では、表全体の設定をします。align属性の配置位置は、width

属性を指定したときに適用されます（width属性で幅を指定しない場

合、ブラウザのウィンドウ幅に合わせて表示されます）。また、border属

性を指定しない場合、デフォルトでは枠なしで表示されます。bgcolor

属性、background属性で背景を指定することができる他、共通属性

style（P.143）でデザインを詳細に指定することもできます。

解説

HTMLでは基本的に一段組で上から下に記述した内容が表示されますが、を活用することで、二段や三段などにすることができます。以下の画面は、を使ったレイアウト例です。

参照項目 ■tr（P.47） ■th（P.49） ■td（P.51）

Note

47

table要素の子要素

表の行を記述する役割・機能

trWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

記述例

タイトル発売日種類


DCPRG & ROVO PAN-AMERICAN BEEFSTAKE ART FEDERATION'S /SINO2001.7.10Single


文書構造

表示・配置




背景の設定

配置の指定


書式


align 行のセル内での横の left：左寄せ配置を指定する center：センタリング

right：右寄せ

valign 行のセル内での縦の top：上ぞろえ配置を指定する middle：中央

bottom：下ぞろえbaseline：ベース

ラインにそろえる


background※ 背景画像を指定する URI※ブラウザの独自拡張機能

～

48

文書構造

表示・配置




背景の設定

配置の指定


表示例

～で括った範囲を表の1行とします。行内の項目は、～

内に、～で項目を記述します。bgcolor属性で背景色

を、background属性で背景画像を指定することができます。この

での指定は、行単位で適用されます。

また、align属性でセル内での横の配置を、valign属性でセル内での縦

の配置を指定することができます。サンプルの記述例では、タ

グのalign属性でウィンドウ内での表の位置を指定し、タグのalign

属性でセル内でのテキストの配置を指定しています。

解説

参照項目 ■table（P.45） ■th（P.49） ■td（P.51）

49

tr要素の子要素

表の見出し項目を記述する役割・機能

thWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

記述例



DCPRG & ROVO PAN-AMERICAN BEEF

STAKE ART FEDERATION'S /SINO2001.7.10

文書構造

表示・配置




背景の設定

配置の指定


書式


rowspan 連結する縦の行数を整数値指定する

colspan 連結する横の列数を整数値指定する

nowrap セル内での自動改行を禁止する


height 高さを指定するピクセル、パーセント



right：右寄せ




～

50

文書構造

表示・配置




背景の設定

配置の指定


Single


表示例

表の見出し項目を記述します。～内に、～で見

出しに当たる項目を記述します。デフォルトで太字、セル内センタリン

グで表示されます。

また、セル内でのテキストの位置は、align、valign属性で指定すること

ができます。align属性でセル内での横の位置を、valign属性でセル内

での縦の位置を指定します。

解説

参照項目 ■table（P.45） ■tr（P.47） ■td（P.51）

51

tr要素の子要素

表の項目を記述する役割・機能

tdWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

文書構造

表示・配置




背景の設定

配置の指定


書式

記述例



DCPRG & ROVO PAN-AMERICAN BEEF STAKE ART FEDERATION'S

/SINO


rowspan 結合する縦の行数を整数値指定する

colspan 結合する横の列数を整数値指定する

nowrap セル内での自動改行を禁止する


height 高さを指定するピクセル、パーセント



right：右寄せ




～

52

文書構造

表示・配置




背景の設定

配置の指定


2001.7.10

REPORT FROM IRON MOUNTAIN

2001.8.10Album

表示例

表の項目を記述します。が見出し項目の扱いであるのに対し、

は行のひとつひとつの項目です。セルを結合するにはrowspan、

colspan属性を使います。rowspan属性で縦方向、colspan属性で横

方向にセルを結合することができます。

また、width、height属性で幅、高さを指定することができます。1つの

セルに対して高さを指定した場合、同じ行の他のセルも当然ながらそ

の高さに合わせた表示になります。ただし高さや幅の指定は、中身が指

定された数値よりもオーバーした場合、中身に合わせて拡張して表示

されます。

解説

参照項目 ■table（P.45） ■tr（P.47） ■th（P.49）

53


フレームを作成する役割・機能

framesetWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

文書構造

表示・配置




背景の設定

配置の指定


書式

記述例



rows 縦方向の割付を指定するピクセル、パーセント、相対長をコンマ区切りで並べるリスト

cols 横方向の割付を指定するピクセル、パーセント、相対長をコンマ区切りで並べるリスト

border※1 境界線の太さピクセル数

bordercolor※1 境界線の色カラーネーム、カラーコード

frameborder※1 境界線の表示の有無 1（yes）：境界線あり0（no）：境界線なし

framespacing※2 フレーム間の距離ピクセル数※1：IE、Netscapeの独自拡張機能※2：IEの独自拡張機能

フレームの割付を指定します。rows属性あるいはcols属性で分割す

るフレーム数、大きさを設定し、で個々のフレームに読み込む

HTMLファイルを指定します。

解説

html要素の子要素としての扱いになるため、タグを使用する場合はタグを使いません。

Note

～

参照項目 ■frame（P.54） ■noframes（P.57） ■iframe（P.58）

name フレームの名前文字列を指定する

src フレームに読み込む URIHTMLファイル

を指定する

noresize フレームウィンドウを固定する

scrolling スクロールの有無 auto：自動を指定する yes：つねにスクロールする

no：スクロールしない

frameborder※境界線を指定する 1：境界線あり0：境界線なし

marginwidth フレーム内の左右のピクセルマージンを指定する

marginheightフレーム内の上下のピクセルマージンを指定する

※IE、Netscape、Opera、Safari未対応

54

frameset要素の子要素

個々のフレームを示す役割・機能

frameWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

記述例ファイル名「index.html」


ファイル名「menu.html」

メニュー


文書構造

表示・配置




背景の設定

配置の指定


書式

55

文書構造

表示・配置




背景の設定

配置の指定


single

album

DVD

ファイル名「main.html」

single

single

DCPRG & ROVO PAN-AMERICAN BEEF STAKE ARTFEDERATION'S /SINO
2001.7.10リリース

DCPRG:Remix TIME
2002.12.27

DCPRG:Remix PRAVDA
2002.11.27 Release

表示例

56

文書構造

表示・配置




背景の設定

配置の指定


で個々のフレームの設定を行います。name属性でフレーム

の名前を指定し、src属性で読み込むHTMLファイルのURIを指定しま

す。終了タグはありません。

サンプルでは、index.htmlで縦2つにフレームを分割し、上のフレーム

にmenu.html、下のフレームにmain.htmlを読み込んでいます。

解説

タグのframeborder属性はHTML4.01の仕様ではあります

が、多くのブラウザでは、と指定しただけ

ではフレームの境界線を消すことはできません。そのため、主要ブラウ

ザではタグの属性としてframeborder属性を拡張してい

ます。以下の画面では、で罫線なし

の指定をしています。

Note

■frameset（P.53） ■noframes（P.57）■iframe（P.58）

参照項目

57

文書構造

表示・配置




背景の設定

配置の指定


frameset要素の子要素

フレーム非対応時の代替を記述する役割・機能

noframesWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

記述例


このページではフレームを使用しています。お使いのブラウザがフレームに対応していないため、表示されません。

～書式

表示例

フレーム非対応のブラウザでアクセスされた場合に表示する代替のテ

キストを記述します。～の中に本文とし

て、「フレームで表示しています」という意味のメッセージを書いておく

とよいでしょう。～内の最後に記述します。

解説

■frameset（P.53） ■frame（P.54）■iframe（P.58）

参照項目

58

文書構造

表示・配置




背景の設定

配置の指定



インラインフレームを読み込む役割・機能

iframeWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

書式


name フレームの名前を文字列指定する

src フレームに読み込む URIHTMLファイルを指定する

width フレームの幅を指定するピクセル、パーセント

height フレームの高さをピクセル、パーセント指定する

scrolling スクロールの有無を auto：自動指定する yes：（おさまっていても）

つねにスクロールするno：スクロールしない

frameborder 境界線を指定する 1：境界線あり0：境界線なし

marginwidth フレーム内の左右のピクセルマージンを指定する

marginheight フレーム内の上下のピクセルマージンを指定する

align 行のセル内での配置を left：左寄せ指定する center：センタリング

right：右寄せ

記述例

HTML&CSSリファレンス

DCPRG

～

59

文書構造

表示・配置




背景の設定

配置の指定


表示例

～で行内にフレームを読み込みます。name属

性でフレームの名前を指定し、src属性で読み込むHTMLファイルの

URIを指定します。

解説

フレーム非対応のブラウザに代替コメントを表示するには、～にテキストでコメントを記述します。

Note

■frameset（P.53） ■frame（P.54）■noframes（P.57）

参照項目

alinkimg

objectparamforminputbuttonselectoption

textarealabel

fieldset

第4章a

linkimg

objectparamforminputbuttonselectoption

textarealabel

fieldset



第4章

62


リンクを設定する役割・機能

aWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac ･･･････1.2

～属性＝"値"書式

記述例 contents

diary
archive
ballet
author


name リンク名を指定する文字列

href リンク先のファイル名を指定する URI

target リンク先のファイルを表示する _self：現在のウィンドウウィンドウを指定する _blank：新規ウィンドウ

_top：フレームを解除してウィンドウ全体

_parent：親フレーム

文書構造

表示・配置




背景の設定

配置の指定


書式

href属性でリンク先のURIを指定し、リンクを設定します。target属性

で、リンク先を表示するウィンドウを指定できます。

解説

表示例

name属性を使ってページ内の特定の場所にリンク名を付け、リンク名をリンク先に設定することができます。href属性でリンク名をリンク先に指定する場合は、頭に「#」を付けます。

Note

～

■link（P.63）参照項目

～書式

63


関連ファイルを指定する役割・機能

linkWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

書式

記述例ファイル名「index.html」ヘッダ部分

ファイル名「main.css」リンク表示のスタイル設定部分A:link { color : #1a4dcc ;

text-decoration : none }A:visited {color: #0080e6 ;

text-decoration: none }


href リンク先のファイル名を URI指定する

rel リンク先のファイルの役割リンクタイプを指定する

文書構造

表示・配置




背景の設定

配置の指定


スタイルシートで参照する外部ファイルは、タグを使って

～内に指定します。

解説

■a（P.62）参照項目

表示例

64


画像を埋め込む役割・機能

imgWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

記述例ライゾウ


src 画像ファイルを指定する URI

alt 画像の代替テキストを指定する文字列

align 位置を指定する top：上ぞろえright：右寄せbottom：下ぞろえleft：左寄せ

width 画像の幅を指定するピクセル、パーセント

height 画像の高さを指定するピクセル、パーセント

vspace 画像の上下の余白を指定するピクセル

hspace 画像の左右の余白を指定するピクセル

border 画像の外枠を指定するピクセル

文書構造

表示・配置




背景の設定

配置の指定


書式

表示例

src属性でファイルのURIを指定し、画像を表示します。width、height

属性で表示する画像の大きさを指定しておきます。

解説

参照項目 ■object（P.65）

65

インライン要素、ブロック要素

オブジェクトを読み込む役割・機能

objectWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

文書構造

表示・配置




背景の設定

配置の指定


書式

記述例

Flashサンプル


data 埋め込むファイルの場所を URI指定する

type ファイルのMIMEタイプを MIMEタイプ指定する

align 位置を指定する top：上ぞろえright：右寄せbottom：下ぞろえleft：左寄せ

width 画像の幅を指定するピクセル、パーセント

height 画像の高さを指定するピクセル、パーセント

表示例

ページに画像やムービー、サウンドなどテキスト以外のオブジェクトを

埋め込みます。設定情報はタグで記述します。

解説

～

参照項目 ■param（P.66）

object要素の子要素

パラメータをわたす役割・機能

paramWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

記述例

Flashサンプル


name パラメータ名を指定する文字列

value パラメータの値を指定する文字列

valuetype value属性値の型を指定する data：文字列ref：URIobject：識別子

type※ value属性値のMIMEタイプ data：文字列を指定する MIMEタイプ

※valuetype属性値が「ref」の場合に有効

書式

66

文書構造

表示・配置




背景の設定

配置の指定


表示例

で設定パラメータを記述します。それにより初期値を変える

ことができます。

解説

参照項目 ■object（P.65）

67

文書構造

表示・配置




背景の設定

配置の指定


ブロック要素

フォームを設定する役割・機能

formWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

書式


action フォームデータの送信先プログラム名プログラム名を指定する

method HTTPメソッドを指定する get / post

enctype※ データのMIMEタイプ MIMEタイプ

accept 使用可能な文字コードを文字コード-charset 指定する

accept 使用可能なMIMEタイプ MIMEタイプ

name フォームに名前を付ける文字列

※method属性値が「post」の場合に指定

記述例

コメントをお願いします。

入力フォームを作成します。はフォーム全体の設定で、ここで

データの送信先のプログラム名や送信データのMIMEタイプなどを指

定します。個々の入力フォームはで記述します。

解説

表示例

～

参照項目 ■input（P.68） ■button（P.70）


入力フォームを作成する役割・機能

inputWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

書式

68

文書構造

表示・配置




背景の設定

配置の指定



type フォームの種類を指定する text：テキストボックスpassword：パスワード入力

フォームcheckbox：チェックボックスradio：ラジオボタンsubmit：送信ボタンreset：リセットボタンfile：ファイル送信hidden：隠れフォームimage：画像ボタンbutton：ボタン

name フォームに名前を付ける文字列

value 初期値、ボタンに表示する文字列ラベル

size※1 横幅（文字数）を指定するピクセル、整数値

maxlength 入力可能な最大文字数を整数値指定する

checked※2 初期値をチェックにする

src※3 画像ファイルの場所を URI指定する

accept 受け付け可能なMIME MIMEタイプタイプ

disabled 選択不可にする

※1：type属性値が「text」または「password」の場合は文字数※2：type属性値が「radio」または「checkbox」の場合に有効※3：type属性値が「image」の場合に使用

記述例

アンケートにご協力ください。
お名前

メールアドレス

～

69

文書構造

表示・配置




背景の設定

配置の指定


Q1：満足度を教えてください。

「このページは役に立った」
非常に不満
不満
普通
満足
大満足

ありがとうございました。

表示例

個々の入力フォームを作成します。テキストボックス、パスワード入力フ

ォーム、チェックボックス、ラジオボタン、送信ボタンなどフォームの種

類は10個です。

解説

参照項目 ■form（P.67） ■button（P.70）


ボタンを作成する役割・機能

buttonWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

書式

70

文書構造

表示・配置




背景の設定

配置の指定



name ボタンの名前を指定する文字列

value ボタンの初期値を指定文字列する

size※1 横幅（文字数）を指定するピクセル、整数値

maxlength 入力可能な最大文字数を整数値指定する

checked※2 初期値をチェックにする

src※3 画像ファイルの場所を URI指定する

disabled 選択不可にする※1：type属性値が「text」または「password」の場合は文字数※2：type属性値が「radio」または「checkbox」の場合に有効※3：type属性値が「image」の場合に使用

記述例送信

リセット

表示例

要素のtype値「button」と同等で、ボタンを作成します。

ではボタンに表示するラベルをvalue属性で指定しましたが、

では～の間に記述します。

解説

～

参照項目 ■form（P.67） ■input（P.68）

71

文書構造

表示・配置




背景の設定

配置の指定



選択メニューを作成する役割・機能

selectWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2


name メニューの名前（フィールド名）文字列を指定する

size フィールドの高さを指定する整数値（行数）

multiple 複数項目の選択を可にする


書式

記述例

好きなフルーツを選んでください。

バナナりんごなしいちごパイナップル

表示例

フォームで表示する選択メニューを作成します。size属性を指定する

と、リストボックスとして表示されます（size属性の指定がない場合は

プルダウンメニューとなります）。は選択メニュー全体の設定

で、個々のメニュー項目はで指定します。

解説

～

参照項目 ■form（P.67） ■option（P.72）

select要素の子要素

メニューの個々の選択肢を示す役割・機能

optionWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

記述例

好きなフルーツを選んでください。

バナナりんごなしいちごパイナップル


value 選択肢の初期値文字列

selected 選択された状態にする

disabled※ 選択不可にする※WindowsのIEは非対応

書式

72

文書構造

表示・配置




背景の設定

配置の指定


表示例

タグのselected属性を指定することで、その項目をデフォ

ルトで選択状態にして表示することができます。サンプルでは、「いち

ご」を選択状態にしています。

解説

～

参照項目 ■form（P.67） ■select（P.71）

73

文書構造

表示・配置




背景の設定

配置の指定



テキストボックスを作成する役割・機能

textareaWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･･6/7/8.5

Mac ･････････1

記述例

コメントをお願いします。


name テキストボックスの名前を文字列指定する

rows 縦幅を指定する整数値（行数）

cols 横幅を指定する整数値（行数）

wrap 自動改行を設定する off：改行なしhard：自動改行ありsoft：ユーザー改行の

み送信する


書式

表示例

複数行を入力するためのテキストボックスを作成します。rows属性で

行数を、cols属性で文字数を指定します。

解説

～

参照項目 ■form（P.67）


入力フォームとラベルを関連付ける役割・機能

labelWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

記述例


お名前



非常に不満

不満

普通

満足

大満足



for 入力フォームとラベルを入力フォームのid関連付ける

書式

74

文書構造

表示・配置




背景の設定

配置の指定


～

75

文書構造

表示・配置




背景の設定

配置の指定


記述例のように、関連付けする先の入力フォームのidをfor属性で指定する方法と、次のように～の中に入れてしまう方法とがあります。

非常に不満

ただし、タグを～の中に含めてしまう方法はWindowsのIEでは対応していません。

Note

参照項目 ■from（P.67） ■input（P.68）

表示例

入力フォームとラベルを関連付けます。ラジオボタンなど、ラベルと入

力フォームが関連付けられない場合に使用します。これにより、ラベル

部分をクリックしてもラジオボタンを選択できるようにすることができ

ます。入力フォームのidは、id属性で指定します（P.142）。必ず、ドキ

ュメント中で他と重ならないユニークな文字列とします。

解説

ブロック要素

入力フォームをグループ化する役割・機能

fieldsetWin ･････5.5/6Mac ･････････5Win･･････････7Mac ･････････7

Win ･････7/8.5

Mac･･･････1/2

記述例


お名前




非常に不満

不満

普通

満足

大満足


～書式

76

文書構造

表示・配置




背景の設定

配置の指定


77

文書構造

表示・配置




背景の設定

配置の指定


表示例

入力フォームをグループ化します

Documents

ASCII.jp HTML & CSS...「ASCII.jp HTML & CSSリファレンス」は、HTMLのタグやCSSのプロパティの 定義、使い方を説明するリファレンスです。2006年1月に発行された

ASCII.jp HTML & CSS...「ASCII.jp HTML & CSSリファレンス」は、HTMLのタグやCSSのプロパティの定義、使い方を説明するリファレンスです。2006年1月に発行された