Go to information

フォントとテキスト

これから紹介する font要素は、テキストの色や書体、大きさを変更できるので一見、非常に便利です。しかし、font要素及び、これに指定できる size属性, color属性, face属性が W3C の策定した HTML の仕様において使用することが推奨されていません。 何故、こんなに便利な機能が非推奨に定められているのでしょうか。それには次のような理由があります。

たとえば、フォントの書体が指定されていても等幅文字(固定幅文字)しか扱えない・表示できない環境では無意味です。フォントの色が指定されていても白黒でしか表示できない環境では無意味です。フォントのサイズが視覚的に大きくても小さくても音声出力・点字出力などの非視覚環境では無意味です。このように環境によっては、font要素で指定された属性を再現する方法はありません。つまり、色やサイズなどを表現できない環境(コンピュータ)での代替方法がないということを意味しています。

また、font要素はユーザースタイルシート(ブラウザに内臓されている機能で、ユーザーが自分にとって適した状態で観覧できるようにウェブページに被せるフィルターのようなもの)との相性を大変悪くする影響を与えます。たとえば、色覚異常の障害をもったユーザーがウェブコンテンツ制作者の指定していた色からユーザースタイルシートで自分が良く見える色に変えようと思っても、制作者側が font要素を使って様々な色を指定していると、それら無数に存在する色の指定に対して代替色を指定しなければならないことに呆れて閲覧することまであきらめてしまうかもしれません。

このように font要素は環境に強く依存し、融通の利かない不便な要素でしかありません。そのため font要素、及びその全ての属性が非推奨に定められているのです。そこで、font要素の代替として CSS を使えば、HTML を本来の情報伝達の役割に徹底させて、文書の見栄え(プレゼンテーション)は CSS で整えることができます。CSS を使うことで HTML は効率的に情報交換が行え、HTML文書は本来の役割とは違う見た目を達成するのに役立つのです。以上の理由から本稿では、HTML で表示指定をするための働きしかもたない要素・属性については、必ず CSS でそれらの代替方法を紹介するようにしているので、あわせて参照してください。

フォントとそのオプション

文字(フォント)に対する体裁(スタイル)を指定する要素に font要素があります。font要素は size属性, color属性, face属性を指定することでそれぞれ文字(フォント)の大きさ、色、書体を整えることができます。

文字の大きさを部分的に変える

<font size="+1">サイズを変える文字列</font>

size属性は、文字の表示サイズを指定する属性です。サイズの指定は絶対値と相対値の2種類あります。絶対値とは "1-7" までの自然数の固定値による指定です。なお、デフォルトでは UA のフォントサイズの初期値は "3" に設定されています。もうひとつの相対値とは基本表示サイズを基準に何段階大きく、または小さく表示するかを相対的に指定する方法で、"+1", "-1" のように指定します。たとえば UA の初期値である "3" を基準とした場合、"+4" を指定すると文字サイズは一番大きな "7" に、"-2" を指定すると一番小さな "1" になります。

また Windows版Internet Explorer と Macintosh版Internet Explorer 5 にしか対応していませんが、"<head>" と "</head>" の間に basefont要素を指定することで基本表示サイズを指定することができます。デフォルトの UA の初期値は "3" ですが、"<basefont size="2">"(空要素なので終了タグはありません)と指定した場合、そのページの基本表示サイズが "2" に設定されます。基本表示サイズが "2" に設定された場合、font要素の size属性で指定できる文字サイズの相対値は、"+5" から "-1" までの範囲になります。

size属性は非推奨属性のため、CSS の font-sizeプロパティで代替指定することが強く推奨されています。

文字の色を部分的に変える

<font color="#FF0000">色を変える文字列</font>

body要素の text属性はページ全体の文字色を指定するものですが、font要素の color属性は部分的に色を変えることできます。色の指定は RGB値、またはカラーネームで指定します。font要素の他の size属性, face属性といっしょに組み合わせて使うこともできます。

color属性は非推奨属性のため CSS の colorプロパティで代替指定することが強く推奨されています。

文字を指定の書体で表示する

