初出: かふしゐきにて作成
更新: 2008-09-11T01:06:00+09:00
かふし / 澤田亮太 (電子メールを送信)

W3Cの文書の翻訳/HTML 4.01 Specification

第7章 The global structure of an HTML document

7.5 The document body

7.5.4 Grouping elements: the DIV and SPAN elements

DIVおよびSPAN要素は、idおよびclass属性ととともに、文書に構造を追加する一般的な仕組を提供します。これらの要素は、中身がインライン(SPAN)あるいはブロックレヴェル(DIV)である事を示しますが、その中身がそれ以外の表現上の意味を持つ事はありません。ですから、制作者はこれらの要素をスタイルシートやlang属性と一緒に使う事で、はじめてお望みの通りに、あるいは好きな通りに、HTMLを仕立てる事ができます。

例えば、顧客情報のデータベースに基いたHTML文書を生成したいとしましょう。HTMLには「顧客」「電話番号」「E-メールアドレス」のようなオブジェクトを特定する要素が含まれませんから、DIVとSPAN要素を使ってお望みの構造的・視覚的効果を得る事になります。

以下のようにTABLE要素を使って情報を構造化してもよいでしょう。

<!-- Example of data from the client database: -->

<!-- Name: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org -->

<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Boyera</TR>

<TR><TH>First name:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>

</TABLE>
</DIV>

<DIV id="client-lafon" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Lafon</TR>

<TR><TH>First name:<TD>Yves</TR>
<TR><TH>Tel:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>

</TABLE>
</DIV>

(以下略)

7.5.5 Headings: The H1, H2, H3, H4, H5, H6 elements

見出し要素は、引続き現われるセクションのトピックを短く言い表します。見出しの情報は、ユーザエージェントに利用されて、例えば、文書の目次を自動的に生成するのに使われたりするでしょう。

HTMLには、一番重要な見出しとしてのH1から一番重要でない見出しとしてのH6まで、6段階の見出しがあります。視覚系ブラウザは通常、より重要な見出しをより重要でない見出しよりも大きなフォントで表示します。

以下の例に、どうやってDIV要素を使って見出しをその後の文書のセクションと関係づけるか、を示します。こうすればスタイルシートでセクションのスタイルを定義する(背景に色を附けたり、フォントをセットしたりする)事が出来ます。

<DIV class="section" id="forest-elephants" >
<H1>Forest elephants</H1>
<P>In this section, we discuss the lesser known forest elephants.

...this section continues...
<DIV class="subsection" id="forest-habitat" >
<H2>Habitat</H2>
<P>Forest elephants do not live in trees but among them.
...this subsection continues...
</DIV>
</DIV>

This structure may be decorated with style information such as:

<HEAD>
<TITLE>... document title ...</TITLE>
<STYLE type="text/css">
DIV.section { text-align: justify; font-size: 12pt}
DIV.subsection { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
</STYLE>
</HEAD>

番号の附いたセクションと参照について
HTML自身、見出しからセクション番号を生成する事はありません。とはいえ、その種の機能はユーザエージェントが提供する事でしょう。近いうちに、CSSのようなスタイルシート言語によって、制作者はセクション番号の制御をできるようになります。(印刷された文書だと、「セクション7.2を見よ」のように手軽に参照させられますね)
見出しレヴェルを飛ばすのは悪しき慣習であると考える人もいます。そういった人は、H1 H2 H1なら認めても、H1 H3 H1だと見出しレヴェルH2が飛ばされているからといって認めません。

第9章 Text

9.3 Lines and Paragraphs

9.3.1 Paragraphs: the P element[#note01]

P要素はパラグラフを表します。ブロックレヴェル要素を(P自身も)含む事ができません。

私達は制作者が空のP要素を使うのをやめさせます。ユーザエージェントは空のP要素を無視すべし。

P要素はパラグラフを表します。ブロックレヴェル要素を(P自身も)中に持っている事ができません。

9.3.2 ラインブレークの制御

ラインブレークはキャリッジリターン、ラインフィード、あるいは、キャリッジリターンとラインフィードのペアである事と定義されます。全てのラインブレークはホワイトスペースになります。

BR要素はテキストの現在の行を強制的に中断(終了)します。

視覚系ユーザエージェント向けに、BR要素に続くマーク附けが、左あるいは右マージンにフロートしている画像やその他のオブジェクトの周囲を回り込むかどうか、その種のオブジェクトの下から始まるかどうか、を決定するため、clear属性を使えます。詳しくは「配置とフローティングオブジェクト」のセクションにて説明します。フロートしている画像とオブジェクトの周囲におけるテキストの回り込みを制御するには、制作者はスタイルシートを使って下さい。

双方向性の整形を顧慮すると、BR要素は[ISO10646]のLINE SEPARATORキャラクタが双方向性アルゴリズムでする振舞いと同様の振舞いをすべきです。

ラインブレークの禁止

時として、制作者はラインブレークが二語の間に出現するのを阻止したいと思うかもしれません。&nbsp;エンティティは空白として振舞いますが、そこでユーザエージェントはラインブレークを生じません。

9.3.4 Preformatted text: The PRE element

<!ENTITY % pre.exclusion "IMG|OBJECT|BIG|SMALL|SUB|SUP">

<!ELEMENT PRE - - (%inline;)* -(%pre.exclusion;) -- preformatted text -->
<!ATTLIST PRE
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Start tag: required, End tag: required

Attribute definitions

width = number [CN]
Deprecated. This attribute provides a hint to visual user agents about the desired width of the formatted block. The user agent can use this information to select an appropriate font size or to indent the content appropriately. The desired width is expressed in number of characters. This attribute is not widely supported currently.

Attributes defined elsewhere

PRE要素は視覚系ユーザエージェントに、囲われているテキストが「既に整形されている」事を伝えます。既に整形されているテキストを扱う時、視覚系ユーザエージェントは:

非視覚系のユーザエージェントはPRE要素の中身にある余計なホワイトスペースを顧慮しなくても結構です。

ラインブレークに関するSGMLの仕様についての詳細は、appendixの「ラインブレークについてのメモ」を参照して下さい。

上記のDTDは、どの要素がPRE宣言の中に出現してはならないか、を示しています。これはHTML 3.2と同じで、一定の行間と列の配置を保持して、テキストが固定ピッチのフォントでレンダリングされるようにする意図があります。

The following example shows a preformatted verse from Shelly's poem To a Skylark:

<PRE>
       Higher still and higher
         From the earth thou springest
       Like a cloud of fire;
         The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
</PRE>

Here is how this is typically rendered:

       Higher still and higher
         From the earth thou springest
       Like a cloud of fire;
         The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.

水平タブ文字
水平タブ文字([ISO10646]と[ISO88591]における十進9)は通常、視覚系ユーザエージェントに、八文字ごとのタブストップに行の文字を位置揃えするのに必要な、少くともゼロでない数のスペースとして解釈されます。水平タブを既に整形されたテキストの中で使うのは、やめて下さい――と、そう私達が強く申しますのは、編集時にタブスペーシングを八字以外に設定するのはありがちな事で、文書の配置をおかしくする事につながるからです。

第10章 Lists

10.1 Introduction to lists[#note02]

HTMLは制作者に情報のリストを作る方法を幾つか提供します。どのリストも一つかそれ以上のリスト要素を含まなければなりません。リストは、

を含む事が出來ます。

例へば上記のリストは未整理のリストで、UL要素で生成されます。

<ul>
<li>未整理の情報
<li>整理された情報
<li>定義
</ul>

整理されたリストと云ふのは、OL要素で生成されるけれども、整理されてゐる事が強調されるべき情報を含む事が出來ます。例へばレシピで、

  1. 最初に小麦粉と砂糖を混ぜます。
  2. 玉子を泡立てて、それに混ぜた粉を入れます。
  3. 十分間良く掻き混ぜます。
  4. 一時間、三百度で燒き上げます。

定義リストは、DL要素で生成されますけれども、(ほかにもいろいろと應用の仕方は「ある」のですが)一般に「用語」と「定義」のペアが連なつて生成されます。何かの宣傳で、こんな風に定義リストを使ふかも知れません。

低コスト
今度の製品では從來の製品に比べてコストを劇的に削減いたしました。
使ひ易い
より使ひ易く製品を改良しました。
御子樣にも安全です
御子樣がこの製品のそばで一人で遊んでゐても大丈夫(但し保證ナシ)。

HTML内での明示:

<dl>
<dt>低コスト
<dd>今度の製品では從來の製品に比べてコストを劇的に削減いたしました。
<dt>使ひ易い
<dd>より使ひ易く製品を改良しました。
<dt>御子樣にも安全です
<dd>御子樣がこの製品のそばで一人で遊んでゐても大丈夫(但し保證ナシ)。
</dl>

リストはネスト出來ますし、異るタイプのリストでも組合せて使ふ事が出來ます。云々。

外部リンク

註釋

note01

問題点
「representの譯語」
「include/containの譯し分け」
「we」
「discourage A from B.」
「shouldの譯語」

note02

かふしゐきでの履歴

  1. 2006-03-26T22:52:05 Kahusi
  2. 2006-03-30T22:01:24 220.146.109.129 (平成十八年三月二十七日分の追加)
  3. 2006-03-30T22:38:51 Kahusi M
  4. 2006-03-31T00:00:52 125.2.27.49
  5. 2006-03-31T00:31:32 125.2.27.49 (問題点の追加)
  6. 2006-04-01T00:22:30 58.1.115.12 (平成十八年三月三十一日分の追加、他)
  7. 2006-04-01T00:25:37 58.1.115.12 (→問題点)
  8. 2006-04-01T00:27:55 58.1.115.12 (→Preformatted text: The PRE element)
  9. 2006-04-01T00:29:20 58.1.115.12 (→事の始り)
  10. 2006-04-14T01:02:34 Kahusi M (W3Cの文書の翻訳 を W3Cの文書の翻訳/HTML 4.01 Specification へ移動)
  11. 2006-04-14T01:34:43 Kahusi M
  12. 2006-10-24T00:32:57 Kahusi M
  13. 2006-10-24T00:33:26 Kahusi M
  14. 2007-01-11T07:10:39 Kahusi
  15. 2007-03-03T21:54:26 Kahusi (Wikify)
  16. 2007-03-03T22:00:07 Kahusi M
  17. 2007-12-13T00:34:38 Kahusi (13,265 バイト) (http://blogs.yahoo.co.jp/nozakitakehide/MYBLOG/yblog.html より転載)
  18. 2007-12-13T22:03:00 Kahusi (13,271 バイト) (→7.5.4 Grouping elements: the DIV and SPAN elements)