nextup previousindex
Next:5. スタイルシート Up:4. HTMLの骨格 Previous:4.9 リスト環境

4.10 ブロックテキスト

ブロックテキスト宣言には、addressblockquoteqpredivspanbdoinsdelがあります。

これらの宣言を使用すると、この環境内に定義されたテキストは、それぞれ独自の書式で表示されます。

ブロック・インライン要素イメージ

address [Strict] [Transitional]
<address attributes...>〜</address>は、その範囲をページ作成者に関する情報の表示と見なします。

通常、メールアドレスやURIなどの表記に使います。

多くのブラウザではイタリック体で表現します。

 atrributesには次のようなものが入ります。

abcdefg

<address>タグは、ドキュメント作成者の連絡先などを記述する場合に用いられるタグです。

一般的なブラウザでは前後に改行が入り、斜体で表示されます。

以下の詳細は99
class
dir
id
lang
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
title
blockquote [Strict] [Transitional]
<blockquote attributes...>〜</blockquote>は、その範囲が部分引用であることを宣言します。

多くのブラウザでは、ブロックの上下左右に空白をやや空けて表現します。

 lattributesには次のようなものが入ります。

<blockquote>タグとは、他のドキュメントから長いテキストを引用する場合に用いられるタグのことです。

一般的なブラウザでは上下には空白行が挿入され、左右にはインデントが適用されて表示されます。

短いテキストを引用する場合には<q>タグを使用します。

cite
 [Strict] [Transitional][省略可]cite="URI"は、引用の元ソースURIを指定します。

 
<blockquote cite = "***">とは、<blockquote>タグにcite属性を指定したもので、引用したテキストなどのソースを示すためのものです。

値には引用元のURLを指定します。

以下の詳細は99
class
dir
id
lang
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
title
q [Strict] [Transitional]
<q attributes...>〜</q>は、<blockquote>タグよりも短い引用に使います。

blockquoteタグと違うのは、引用した個所の前後に改行を入れないことです。

 attributesblockquoteタグと同じです。

<q>タグとは、他のドキュメントから短いテキストを引用する場合に用いられるタグのことです。