<font face="Times New Roman">書体を変える文字列</font>

face属性は、文字の表示書体を部分的に指定する属性です。この指定は、ユーザーの環境(コンピュータの OS)に指定されたフォントがインストールされている場合に、そのフォントで表示します。

フォント名をカンマ(,)で区切ることで複数のフォントを指定することができ、その場合は一番最初に記したフォントから優先的に適用されます。もし、ユーザーの環境に指定されたフォントがインストールされていなかった場合、複数指定されたフォントの中で2番目のフォントが、さらに2番目のフォントがインストールされていなかった場合は3番目のフォントが適用されるといった形になります。特にフォントの指定がない場合は UA の初期値、またはユーザーが UA の環境設定を変更している場合はユーザーの指定するフォントで表示されます。フォント名は総称ファミリ名分類のフォント名一覧(CSS用)を参考にしてください。

face属性は非推奨属性のため、CSS の font-familyプロパティで代替指定することが強く推奨されています。

テキストの拡大表示・縮小表示

<big>文字を一段階大きく表示</big>
<small>文字を一段階小さく表示</small>

big要素はフォントの基本表示サイズに対してテキストが一段階大きく("<font size="+1">…</font>" と同じ)表示され、small要素は一段階小さく("<font size="-1">…</font>" と同じ)表示されます。基準となる文字サイズは、ユーザーの UA の環境設定に左右されるため、大きさを確定することはできません。なお、big要素, small要素ともに HTML4 の仕様では非推奨要素ではありませんが、CSS で代替指定することが推奨されています。font-size プロパティを使うことで、単位をつけた数値やパーセンテージ値(%)でより細かくフォントのサイズを調節することができます。

テキストの太字・斜体(視覚的強調)

<b>太字(ボールド)表示します</b>
<i>斜体(イタリック)表示します</i>

b要素はテキストをボールド(太字)表示、i要素はテキストをイタリック体(斜体)で表示させます。次項で扱うテキストの強調表示(論理的強調)の strong要素, em要素もそれぞれ視覚ブラウザでの表示は同じになりますが、それぞれの要素が持つ意味(付加情報)は異なります。b要素はボールド表示にする、i要素はイタリック体で表示するといった物理的な意味しかもっておらず、たとえば、音声出力・点字出力の非視覚環境において、このような指定は無意味です。

b要素, i要素ともに非推奨要素ではありませんが、視覚的に太字・斜体で表示させたい場合には、CSS を使うことが推奨されています。太字表示には font-weightプロパティ、斜体表示には font-styleプロパティを指定します。

テキストの強調表示(論理的強調)

<em>強調したい文章(キーワード)</em>
<strong>より強く強調したい文章(キーワード)</strong>

b要素と strong要素、i要素 と em要素 は視覚ブラウザの表示にこそ違いはありませんが、各要素がもつ意味(付加情報)は全く違います。strong要素や em要素は文書の中で強調したい意味をもっているので「論理的強調」と呼ばれ、これに対して物理的な意味しかもたない b要素, i要素は「視覚的強調」と呼ばれます。

strong要素, em要素は視覚的にテキストの表示を変更するだけでなく、加えて強調の意味をもっているので、音声出力・点字出力の非視覚環境においても指定された部分を強調して表現する(読み上げる)ことが期待されます。なお、strong要素や em要素はその文書内で「ここは強調すべき文章である」と意味づけするものであり、文字の太字・斜体といった表示をコントロールするために使用するべきではありません。

また、strong要素や em要素で強調された部分(キーワード)は、検索エンジンのロボットにおいても、この文書の中でどのキーワードが重要であるかをより明確に伝えるのにも役立つかもしれません。ただし、検索エンジンのロボットにも効果があるかもしれないといって文章全体を囲んでしまうような使い方をすると、検索エンジンのロボットだけでなく、非視覚環境のユーザーにも文書内の一体どこが重要な部分であるのかを伝えることはできません。strong要素と em要素は多用することなく、文書内で制作者が「重要だ・注意してほしい」と思う部分にのみピンポイントで使用することで、その効果を発揮できます。

