* [CODE(HTMLe)[sup]] 要素型 (HTML, XHTML 1) [1] 多くの[[用字系]] (たとえば[[フランス語]]) では、 適当な[[レンダリング]]のために[[上付き]]文字、 [[下付き]]文字が必要です。そのような場合の上付き文字のマーク付けのために [CODE(HTMLe)[sup]] を使います。 [SRC[HTML 4]] [8] 仕様書: - [[HTML 4]] -- [2] :[[名前空間名]]:[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] :[[局所名]]:[CODE(HTMLe)[sup]] :[[開始タグ]]:必須 :[[終了タグ]]:必須 :[[内容模型]]:[CODE(SGML)[(%[[inline]];)*]] :出現できる文脈:[CODE(SGML)[%[[inline]]]] な文脈一般 :[[属性]]: ,属性名 ,属性値 ,既定値 ,説明 ,状態 ,出典 ,[CODE(HTMLa)[[[class]]]] , , ,[[級]] ,[HTML4] %[[coreattr]] ,[CODE(HTMLa)[[[dir]]]] , , ,[[書字方向]] ,[HTML4] %[[i18n]] ,[CODE(HTMLa)[[[id]]]] , , ,一意識別子 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[lang]]]] , , ,[[自然言語]] ,[HTML4] %i18n ,[CODE(HTMLa)[[[xml]]:lang]] , , ,自然言語 ,[XHTML1] ,[CODE(HTMLa)[[[onclick]]]] , , , ,[HTML4] %[[events]] ,[CODE(HTMLa)[[[ondblclick]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onkeydown]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onkeypress]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onkeyup]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmousedown]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmousemove]]]] ,[CODE(SGML)[%[[Script]]]] ,(なし) ,[[鼠]]移動時 ,[[W3C]] [[勧告]] ,[HTML 4] %events ,[CODE(HTMLa)[[[onmouseout]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmouseover]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmouseup]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[style]]]] , , ,スタイル情報 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[title]]]] , , ,注釈的題 ,[HTML4] %coreattr [[#comment]] ** 代替 [9] [CODE(HTMLe)[sup]] 要素型が適当なのは、 [[言語]]的その他の理由で[[文章]]が成立するために[[上付き]]である必要がある時だけです。 単に[[装飾]]のためだけの理由で[[上付き]]にしたい場合は、 [[スタイル・シート]]を使うべきです。 [10] [[CSS]] では、 [CODE(CSS)[[[vertical-align]]]] [[特性]]の値を [CODE(CSS)[[[super]]]] ([CODE(illegal)[sup]] では''ない''ことに注意。) とすると[[上付き]]で[[レンダリング]]されます。 [[#comment]] ** レンダリング [11] [[視覚UA]] では、普通 [CODE(CSS)[[[vertical-align]]: [[super]]]] で[[レンダリング]]します。 [[文字]]の大きさが周りよりも小さ目になることもあります。 [15] [[上付き]]にすると[[文字]]の位置が[[行]]の本来の高さとずれるために、 [[利用者エージェント]]によってはその[[行]]だけ違った高さになってしまうことがあります。 [12] [[テキスト・ブラウザ]]では[[上付き]]に[[レンダリング]]できないのが普通ですが、 例えば [[w3m]] は直前に [CODE[^]] を挿入して[[上付き]]であることがわかるようにします。 [13] >>12 の方法だけでは、 [CODE(HTMLe)[sup]] が入れ子になっている場合や [CODE(HTMLe)[sup]] 内の字数が多い場合などに[[利用者]]の混乱を招くかもしれませんから、 適宜[[色]]を変えるなどの他の方法も使う方が好ましいでしょう。 [14] 非[[視覚]]系の[[利用者エージェント]]では、 [CODE(HTMLe)[sup]] の[[レンダリング]]に工夫が必要です。 [[音声UA]] では[[言語]]と前後の文脈情報を利用して [SAMP(HTML)[<[CODE(HTMLe)[[[span]]]] [CODE(XMLa)[[[xml]]:[[lang]]]]="[CODE(lang)[[[en]]]]">1<[CODE(HTMLe)[sup]]>st]] を [Q[first]] と読み上げることもできるでしょうが、 一般の場合を考えると、 >>12 のように直前に少し間を置いて [Q[上付き]] などと補うなどとなるでしょう。 [[#comment]] ** 例 [3] [SAMP(HTML)[E = mc<[CODE(HTMLe)[sup]]>2]] HTML 4 仕様書に載っていた例です。これがフランス語だとは思えませんが:) (数学用字系, 化学用字系なんてのを考えれば、まあ、許容範囲でしょうか。 [CODE(HTMLe)[sub]] 要素型の本来想定されていた適用対象の1つでもありますし。) [4] [SAMP(HTML)[<[CODE(HTMLe)[SPAN]] [CODE(HTMLe)[lang]]="[CODE(lang)[[[fr]]]]">M<[CODE(HTMLe)[sup]]>lle Dupont]] こちらは正真正銘、仏蘭西語。これも HTML 4 仕様書からです。 [5] 他には、たとえば英語の [SAMP[21[SUP[st]] century]] を [SAMP(HTML)[21<[CODE(HTMLe)[sup]]>st century]] とするのも適当でしょう。 [6] 仏蘭西語の例: [PRE(HTML)[

7. Pour une santé meilleure au 21e siècle

]PRE] [7] [CODE(HTMLe)[sup]] がよく使われるのは >>3 のような数学的な場面と >>4-5 のように省略形などの言語的慣習による場面 (他に、 [SAMP(HTML)[<[CODE(HTMLe)[sup]]>TM]] や [SAMP(HTML)[<[CODE(HTMLe)[sup]]>&[[reg]];]] などが見られます。) のようです。 [18] [[仏蘭西語]]の場合、省略形の後の部分が[[母音字]]だけを含むときは、必ず[[上付き]]にします。その他の場合は、[[上付き]]でも通常通りでも構いません。 必ず[[上付き]]にする例 [PRE(HTML example code)[ Cie ]PRE] 必ず[[上付き]]にする例 [PRE(HTML example code)[ no ]PRE] [[上付き]]でも通常通りでも良い例 [PRE(HTML example code)[ Mlle ]PRE] [PRE(HTML example code)[ Mlle ]PRE] ;; 参考: [CITE@en[Comments on 27 May 2005 Working Draft of XHTML 2]] ([[名無しさん]] [sage]) [19] [[和蘭語]]の場合、 [PRE(HTML bad example code)[ 2de ]PRE] のように[[上付き]]にされることがよくあるものの、本来は [PRE(HTML example code)[ 2de ]PRE] のように通常通りにするべきだとされているものもあります。 ([[名無しさん]] [sage]) [21] [CITE@ja-JP[クライアントサイド イメージマップ - Weblog]] ([CODE[2007-08-14 21:00:00 +09:00]] 版) > [PRE(HTML example code)[ おかしい※けれど、 ]PRE] > [PRE(HTML example code)[
  • ※ HTML 4.01 と XHTML 1.1 では、 ]PRE] ([[名無しさん]]) [22] [[脚注]]に用いた例 [PRE(HTML example code)[ 二人零和確定完全情報ゲームである[1]。 ]PRE] [PRE(HTML example code)[
    1. ^ ]PRE] ;; [CITE@ja[囲碁 - Wikipedia]] ([CODE[2008-06-06 18:13:15 +09:00]] 版) ([[名無しさん]]) [23] [CITE@ja[123期 新入生アンケート]] ([CODE[2008-08-20 14:54:46 +09:00]] 版) > 文武両道◊◊ > 文武両道◊[SUP[◊]] ([[名無しさん]]) [24] [CITE[クレジットカード - シティ VISAカード ・ マスターカード CITI CARDS JAPAN]] ([TIME[2008-10-03 10:47:47 +09:00]] 版) > [PRE(HTML bad example code)[ ご入会いただいた際の特典としてご案内させていただきました2,000円キャッシュバック特典の適用は2008年12月15日をもって終了させていただきます。まだカード発行から1年が経過していらっしゃらないお客様はお早めにご利用ください。
      なお、2,000円キャッシュバックはカード発行から1年以内に、Amazon.co.jpが販売する商品を購入された場合が対象となります。Amazonマーケットプレイス      TMでのご利用は対象外となりますのでご注意ください。 ]PRE] [CODE(URI)[r.gif]] は「®」。 [26] >フォローが殺到した理由には「平沢唯の元ネタ」として面白がられている側面もあるだろう※2 ;; [CITE@ja[ASCII.jp:「私は平沢進だぞ。平沢唯じゃない」 本人に聞いてみた]] ([[四本淑三]] 著, [TIME[2009-12-16 23:58:16 +09:00]] 版) [27] [PRE(HTML code)[ $44.99 ]PRE] ** 関連 [16] [[上付き]]の [CODE(HTMLe)[[[sup]]]] に対して、 [[下付き]]の [CODE(HTMLe)[[[sub]]]] があります。 [17] [[装飾]]のための似た [[CSS]] の指定として [CODE(CSS)[[[vertical-align]]]] [[特性]]の値 [CODE(CSS)[[[super]]]] があります。 [[#comment]] * メモ [20] [[Classic Mozilla]] は [CODE(HTMLe)@en[[[sup]]]] の[[終了タグ]]''だけ''があるとそれ以降の文字が[[下付き]]になりました。 (大きさはそのまま。) ;; [[Netscape Navigator]] 4.8 で確認。 [25] [CITE@ja[都道府県の人口一覧 - Wikipedia]] ([TIME[2009-08-22 07:31:29 +09:00]] 版)