ブラウザにより表示が異なってしまいますが、HTMLやXHTMLの標準ではダブルクォーテーション(")で囲まれて表示するように定義されています。

いろいろな環境やブラウザで確認する必要があります。

また、長いテキストを引用する場合には<blockquote>タグを使用します。

<q cite = "***">とは、<q>タグにcite属性を指定したもので、引用したテキストなどのソースを示すためのものです。

値には引用元のURLを指定します。

pre [Strict] [Transitional]
<pre attributes...>〜</pre>は、その範囲内における改行、空白をそのまま適用して表現します。

プログラムソースなどの勝手に整形表示されては困るものを表示するときに使います。

タグや実体参照は反映されます。

多くのブラウザでは固定幅フォントで表現します。

 attributesには次のようなものが入ります。

タグは、その範囲のテキストを空白文字や改行などを含めて、ソースドキュメントに記述された通りに表示され、一般的なブラウザでは等幅フォントで表示されます。

このタグの範囲内であっても一部のタグを置き、機能させることが可能です。

そのため、(<)などの特殊文字を表示させたい場合は注意が必要です。

以下の詳細は99
class
dir
id
lang
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
title
width
 [Transitional][省略可]width="number"は、整形するときの横幅を設定します。
div [Strict] [Transitional]
<div attributes...>〜</div>は、その範囲のドキュメント構造をブロック単位で定義します。

 attributesには次のようなものが入ります。

<div>タグは、ドキュメントを分離して、個々のセクション(ディビジョン)に明確に分けるためのタグです。

特定の範囲を設定しドキュメントの構造化に役に立ちます。

主にスタイルシートを適用する範囲に用いられたり、センタリング、右寄せなどの範囲指定に使われています。

align
 [Transitional][省略可]位置を指定します。

align="Justification"で、次のような値を取ります。

 
<div align = "***">とは、<div>タグにalign属性を指定したもので、タグで囲まれた範囲の内容の位置を指定する場合に用いられます。

値には"left"(左揃え)、"center"(中央揃え)、"right"(右揃え)などを指定します。

  • left:左寄せします。
  • center:中寄せします。
  • right:右寄せします。
  • justify:左右のマージンを元に調整します。
以下の詳細は99
class
dir
id
lang
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
title
span [Strict] [Transitional]
<span attributes...>〜</span>は、その範囲のドキュメント構造をワード単位で定義します。

 attributesには次のようなものがあります。

<span>タグとは、ドキュメント内のテキストの任意の範囲を定めるためのタグです。

特別な機能は有さず、主にスタイルシートの適用範囲として使われています。

以下の詳細は99
class
dir
id
lang
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
title
bdo [Strict] [Transitional]
<bdo attributes...>〜</bdo>は、その環境の方向設定アルゴリズムを上書きする形で使い、その範囲のテキストの方向を指定します。

 attributesには次のようなものがあります。

<bdo>タグは、ドキュメントの内容を表示する方向を指定するときに使われます。

このタグを使うと、英語などの言語には右から左、ヘブライ語などの言語には左から右といった異なる表記方法を混在させることができます。

<bdo dir = "***">とは、<bdo>タグにdir属性を指定したもので、テキストの表記方向を制御するためのものです。

値には"ltr"(左から右:初期値)、"rtl"(右から左)を指定します。

以下の詳細は99
class
dir
id
lang
style
title
ins [Strict] [Transitional]
<ins attributes...>〜</ins>は、この環境内のテキストが「追加」されたものであることを示します。

このタグに対応しているブラウザはたとえば、そのテキストを強調した形で表示します。

 attributesには次のようなものが入ります。

<ins>タグとは、ドキュメントの本文の一部を新規に追加した内容として指定する場合に使用されるタグです。

一般的なブラウザではこの挿入された部分には下線が付されます。

<del>タグと組み合わせて、変更点を明示的に表現したい場合に役に立ちます。

cite
 [Strict] [Transitional][省略可]cite="URI"は、引用の元ソースURIを指定します。

 
<ins cite = "***">とは、<ins>タグにcite属性を指定したもので、内容を追加した理由を記述するためのものです。

値には理由が記されたURLを指定します。

class
詳細は5 を参照してください。
datetime
 [Strict] [Transitional][省略可]datetime="time"は、変更された日時を指定します。

<ins datetime = "***">とは、<ins>タグにdatetime属性を指定したもので、内容を追加した日時を記述するためのものです。

値には追加した日時をISO8601形式に従った表記で指定します。

この日付けのフォーマットはISO8601に準拠しています。

具体的には、YYYY-MM-DDThh:mm:ss:TZDの形で、

  • YYYY:4桁で年を示します。
  • MM:2桁で月(01は1月)を示します。
  • DD:2桁で日(01から31)を示します。
  • hh:2桁で時(00から23)を示します。
  • mm:2桁で分(00から59)を示します。
  • ss:2桁で秒(00から59)を示します。
  • TZD:ゾーンデザイナ。

    次のようなルールになっています。

    • z:UTC( UCoodinated Universal Time)を示します。
    • +hh:mm:UTCに指定した時間を足したローカル時間。
    • -hh:mm:UTCから指定した時間を引いたローカル時間。
たとえば、日本時間1997年7月31日16:05は、1997-07-31T16:05+09:00になります。
以下の詳細は99
dir
id
lang
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
title
del [Strict] [Transitional]
<del attributes...>〜</del>は、この環境内のテキストが「削除」されたものであることを示します。

このタグに対応しているブラウザはたとえば、そのテキストを表示しません。

 attributesinsタグと同じです。

<del>タグとは、ドキュメントの本文から削除したい部分を指定するためのタグです。

一般的なブラウザでは打ち消し線が表示され、削除部分などを明示的に表現することができます。

<ins>タグと組み合わせて、変更点を明示的に表現したい場合に役に立ちます。

<del cite = "***">とは、<del>タグにcite属性を指定したもので、内容を削除した理由を記述するためのものです。

値には理由が記されたURLを指定します。

<del datetime = "***">とは、<del>タグにdatetime属性を指定したもので、内容を削除した日時を記述するためのものです。

値には削除した日時をISO8601形式に従った表記で指定します。


addressはこのようになります。
blockquoteはこのようになります。

どうでしょうか。

divでalign=rightにしてみました。

どうでしょうか。


Netscape Navigator/CommunicatorやInternet Explorerでは、centerタグを使ってセンタリングタグを表現できます。

ただし、このタグは推奨されていません。

divタグ環境にalign="center"を付けるか、divタグ環境のスタイルでセンタリングを行うかいずれかの方法を使うほうが良いでしょう。

 

center [Transitional]
<center attributes...>〜</center>は、その範囲内の文字を中寄せして表示します。

 attributesには次のようなものが入ります。

推奨されていない要素  FONT は囲んだテキストの字体、色、サイズを指定する用途で広く使われています。

この機能は既に HTML から CSS へと移されています。

<center>タグはセンタリングのためのタグで、その内容(テキスト、画像、テーブル等)をブラウザの水平方向の中央に配置します。

ただし、このタグは廃止予定となっているため、今後はスタイルシートで指定するようにした方が良いでしょう。

 FONT 要素は同じスタイル情報を持つ  SPAN 要素に単純に置き換えることが出来ます。

<P><FONT color="blue" face="Helvetica"> マジで <FONT size="+1">デカい</FONT> 靴 </FONT>

であれば次のように…

<P><SPAN style="color:blue; font:Helvetica"> マジで <SPAN style="font:larger">デカい</SPAN> 靴 </SPAN><P>

或いはもっと簡単に…

<P style="color:blue; font:Helvetica"> マジで <SPAN style="font:larger">デカい</SPAN> 靴 <P>

これは文書内でのフォント変更の適切な手段です。

しかしながら、スタイルの使用としては最良とは言えません。

というのも CSS の凄いところは個別のスタイルを必要とする全ての要素で繰り返すことなく、文書間に渡って適用できる論理グループにテキストその他のスタイルを集める事が出来るというところにあるのですから。

以下の詳細は99
class
dir
id
lang
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
title

通常のテキストがここで終わります。

 ここで<center>タグを使っています。

 通常のテキストが再びここから始まります。


Internet Explorerでは、マーキーと呼ばれるスクロールメッセージを表現することができます。

marqueeはテキストをスクロールできるIE独自の機能です。

marquee
<marquee attributes...>〜</marquee>の書式でメッセージをスクロールして表示します。

アトリビュートとして次のようなものを取ります。

HTML 4.0 仕様の  DIV や  SPAN の中に DOM level 1 を利用した JavaScript により時間ごとに文字列を循環させるコンテンツを置く([訳註]: DOM level 1 だけでは marquee を実現できません。

DOM Level 2 の機能も一部必要です)

注: DOM のサポート状況はブラウザに因ります。

点滅テキスト同様、この手の効果は推奨されません。

align
[省略可]align="Justification"の形で、marqueeタグの閉じタグの後に続くテキストの位置を指定します。

値として次のようなものを取ります。

  • bottom:マーキーの最下段に合わせます(デフォルト)。
  • middle:マーキーの中心に合わせます。
  • top:マーキーの最上段に合わせます。
behavior
[省略可]behavior="type"の形で、スクロールの状態を設定します。

値として次のようなものを取ります。

  • alternate:スクロールがはしに行くたびに方向を反転します。
  • scroll:一方向へのスクロールを繰り返します(デフォルト)。
  • slide:一度だけ一方向にスクロールします。
bgcolor
[省略可]bgcolor="color"の形で、マーキーの背景色を指定します。

色の指定については、7 を参照してください。

direction
[省略可]direction="direction"の形で、スクロールの方向を指定します。

値として次のようなものを取ります。

  • left:左方向にスクロールします(デフォルト)。
  • right:右方向にスクロールします。
  • UP:上方向にスクロールします。
  • DOWN :下方向にスクロールします。
height
[省略可]height="number"の形でマーキーの高さを指定します。

数値だとピクセル値で、%を付けると画面縦幅に対するパーセンテージでそれぞれ指定します。

hspace
[省略可]hspace="number"は、マーキーの左右に空ける空白をピクセル値で指定します。
loop
[省略可]loop="number"は、スクロールを何回繰り返すかを指定します。

無限ループにする場合は、infiniteを値にします。

scrollamount
[省略可]scrollamount="number"は、一度の書き換え毎に進むピクセル数を値として指定します。
scrolldelay
[省略可]scrolldelay="number"は、書き換えの間隔をミリ秒で指定します。
vspace
[省略可]vspace="number"は、マーキーの上下に空ける空白をピクセル値で指定します。
width
[省略可]width="number"の形でマーキーの幅を指定します。

数値だとピクセル値で、%を付けると画面横幅に対するパーセンテージでそれぞれ指定します。

Netscape Navigator/CommunicatorやInternet Explorerでは、段組のページの表現もできます。

multicol
<multicol attributes...>〜</multicol>の形で、の部分のテキストを段組化して表現します。

 attributesとして次のものを取ります。

cols
[省略可]cols="number"で、段組数を指定します。

2を値にすると二段組、3を値にすると三段組になります。

指定しないと1が指定されたことになります。

gutter
[省略可]gutter="number"で、段組間の空白をピクセル値で指定します。

指定しないと10がデフォルトになります。

width
[省略可]width="number"で、カラム幅をピクセル値で指定します。

指定しない場合には、自動的に画面幅いっぱいを使うように計算が行われます。

1つ1つのカラムに個別に割り当てることはできません。

すべてのカラムが同じ幅になります。

また、Netscape Navigator/Communicatorでは、任意の大きさの空白を作成するspacerタグを表現します。

spacer
<spacer attributes...>は、指定した個所に空白を挿入します。

 attributesには次のようなものを取ります。

type
[省略可]type="type"でどのようなタイプの空白にするかを決定します。

タイプには次のようなものがあります。

  • block:ボックスタイプの空白を作成します。

    画像の代わりに空白が入るようなものと考えれば良いでしょう。

    これをtypeの値に指定した場合、ほかの attributesとして、alignheightwidthを取ります。

  • horizontal:横方向に空白を作成します。

    ほかの attributesとして、sizeを取ります。

  • vertical:縦方向に空白を作成します。

    ほかの attributesとして、sizeを取ります。

align
[省略可]align="Justificaion"でその後に続くテキストの位置を指定します。

この値には次のようなものを取ります。

  • absbottom:空白の最下段はベースラインに合わされます。
  • absmiddle:空白の中央はベースラインに合わされます。
  • baseline:空白の最下段はベースラインに合わされます。
  • bottom:空白の最下段とテキストの最下段を合わせます。
  • left:空白を左寄せにし、その後に続く文は、右端になると折り返されます。

    折り返しのキャンセルにはbrタグ(4.5 参照)を使います。

  • middle:空白の中央とテキストの最下段を合わせます。
  • top:空白の最上段とテキストの最上段を合わせます。
  • right:空白を右寄せにし、その後に続く文は、空白の近くになると折り返されます。

    折り返しのキャンセルにはbrタグ(4.5 参照)を使います。

height
[省略可]height="number"で空白の縦幅をピクセル値で指定します。

typeblockのときのみ意味を持ちます。

size
[省略可]size="number"で空白の幅をピクセル値で指定します。

typeblockのときは無視されます。

width
[省略可]width="number"で空白の横幅をピクセル値で指定します。

typeblockのときのみ意味を持ちます。

Summary:BLOCK ブロックテキスト


nextup previousindex
Next:5. スタイルシート Up:4. HTMLの骨格 Previous:4.9 リスト環境
Kenshi Muto
平成11年9月19日
Okano Toyomi
2005年08月13日

HTMLマニュアル

広告