テキストの等幅表示

<tt>等幅(テレタイプ)表示</tt>

tt要素は、指定範囲の文字を等幅(テレタイプ)フォントで表示します。等幅フォント(固定幅フォント)は、半角文字(英数字)の幅が全角文字の半分で、上下の行で字送りを揃えることができます。ただし、ユーザーが利用している UA に本来、等幅フォントで表示する部分の設定に等幅フォントが設定されていない場合は、ユーザーが指定するフォントで表示されるため等幅フォントによる表示は行われません。また、UA の環境設定で指定されているフォントサイズによっては、半角文字の幅が全角文字の半分にならない場合があります。tt要素は非推奨要素ではありませんが、CSS の font-familyプロパティに等幅フォントを指定することで代替表示ができます。

上付き文字、下付き文字の設定

<p>次の問いの( )を埋めよ。<br>
問1, 2<sup>2</sup> = ( )<br>
問2, ( ) の化学式は、H<sub>2</sub>O である。</p>

sup要素は文字を上付き文字(例:22)で、sub要素は文字を下付き文字(例:H2O)で表示します。

数式や化学式、フランス語、注釈を入れる場合などに活用されています。sup要素, sub要素ともに見た目を定義する要素であることに基づいているため、span要素をセレクタに CSS の vertical-alignプロパティで代替されていることがあるのですが、素直に sup要素, sub要素をそのまま使った方が良いでしょう。次世代規格の XHTML2.0 では sup要素, sub要素の扱いは変わっています。

打ち消し線・下線の指定(削除・挿入の明示)

<p>彼は、「勿論だ」と<del>合槌を打った</del><ins>相槌を打った</ins>。</p>

del要素は deleted text という意味で指定範囲の内容が削除されたことを示し、ins要素は、inserted text という意味で指定範囲の内容が新しく挿入されたことを示します。del要素と ins要素は、組み合わせて使うことで、何を削除して代わりに何を挿入したか、その変更の内容をはっきり示すことができます。視覚ブラウザの表示では del要素で囲まれた部分は打ち消し線(例:合槌を打った)を引いて表示し、ins要素で囲まれた部分は下線(例:相槌を打った)を引いて表示します。

また、同じように打ち消し線を表示する要素に s要素, strike要素があり、下線を表示する要素に u要素があります。ただし、これらの要素は del要素, ins要素とは違い視覚的に表示を変える以上の物理的な意味しかもっていないため、HTML4 の仕様では非推奨とされており、削除・挿入を示すことが必要な場合には del要素, ins要素の使用が推奨されています。また、視覚的な効果は、CSS の text-decorationプロパティを使うことで代替することができます。

テキストに構造情報を付加

文章に構造的な意味づけを行う要素には次のようなものがあります。

単語や語句の略語・頭字語を示す

<abbr title="Hyper Text Markup Language">HTML</abbr>
<acronym title="North Atlantic Treaty Organisation">NATO</acronym>

abbr要素は長い単語や語句の略語(省略)を示すインライン要素です。acronym要素は頭字語(一つの単語として発音される略語)を定義するインライン要素です。どちらも省略前のフルスペルを title属性で補足して使用します。視覚ブラウザの多くはポインティングデバイス(マウスやノートパソコン付属のトラックパッドなど)のカーソルをその要素の部分にあわせることで title属性で指定した略語のもととなる単語や語句がツールチップとして表示されます。なお、Windows版Internet Explorer 6 は abbr要素に対応しておらず、Windows版Internet Explorer 7 より対応しています。abbr要素, acronym要素内のテキストは、Netscape, Firefox, Opera, Safari では点線の下線を引いて表示します。Windows版Internet Explorer 7, Macintosh版Internet Explorer 5 はデフォルトでは下線を表示する設定になっていないため下線は引かれません。

引用・参照元を示す

<cite>仕様書</cite>によれば…

cite要素は出典元や引用元など他のリソース(情報資源)の参照を明示するインライン要素です。「例:"<cite>仕様書</cite>によれば、cite要素は引用か他のリソースの参照を示すとある"」のように使います。視覚ブラウザでは要素内のテキストはイタリック体(斜体)表示になります。

