* 文章系ブロック水準要素 align 属性 (HTML, XHTML 1) [46] [[HTML]] の[[ブロック水準要素]]の多くには、 (現在では'''非推奨'''の) [DFN[[CODE(HTMLa)[align]] 属性]]が定義されています。 文章を直接内容に持つ系統の要素の [CODE(HTMLa)[align]] 属性は、文章の揃え位置を指定します。 [47] 適用対象要素型: [CODE(HTMLe)[[[div]]]], [CODE(HTMLe)[[[p]]]], [CODE(HTMLe)[[[h[VAR[n]]]]]] [48] 仕様書: - [[HTML 4]]: 15.1.2 Alignment [[#comment]] ** 代替 [51] この属性は'''非推奨'''です [SRC[HTML 4]]。 [[スタイル・シート]]を使うことが良いとされています。 [52] [[CSS]] の場合、 [CODE(CSS)[[[text-align]]]] 特性が使えます。 [[#comment]] ** 属性値 [49] この属性は[[列挙型]]です。 ,属性値 ,説明 ,出典 ,[CODE(HTML)[[[left]]]] ,左揃え ,[HTML 4] ,[CODE(HTML)[[[center]]]] ,中央揃え ,[HTML 4] ,[CODE(HTML)[[[right]]]] ,右揃え ,[HTML 4] ,[CODE(HTML)[[[justigy]]]] ,両端揃え ,[HTML 4] この属性は省略可能です。 省略時の既定値は[[基底文方向]]依存で、左から右なら [CODE(HTML)[left]], 右から左なら [CODE(HTML)[right]] です ([[DTD]] 的には既定値なしです) [SRC[HTML 4 15.1.2]]。 [[#comment]] ** 例 [50] 見出しを[RUBYB[画布] [キャンバス]]の中央に寄せる [SRC[HTML 4 15.1.2]] [PRE(HTML)[

How to Carve Wood

]PRE] [CODE(HTMLa)[align]] 属性は非推奨で、[[スタイル・シート]]を使うことが推奨されています。 [[CSS]] では [SAMP(CSS)[[CODE(HTMLe)[h1]] { text-align: center}]] と指定して同じ効果が得られます。 [37] 段落を画布の右で揃える例 [SRC[HTML 4 15.1.2、改]] [PRE(HTML)[

...Lots of paragraph text... ]PRE] [CODE(HTMLa)[align]] 属性は非推奨で、[[スタイル・シート]]を使うことが推奨されています。 [[CSS]] では [SAMP(CSS)[[CODE(HTMLe)[p]].mypar {text-align: center}]] と指定して同じ効果が得られます。 [53] 段落列を [CODE(HTMLe)[div]] でまとめ、 右端で文字を揃える例 [SRC[HTML 4 15.1.2]] [PRE(HTML)[

...text in first paragraph...

...text in second paragraph...

...text in third paragraph...

]PRE] [CODE(HTMLa)[align]] 属性は非推奨で、[[スタイル・シート]]を使うことが推奨されています。 [[CSS]] では [SAMP(CSS)[[CODE(HTMLe)[div]] {text-align: center}]] と指定して同じ効果が得られます (CSS では [CODE(HTMLe)[div]] 要素への指定が子要素である [CODE(HTMLe)[p]] に[[継承]]されます)。 [[#comment]] ** 他との関係 [54] '''非推奨'''の [CODE(HTMLe)[[[center]]]] 要素は、 [CODE(HTMLe)[[[div]]]] 要素で [CODE(HTMLa)[align]] 属性を [CODE(HTML)[[[center]]]] と指定したものと等価です [SRC[HTML 4]]。 [[#comment]] ** メモ [[#comment]] * table 要素 align 属性 (HTML, XHTML 1) [9] [[HTML]] の [CODE(HTMLe)[[[table]]]] 要素の [DFN[[CODE(HTMLa)[align]] 属性]]は、文書に対する[[表]]の位置を指定します。 [10] 仕様書: - [[HTML 4]] -- -- Float an object - [WEBTV] [[#comment]] ** スタイル・シート代替 [13] この属性は HTML 4 で'''非推奨'''とされています。 代わりにスタイル・シートで指定できます。 [14] たとえば、 [[CSS]] では [SAMP(CSS)[[CODE(HTMLe)[table]] {[[margin-left]]: [[auto]]; [[margin-right]]: auto}]] と指定すれば [CODE(HTML)[center]] を実現できます。 [[#comment]] ** 属性値 [11] この属性は[[列挙型]]です。 ,属性値 ,説明 ,出典 ,[CODE(HTML)[[[bleedleft]]]] ,“bleed” over (余白を超えて) 左浮き ,[WEBTV] ,[CODE(HTML)[[[bleedright]]]] ,“bleed” over 右浮き ,[WEBTV] ,[CODE(HTML)[[[center]]]] ,中央寄せ ,"[HTML 4], [WEBTV]" ,[CODE(HTML)[[[left]]]] ,左寄せ ,"[HTML 4], [WEBTV]" ,[CODE(HTML)[[[right]]]] ,右寄せ ,"[HTML 4], [WEBTV]" [12] HTML 4 仕様書には既定値は書かれていません。 [WEBTV] では、既定値は [CODE(HTML)[left]] です。 [20] 仕様上の [[SGML宣言]]の如何にかかわらず、ほとんどの [[WWWブラウザ]]は[[属性名]]の省略に対応していません。 [22] この属性は省略可能です。 [[#comment]] ** 他との関係 [33] この属性は表のこまの [CODE(HTMLa)[align]] 属性に影響し得ます。 詳しくは [CODE(SGML)[%[[cellhalign]]]] の説明をみてください。 [[#comment]] ** メモ [[#comment]] * 表構成要素系要素 align 属性 (HTML, XHTML 1) [15] [[HTML]] の要素型 [CODE(HTMLe)[[[tbody]]]], [CODE(HTMLe)[[[thead]]]], [CODE(HTMLe)[[[tfoot]]]], [CODE(HTMLe)[[[colgroup]]]], [CODE(HTMLe)[[[col]]]], [CODE(HTMLe)[[[tr]]]], [CODE(HTMLe)[[[th]]]], [CODE(HTMLe)[[[td]]]] で定義されている [DFN[[CODE(HTMLa)[align]] 属性]]は、 [[こま]]内のデータの揃え位置を指定します。 仕様書: - [[HTML 4]] -- [CODE(HTMLa)[align]] -- Inheritance of alignment specifications [[#comment]] ** スタイル・シート代替 [16] この属性は HTML 4 では'''非推奨'''とされていませんが、 [[スタイル・シート]]で指定する方が望ましいと考えられます。 [17] たとえば、 [[CSS]] では [CODE(CSS)[[[text-align]]]] [[特性]]で (属性値もほとんどそのまま) 指定できます。 [[#comment]] ** 属性値 [19] この属性は[[列挙型]]です。 :[CODE(HTML)[[[left]]]]:左流しデータ、左揃え文。 :[CODE(HTML)[[[center]]]]:中央データ、中央揃え文。 :[CODE(HTML)[[[right]]]]:右流しデータ、右揃え文。 :[CODE(HTML)[[[justify]]]]:両端揃え文。 :[CODE(HTML)[[[char]]]]:特定の文字で文を揃える。 UA 未対応時の振舞いは未規定。 [21] ほとんどの [[WWWブラウザ]]は[[属性名]]の省略に対応していません。 [23] この属性は省略可能です。 [[DTD]] 上の既定値はありません。 HTML 4 仕様書本文によれば、データこまでは [CODE(HTML)[left]], 見出しこまでは [CODE(HTML)[center]] が既定値です。 とかいいながら別の節に継承規則があって、それでも得られないときの既定値は UA 依存です。ともかく継承規則については [CODE(SGML)[%[[cellhalign]]]] の説明をみてください。 [34] その継承規則のところでは、どこにも陽に指定がないときの最終決定は UA 依存の値によるとされていますが、単に常に [CODE(HTML)[left]] というような既定値ではなく、[[現在文方向]]によって決めろと書いてあります。 言っていることがばらばらですねぇ。 もちろん、 >>23 は間違いで >>34 が意図だとは思います。 [35] また、 [CODE(HTML)[justify]] に対応していない UA は現在文方向を使って決めるべきだとの指示もあります (対応しなくても良いとはどこにも書いてない気がしますが)。 [[#comment]] ** 他との関係 [18] HTML 4 の [[DTD]] では、この属性は属性集合 [CODE(SGML)[%[[cellhalign]]]] の一員です。 [31] [CODE(HTML)[char]] の時の揃え文字は [CODE(HTMLa)[[[char]]]] 属性で指定します。 こま内の揃える実際の位置は [CODE(HTMLa)[[[charoff]]]] 属性で指定します。 [[#comment]] ** 実装 [36] ほとんどの視覚 WWW ブラウザは [CODE(HTML)[left]] と [CODE(HTML)[center]] と [CODE(HTML)[right]]、 せいぜい [CODE(HTML)[justify]] にしか対応していません。 [[#comment]] ** メモ [[#comment]] * caption 要素 align 属性 (HTML, XHTML 1) [24] [[HTML]] の [CODE(HTMLe)[[[caption]]]] 要素の [DFN[[CODE(HTMLa)[align]] 属性]]は、[[視覚UA]] が表に対してどの位置に表題を置くかを指定します。 仕様書: - [2] [[HTML 4]] ('''非推奨''') ''Tables in HTML documents'' - [1] [WEBTV] [[#comment]] ** スタイル・シート代替 [25] この属性は HTML 4 で'''非推奨'''とされています。 代わりに[[スタイル・シート]]で指定するべきです。 [26] [[CSS]] では、 [CODE(CSS)[[[caption-side]]]] [[特性]]があります。この特性の値は [CODE(HTMLa)[align]] 属性の上位互換となっています。 [[#comment]] ** 属性値 [27] この属性は[[列挙型]]です。 ,属性値 ,説明 ,出典 ,[CODE(HTML)[[[bottom]]]] ,表の下。 ,"[HTML 3.2], [HTML4], [XHTML1], [WebTV]" ,[CODE(HTML)[[[center]]]] ,表の上に中央寄せ ,[WebTV] ,[CODE(HTML)[[[left]]]] ,表の左。 ,"[HTML4], [XHTML1], [WebTV]" ,[CODE(HTML)[[[right]]]] ,表の右。 ,"[HTML4], [XHTML1], [WebTV]" ,[CODE(HTML)[[[top]]]] ,表の上。 ,"[HTML 3.2], [HTML4], [XHTML1], [WebTV]" [WebTV] では [CODE(HTML)[left]] と [CODE(HTML)[right]] は表の左側・右側に合わせるとされています。 [29] この属性値は省略可能です。 HTML 4 の DTD 上は既定値はありません。 HTML 4 仕様書本文によれば、 [CODE(HTML)[top]] が既定値です。 [WebTV] では、 [CODE(HTML)[center]] が既定値です。 [[#comment]] ** 実装 [28] ほとんどの [[WWWブラウザ]]は[[属性名]]の省略に対応していません。 [30] 多くの WWW ブラウザは、 [CODE(HTML)[left]] や [CODE(HTML)[right]] に対応していません。 [[#comment]] ** メモ [[#comment]] * *-align (CSS) - [[text-align]] 属性: [[箱]]内の文字列の配置の指定。 - [[vertical-align]] 属性: [[箱]]の、外側の箱に対する縦位置の指定。 [[#comment]] * object 要素・img 要素・applet 要素・embed 要素・input 要素 align 属性 (HTML, XHTML 1) [38] [[HTML]] の [CODE(HTMLe)[[[object]]]] 要素、 [CODE(HTMLe)[[[img]]]] 要素、 [CODE(HTMLe)[[[applet]]]] 要素、 [CODE(HTMLe)[[[embed]]]] 要素、 [CODE(HTMLe)[[[input]]]] 要素 ([CODE(HTMLa)[type]] が [CODE(HTML)[[[image]]]]) の [DFN[[CODE(HTMLa)[align]] 属性]]は、各要素の文脈に対する表示位置を指定します。 [39] 仕様書: - [[HTML 4]] -- -- Float an object - [[WebTV]] -- [CODE(HTMLe)[object]] -- [CODE(HTMLe)[img]] -- [CODE(HTMLe)[embed]] -- [CODE(HTMLe)[input]] [[#comment]] ** 代替 [40] この属性は HTML 4 で'''非推奨'''とされています。 代わりに[[スタイル・シート]]を使うことが好ましいといわれています。 [41] [[CSS]] では [SAMP(CSS)[[[text-align]]]] 特性や [SAMP(CSS)[[[vertical-align]]]] 特性や [SAMP(CSS)[[[margin]]]] 系特性群などで同様の効果が得られます。 [[#comment]] ** 属性値 [42] この属性は[[列挙型]]です。 指定できるのは次の値です。 ,属性値 ,説明 ,出典 ([CODE(HTMLe)[object]]) ,出典 ([CODE(HTMLe)[img]]) ,出典 ([CODE(HTMLe)[applet]]) ,出典 ([CODE(HTMLe)[embed]]) ,出典 ([CODE(HTMLe)[input]]) ,[CODE(HTML)[[[baseline]]]] , ,[WebTV] ,[CODE(HTML)[[[bottom]]]] ,物体の下と基線を揃える ,[HTML 4] ,"[HTML 4], [WebTV]" ,[HTML 4] ,[WebTV] ,[WebTV] ,[CODE(HTML)[[[center]]]] ,物体の中央と基線を揃える ,[WebTV] ,[WebTV] ,[CODE(HTML)[[[left]]]] ,左余白に[[浮動]] ,"[HTML 4], [WebTV]" ,"[HTML 4], [WebTV]" ,[HTML 4] ,[WebTV] ,[WebTV] ,[CODE(HTML)[[[middle]]]] ,物体の垂直中央と基線を揃える ,"[HTML 4], [WebTV]" ,"[HTML 4], [WebTV]" ,[HTML 4] ,[WebTV] ,[CODE(HTML)[[[right]]]] ,右余白に浮動 ,"[HTML 4], [WebTV]" ,"[HTML 4], [WebTV]" ,[HTML 4] ,[WebTV] ,[WebTV] ,[CODE(HTML)[[[textbottom]]]] , ,[WebTV] ,[CODE(HTML)[[[textmiddle]]]] , ,[WebTV] ,[CODE(HTML)[[[texttop]]]] , ,[WebTV] ,[CODE(HTML)[[[top]]]] ,物体の上と行の上を揃える ,[HTML 4] ,"[HTML 4], [WebTV]" ,[HTML 4] ,[WebTV] ,[WebTV] [43] この属性は省略可能です。 省略時の既定値は [CODE(HTML)[bottom]] です [SUP[ [HTML 4] ]]。 ただし [WebTV] では [CODE(HTMLe)[img]] と [CODE(HTMLe)[input]] では [CODE(HTMLe)[top]], [CODE(HTMLe)[object]] と [CODE(HTMLe)[embed]] では [CODE(HTMLe)[left]] とされています。 [[#comment]] ** レンダリング [44] UA は [CODE(HTMLa)[align]] 値を様々に解釈しています。 当該要素以前の文字列に対して揃えるものもあれば、 以後の文字列も考慮するものもあります。 [SUP[ [HTML 4] ]] どちらが正しいと決められてはいないようです。 [[#comment]] ** 実装 [45] ほとんどの [[WWWブラウザ]]は[[属性名]]の省略に対応していません。 [[#comment]] ** メモ [[#comment]] * IFRAME 要素 ALIGN 属性 (HTML), iframe 要素 align 属性 (XHTML) :bottom:縦方向下揃え [WEBTV], ([HTML4], [XHTML1]) :center:中央寄せ [HTML4], [XHTML1] :justify:均等割付 (謎) [HTML4], [XHTML1] :left:左揃え [HTML4], [XHTML1] :middle:縦方向中央揃え ([HTML4], [XHTML1]) :right:右揃え [HTML4], [XHTML1] :top:縦方向上揃え [WEBTV], ([HTML4], [XHTML1]) [3] 既定値は左から右に流れる文章では [CODE(HTML)[left]], 右から左に流れる文章では [CODE(HTML)[right]] です [SRC[HTML 4]]。 値 [CODE(HTML)[justify]] も許されるが、用途不明 (代替内容に反映される?)。他の要素との共通属性のため含まれてしまっただけか? [4] >>3 [[DTD]] を見れば、 [[align]] 属性の定義が [[img]] 要素のものと同じであることが分かる。仕様書本文の説明は間違いくさい。 DTD を信用するなら [CODE(HTML)[justify]] は無くて、代わりに [CODE(HTML)[top]], [CODE(HTML)[middle]], [CODE(HTML)[bottom]] が使える。更に [CODE(HTML)[center]] も使えないはずだ。 [5] WebTV は [CODE(HTML)[center]] を、 [CODE(HTML)[middle]] の意味で使っている。 - [HTML4] (要素自体'''非推奨''') -- Float an object [[#comment]] * 浮動 (HTML) [55] [[HTML]] の[[表]]、[[物体]]、[[画像]]、[[枠]]などの [CODE(HTMLa)[align]] 属性を [DFN[[CODE(HTML)[left]]]] や [DFN[[CODE(HTML)[right]]]] と指定すると、 その物体は左右の余白に[DFN[[RUBYB[浮動] [float]]]]します [SRC[HTML 4 15.1.3.1]]。 浮動物体は普通新しい行を始めます [SRC[HTML 4 15.1.3.1]]。 [56] 仕様書: - [[HTML 4]] -- 15.1.3.1 Float an object [[#comment]] ** 代替 [60] [CODE(HTMLa)[align]] 属性は'''非推奨'''です [SRC[HTML 4]]。 代わりに[[スタイル・シート]]で指定できます。 [61] [[CSS]] では [SAMP(CSS)[[[float]]]] 特性で指定できます。 [[#comment]] ** 属性値 [58] [CODE(HTMLa)[align]] 属性値: :[CODE(HTML)[left]]:左余白に物体を浮動させます。続きの文章は右側に流します。 :[CODE(HTML)[right]]:右余白に物体を浮動させます。続きの文章は左側に流します。 [59] なお、 [CODE(HTML)[center]] は要素型によっては物体を[RUBY[画布] [キャンバス]]の中央に寄せますが、 浮動してはいません。 (また、 [CODE(HTMLe)[[[p]]]] などの [CODE(HTML)[center]] は中身の文章を中央寄せします。) [[#comment]] ** 例 [57] [PRE(HTML)[ my boat ]PRE] [[#comment]] ** メモ [62] 浮動による文章の回り込みを解除するには、 [CODE(HTMLe)[[[br]]]] 要素の [CODE(HTMLa)[[[clear]]]] 属性 ('''非推奨''') を使います。 非推奨属性の代わりに、 [[CSS]] の [SAMP(CSS)[[[clear]]]] 特性などを使うこともできます。 ([[名無しさん]]) [[#comment]] * メモ - [6] >>5 WebTV は [CODE(HTML)[img]] 要素についても、 [CODE(HTML)[center]] を [CODE(HTML)[middle]] の意味で使っているが、こちらには [CODE(HTML)[middle]] もある。説明が center of the text と middle of the text になってて、違いが不明。 - [7] [CODE(HTML)[align]] 属性の継承(?)に関する [[WinIE]] 3.0 の実装は変なことになってるようです: ''ブラウザーによって振る舞いの異なるタグ : 他にもありますか?'' [8] >>7 の情報によると、 - [[WinIE 3.0]] では、 [CODE(HTMLe)[[[p]]]] 要素型は [CODE(HTMLe)[[[hr]]]] 要素型を内容に含められるらしい (ので、 [CODE(HTML)[<[CODE(HTMLe)[hr]]>]] タグがあってもそこで終了タグが補われない)。 - WinIE 3.0 では [CODE(HTMLe)[[[nobr]]]] 要素の最後の [CODE(HTMLe)[[[wbr]]]] 要素が機能しない ― これは [CODE(HTMLa)[align]] とは関係ない。 - WinIE 3.0 で、複数の [CODE(HTMLe)[[[table]]]] と [CODE(HTMLa)[align]] が [CODE(HTML)[left]], [CODE(HTML)[right]]、それに [CODE(HTMLe)[[[width]]]] の組合せでおかしなことが起こるらしい。 - WinIE 3.0 で、 [CODE(HTMLe)[[[td]]]] とその中の [CODE(HTMLe)[p]] の両方に [CODE(HTMLa)[align]] が指定されている場合、両方の値のうち、 [CODE(HTML)[left]] → [CODE(HTML)[right]] → [CODE(HTML)[center]] (高) の優先度で配置が決まる。 -- たとえば、 [SAMP(HTML)[<[CODE(HTMLe)[td]] [CODE(HTMLa)[align]]="right"><[CODE(HTMLe)[p]] [CODE(HTMLa)[align]]="center">]] なら中央。 - [[NN]] 3.0 で、 [CODE(HTMLe)[table]] 内の入れ子の [CODE(HTMLe)[table]] が [CODE(HTMLa)[align]] [CODE(HTML)[right]] のとき、文字列や [CODE(HTMLe)[hr]] などこまの右端に達する物体がなければ中の [CODE(HTMLe)[table]] が消失する。 ([[名無しさん]])