プログラムコードであることを示す

<code>var</code>

code要素は要素内の文字列がコンピュータのプログラムコードであることを示すインライン要素です。視覚ブラウザでは要素内の文字列が等幅フォント(固定幅フォント)で表示されます。たとえば、情報技術の解説などを扱うウェブページではソースコードを示すために code要素が使用されます。テキストを等幅フォントで表示させたい場合には tt要素を使用するか、CSS の font-familyプロパティを使うことでも等幅フォントの表示が代替可能です。

専門用語などの定義語を示す

<dfn>dfn要素</dfn>は用語のマーク付けに使用します。

dfn要素は専門用語などの定義される用語を示すインライン要素です。用語を解説する場合に、用語の部分をマークするのに使われます。たとえば、この dfn要素も一種の専門用語なので dfn要素自身をマーク付けするといった使い方もできます。視覚ブラウザでは要素内のテキストはイタリック体(斜体)表示になります。

ユーザーがコンピュータへ入力する部分を示す

<kbd>Y</kbd> or <kbd>N</kbd>

kbd要素は、ユーザーがコンピュータへ(キーボードを使って)直接入力する部分であることを示すインライン要素です。「例:"…に同意される場合は <kbd>Y</kbd> を、同意できない場合には <kbd>N</kbd> と入力して、<kbd>Enter</kbd> を押してください"」のように使います。視覚ブラウザでは要素内のテキストは等幅フォント(固定幅フォント)表示になります。

プログラムの変数・引数であることを示す

<var>$number</var>

var要素は、プログラムの変数・引数であることを示します。 JavaScript のメソッドを解説するなど code要素と同様に情報技術の解説を扱っているサイト等でソースコードを示すために使用することになります。視覚ブラウザでは要素内のテキストはイタリック体(斜体)表示になります。

プログラムやスクリプトの出力結果であることを示す

<samp>ERROR MESSAGE: … </samp>

samp要素はプログラムやスクリプトの出力結果であることを示すインライン要素です。 「例:"このプログラムを実行すると<samp>ERROR MESSAGE</samp>を表示します"」のように使用します。視覚ブラウザでは要素内のテキストは等幅フォント(固定幅フォント)表示になります。

見出し(章・節・項の題名)の定義

<h1>大見出し</h1>
<h2>中見出し</h2>
<p>段落</p>
<h3>小見出し</h3>
<p>段落</p>
<h2>中見出し</h2>
<p>段落</p>
<h3>小見出し</h3>
<p>段落</p>
<h3 align="center">小見出しを中央揃え</h3>

<hx> の形で "x" の部分に "1-6" までの数字で見出しのレベル(段階)を指定することができます。視覚ブラウザでは表示域の左右いっぱいまでの範囲を占め、前後に改行を置き、上下に1行分の余白をあけて、さらに "h" に続く数字が小さいほど文字のサイズは大きく太字で表示されます。h1-h6要素は本文の内容に対してこの部分が「見出し」であることを示すブロック要素です。ユーザーが見出しを見れば、文書の内容すべてに目を通さずとも内容がわかるように記述しましょう。

また、align属性を加えることで画像やテキストなどのインライン内容(行内容)を表示域内のどこに揃えるかを指定できます。指定できる値には次の4つのキーワードがあります。

left
要素内のインライン内容を左揃えに表示する
right
要素内のインライン内容を右揃えに表示する
center
要素内のインライン内容を中央揃えに表示する
justify
要素内の文字を均等に配置し、テキストを両端揃えで表示する

h1-h6要素は、たとえば font要素の size属性と b要素とを組み合わせることでも視覚的に同じ大きさ・太さの文字を表現することができます。しかし、これでは視覚的に文字が大きくて太字であること以上の意味をもっていないため、音声出力・点字出力などの非視覚環境では無意味です。h1-h6要素は視覚的な表現だけでなく、これがこの文書の「見出し」であるということを定義づけする付加情報をもっています。

h1-h6要素は Google, Yahoo! などのロボット型の検索エンジンも重要視する要素のひとつとされています。"h" に続く数字が小さいほどロボットの重要度も高くなると噂されていますが、h1要素が重要視されるからといって文章全体を h1要素で囲んだりしても意味はありません。さらに h1-h6要素は乱発することで検索エンジンのロボットへ効果があるわけではなく、HTML の論理構造に基づいて使用してこそ、その効果も発揮されることでしょう。意味もなく h1-h6要素を使用することは、文書の論理構造を破綻させ、ユーザーや検索エンジンのロボットにも混乱を招きます。見出しは、HTML の論理構造に基づいて適切な部分に適切なレベルの見出しをつけるようにしましょう。

h1-h6要素はここが「見出し」だという構造を定義づけすることに意味があります。文書全体の内容を表すような部分は大見出しとなるように h1要素を使い、次に大きな項目となる部分を h2要素に割り当て、項目がさらに細かく分かれている場合は h3要素を使うといったように、順に h1, h2, h3, h4, h5, h6 と適切なマーク付けを行いましょう。実際に使用するのは大見出し・中見出し・小見出しを示す h1, h2, h3 の3つぐらいでしょう。h5要素, h6要素まで使わなければらないような場合は、ひとつの文書で内容を細かく分けすぎていることも考えられるので、文書を複数に分けた方が適切なこともあるでしょう。

*h1-h6要素の align属性は非推奨属性です。

引用文の表示

<blockquote cite="http://w3g.jp/..."><p>引用文</p></blockquote>
<q cite="http://w3g.jp/...">引用文</q>

blockquote要素はブロック要素を内包した(比較的長い)文章の引用を示すブロック要素です。視覚ブラウザでは表示域の左右いっぱいまでの範囲を占め、前後に改行を置き、上下に1行分の余白をあけ、さらに左右にも約3文字分の余白をあけたインデント表示になります。HTML4.01厳密型DTD では body要素と同様にテキストやインライン要素を blockquote要素内に直接含めることはできず、その間に p要素, div要素などのブロック要素を内包しなければなりません。なお、上下左右の余白については CSS の marginプロパティで調節できます。

blockquote要素に対してインライン要素などのインラインレベルのみの(比較的短い)文章の引用を示す場合には、q要素を使います。Netscape, Firefox, Opera, Safari では q要素で囲まれた文章に引用符(")をつけて表示します。なお、引用符は CSS の quotesプロパティで記号を変更したり、引用符を表示しないようにすることができます。

引用を示す両要素には、引用文の引用元を示す cite属性があり、値には引用元の URI など元のリソース(情報資源)についての情報を記述します。cite属性の代わりに title属性に引用元の説明となる情報を記す使い方も良くあります。これは、引用元が書籍など URI で示すことができない場合は、cite属性よりも補足説明という形で title属性に書籍名とページ名を記した方が適切だからです。

テキストをソース通りに表示

<pre>ソース通りに表示させる内容</pre>

pre要素は、テキストが整形済みであることを示すブロック要素です。テキストが整形済みであることを UA に示すことで、その部分を HTMLソースの内容通りに表示させます。pre要素内の内容は行末での折り返しが抑制されるため、表示域にあわせた自動的な折り返しが行われず、文章はすべて等幅フォント(固定幅フォント)で表示されます。

ただし、pre要素内に strong要素, em要素などのインライン要素を含んだ場合、その要素のもつ効果は有効となり、視覚ブラウザの表示にも太字や斜体での表示が反映されます。pre要素は、テキストをソース通りに表示させることができるので、ソースコードを示す場合や簡単な地図を書いたりするのにも使用されています。

文字にルビ(読みがな)をふる

<ruby><rb>仙人掌</rb>
<rp>(</rp><rt>さぼてん</rt><rp>)</rp></ruby>

ruby要素は文章に読みがな(発音ガイド)をふるためのルビを定義するインライン要素です。基本形は、"<ruby><rb>ルビをふる文章</rb><rt>ルビ</rt></ruby>" なのですが、これではルビのレンダリングに対応していない環境では、ルビをふる文章とルビ自体が横並びで表示されてしまうため、文章の内容がわかりにくくなってしまいます。そこで非対応環境用にルビ部分を括弧(カッコ)で囲んだ「ルビを振る文章(ルビ)」という形で表示して意味が通るようにしておくのが適切です。そこで基本形に rp要素を加えて "<ruby><rb>ルビをふる文章</rb><rp>括弧開き</rp><rt>ルビ</rt><rp>括弧閉じ</rp></ruby>" という形で使います。ルビのレンダリングには Windows版Internet Explorer(5, 6, 7)と Macintosh版Internet Explorer 5 が対応しています。

なお、Windows版Internet Explorer も Macintosh版Internet Explorer 5 も rb要素には対応していないのですが、Macintosh版Internet Explorer 5 は rt要素や rp要素の前に置かれたテキストを自動的にルビを振る対象と見なす実装となっているため Macintosh版Internet Explorer 5 の実装にあわせた形でルビを定義する場合は、"<ruby>ルビをふる文章<rp>括弧開き</rp><rt>ルビ</rt><rp>括弧閉じ</rp></ruby>" という形で使う必要があります。ただし、正確にはサンプルのようにルビを振る対象は rb要素でマーク付けを行います。

ルビ(ふりがな)のサンプル

ルビのレンダリングのサンプルイメージです。現状でルビのレンダリングに対応しているのは Windows版Internet Explorer と Macintosh版Internet Explorer 5 のみで、ルビに対応していないその他の視覚環境であれば rp要素を使って括弧(カッコ)を入れることで非対応の場合でも表示される文字列の意味が通るようにしておきます(ルビのレンダリングに対応した環境であれば rp要素の内容は無視されるので弊害を起こすことはありません)。たとえば、先のサンプルであれば、Internet Explorer 以外の視覚環境では「仙人掌(さぼてん)」と表示されます。なお、ルビ関連要素は1999年3月にリリースされた Internet Explorer 5.0 が独自機能として先取り実装したもので、XHTML1.1 の規格で Ruby Annotation として W3C より正式に勧告されたものであるため、せっかく紹介したのですが HTML4.01 や XHTML1.0 のバージョンではルビを使用することができません。

マーキー(スクロール文字)とそのオプション

marquee要素は Internet Explorer 2.0 の時に独自に採用された要素で、要素内の内容を表示域内で行って帰ってとスクロールさせます。オプションによってその動きをいろいろとコントロールすることができます。ただし、ユーザー側では、そのスクロールを止めることができないので、本稿では marquee要素の使用をお奨めしません。

ブラウザの独自機能ですが、主要視覚ブラウザでは Safari 以外の Netscape, Firefox, Opera までも、その属性にまでほとんど対応しているようです。しかし、独自機能はいつその機能が廃止されるかもしれないなど、今後の対応がどのようになるかわかりません。

マーキーのスクロール方向の指定

<marquee direction="up">下から上にスクロール</marquee>

direction属性は、スクロールさせる方向を指定する属性で、属性値には次の4つのキーワードがあります。

left
(右から)左に向かってスクロール
right
(左から)右に向かってスクロール
up
(下から)上に向かってスクロール
down
(上から)下に向かってスクロール

direction属性の指定がない場合は、初期値の "left" が適用されます。Netscape は、"up" と "down" に対応していません。"left" と "right" には対応しています。Internet Explorer, Firefox, Opera はすべてのキーワードに対応しています。

マーキーのパターン指定

<marquee behavior="slide" direction="left">
右から左に向かってスクロールし、表示域の端で止まる</marquee>

behavior属性はスクロールの動き方を指定する属性で、属性値には次の3つがあります。

scroll
一定方向にスクロールをくり返す
slide
指定した方向にスクロールし表示域の端で止まる
alternate
画面の中で左右に行って帰ってをくり返す

behavior属性の指定がない場合は、初期値の "scroll" が適用されます。Netscpae, Firefox では、"slide" が無効です。

マーキーのループ指定

<marquee loope="5" direction="left">
右から左に向かってのスクロールを5回くり返します</marquee>

loop属性は、スクロールの繰り返し回数を設定する属性です。値は整数でスクロールを繰り返す回数を指定するか、"-1"、または "infinite" のキーワードを指定すると無限にスクロールを繰り返します。loop属性の指定がない場合、初期値は "-1" のため永遠にスクロールを繰り返します。

loop属性で動きを指定した場合、behavior属性の値に "scroll" が指定されていると、指定された回数のスクロールをして画面から消えます。behavior属性の値に "slide" が指定されていると、指定された回数のスクロールをしてから表示域の端で止まったままの状態になります。behavior属性の値に "alternate" が指定されていると、「行く」で1回、「帰る」で1回とカウントされ指定された回数のスクロールをしてから表示域の端で止まったままの状態になります。

マーキーのスクロールする速さを指定

<marquee scrollamount="50">超高速スクロール</marquee>
<marquee scrolldelay="200">超低速スクロール</marquee>

scrollamount属性, scrolldelay属性はどちらもスクロールのスピード(速さ)を指定する属性です。

scrollamount属性は、一度に動かす移動距離間を指定する属性で、テキストや画像などの内容を一度に何ピクセル動かすかを設定します。値には整数を指定し、値が大きいほどスクロール速度は速くなりますが、カクカクとした動きになります。初期値は "6" です。

scrolldelay属性は、スクロールする内容の遅延時間を指定します。 値はミリ秒(1/1000秒)単位の整数で指定し、数が小さいほど速くなり、数が大きいほど遅くなります。初期値は "85" です。"100" で、100ミリ秒なので 0.1秒おきに scrollamount属性で指定された距離を移動します。Windows版Internet Explorer では scrolldelay属性の値が "60" 未満("1-59")の場合は、"1" でも "60" でも同じ 0.06秒おきに指定の距離を移動します。"60" 未満の値を指定する場合には、truespeed属性を組み合わせて、その値に "true" を指定する必要があります。

マーキーの背景色を指定

<marquee bgcolor="#000000"><font color="#FFFFFF">
マーキーの背景は黒で、文字は白に指定</font></marquee>

bgcolor属性は、マーキーのスクロールする領域に背景色を指定する属性です。値は RGB値、またはカラーネームを指定します。Netscape では無効、Internet Explorer, Firefox, Opera は対応しています。

マーキーのサイズ指定

<marquee width="400" height="50">横400px 縦50px</marquee>

width属性, height属性はマーキーのスクロールする範囲のサイズ(領域)を指定する属性です。値は整数(ピクセル数で解釈)、または表示域の横幅、縦幅に対するパーセンテージ値(%)で指定します。Firefox では無効で、Internet Explorer, Netscape, Opera は対応しています。

マーキー範囲の余白(マージン)指定

<marquee hspace="20" vspace="20" width="200" height="30">
余白があるとよく目立つ</marquee>

hspace属性, vspace属性はマーキーのスクロールする範囲の周辺に余白を指定します。hspace属性が左右の余白、vspace属性が上下の余白を、いずれも整数(ピクセル数で解釈)で指定します。指定がない場合、インライン内容にある前後のテキストはマーキー部分とくっついた形で表示されます。マーキーがスクロールする範囲と、周辺のテキストとの間に余白を指定することでマーキー部分をより目立たせることが可能です。

hspace属性, vspace属性の両方に対応しているのは Windows版Internet Explorer のみです。Macintosh版Internet Explorer 5 は vspace属性で指定された上部の余白は無視され下部の余白のみ表示に反映されます。Netscape, Firefox, Opera は hspace属性, vspace属性に対応していません。

現在位置
  1. W3G
  2. XHTML
  3. HTML速習
  4. フォントとテキスト
ナビゲーション
ステータス情報
作者
上田 遼
公開
2005-08-02T15:24:21+09:00
更新
2008-12-29T04:27:06+09:00
URI
http://w3g.jp/xhtml/ref/font_text
検索