フォントとテキスト

これから紹介する font要素は、テキストの色や書体、大きさを容易に変更できるので一見、非常に便利です。しかし、font要素及び、これに指定できる size属性, color属性, face属性が W3C の策定した HTML の仕様において使用することが推奨されていません。

何故、こんなに便利な機能が非推奨に定められているのか。それには次のような理由があります。

  • フォントの書体が指定されていても等幅文字(固定幅文字)しか扱えない、または表示できない環境では無意味です。
  • フォントの色が指定されていても白黒でしか表示できない環境では無意味です。
  • フォントのサイズが視覚的に大きくても小さくても音声出力・点字出力などの非視覚環境では無意味です。

このように環境によっては、font要素で指定された属性を再現する方法はありません。つまり、色やサイズなどを表現できない環境(コンピュータ)での代替方法がないということであり、環境に強く依存するものであることがわかります。

また、font要素はユーザスタイルシート(ブラウザに内臓されている機能で、ユーザが自分にとって適した状態で観覧できるようにウェブページに被せるフィルターのようなもの)との相性を大変悪くする方に影響します。たとえば、色覚異常の障害をもつユーザはユーザスタイルシートで自分が良く見える色に変更するために、それら無数の色指定に対して代替色を指定していかなければならなくなります。

font要素は制作目線では一見便利な機能のようであっても、環境に強く依存するものであり、他方から見れば融通の利かない不便な要素でしかありません。そのため font要素、及びその全ての属性が非推奨に定められており、その代替として CSS を使うことが推奨されています。CSSを使うことで、文書の見栄え(プレゼンテーション)が整えられるだけでなく、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" になります。

また Internet Explorer にしか対応していませんが、"<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要素の場合はあくまでも数式や化学式、フランス語などを示すための要素であるため、それらに該当する場合は代替手段を用いるのではなく素直に sup要素, sub要素をそのまま使った方が良いでしょう。

登場要素の詳解

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

<p>発売日は<del>2005年9月4日</del><ins>2005年9月14日</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属性で指定した略語のもととなる単語や語句がツールチップとして表示されます。なお、Internet Explorer 6 は abbr要素に対応しておらず、Internet Explorer 7 より対応しています。abbr要素, acronym要素内のテキストは、Internet Explorer以外では点線の下線付きで表示します。Internet Explorer 7以上はabbr要素, acronym要素にデフォルトでは下線を表示する設定になっていないため下線は引かれません。

引用・参照元を示す

<cite>HTML 4.01 仕様書</cite>によれば...

cite要素は出典元や引用元など他のリソース(情報資源)の参照を明示するインライン要素です。cite要素は引用元や他のリソースの参照を示すのに使います。視覚ブラウザでは要素内のテキストはイタリック体(斜体)表示になります。

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

<code>var a = 0;</code>

code要素は要素内の文字列がコンピュータのプログラムコードであることを示すインライン要素です。視覚ブラウザでは要素内の文字列が等幅フォント(固定幅フォント)で表示されます。たとえば、情報技術の解説などを扱うウェブページではソースコードを示すために code要素が使用されます。テキストを等幅フォントで表示させたい場合には 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要素と同様に情報技術の解説を扱っているサイト等でソースコードを示すために使用することになります。視覚ブラウザでは要素内のテキストはイタリック体(斜体)表示になります。テキストを等イタリックで表示させたいだけの場合には CSS の font-familyプロパティに等幅フォントを指定することでも代替可能です。

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

<samp>ERROR MESSAGE: ... </samp>

samp要素はプログラムやスクリプトの出力結果であることを示すインライン要素です。 「例:"このプログラムを実行すると<samp>ERROR MESSAGE</samp>を表示します"」のように使用します。視覚ブラウザでは要素内のテキストは等幅フォント(固定幅フォント)表示になります。テキストを等幅フォントで表示させたいだけの場合には CSS の font-familyプロパティに等幅フォントを指定することでも代替可能です。

登場要素の詳解

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

<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 と順序良く適切なマーク付けが行われるべきです。ただし、実際に1つの文書内で使用するのは h1, h2, h3, h4 ぐらいまでで、h5, h6 まで使わなければらないような場合は、内容を細かく分けすぎていることも考えられるので、文書そのものを複数に分けた方が適切な場合も考えられます。

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

登場要素の詳解

引用文の表示

<blockquote cite="urn:isbn:978-4774106632"><p>引用文</p></blockquote>
<q cite="https://w3g.jp/xhtml/ref/font_text">引用文</q>

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

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

引用を示す両要素には、引用文の引用元を示す cite属性があり、値には引用元の URI など元のリソース(情報資源)についての情報を記述します。URIとはリソースの所在(URL)や名前(URN)にあたります。書籍はWWW上において「所在(URL)」という概念で結びつけることができないので、リソースを永続的な名前によって識別するURNとしてISBNコードをcite="urn:isbn:ISBNコード"の形式で指定します。

関連

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

<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>" という形で使います。

仙人掌さぼてん

実際のサンプルです。ルビの表示(レンダリング)に対応していない場合は「仙人掌(さぼてん)」と表示されます。ルビのレンダリングには Firefox以外の主要ブラウザが対応しています。Firefoxのようにルビに対応していない環境で閲覧しているユーザへの配慮として rp要素を使って括弧(カッコ)を入れることで非対応時でも文字列の意味が通るようにしておくことができます(ルビのレンダリングに対応した環境であれば rp要素の内容は無視されるので弊害を起こすことはありません)。

なお、ルビ関連要素は1999年3月にリリースされた Internet Explorer 5.0 が独自機能として先取り実装したもので、せっかく紹介したのですが HTML4.01の規格ではルビを使用することができません。

関連

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

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

marquee要素は Internet Explorer 2.0 の時に独自に採用された機能ですが、現在では主要ブラウザとフィーチャーフォンの携帯電話端末のブラウザまで多くの UA が対応しており、属性にいたるまでほとんど全て対応しています。しかしながらHTML の正式な仕様には定義されていない要素であるため、現在はサポートしている UA であっても今後の対応がどのようになるかわかりません。blink要素のように今後サポートをやめるUAがでてきてもおかしくはありません。

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

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

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

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

direction属性の指定がない場合は、初期値の "left" が適用されます。

マーキーのパターン指定

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

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

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

behavior属性の指定がない場合は、初期値の "scroll" が適用されます。

マーキーのループ指定

<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属性で指定された距離を移動します。Internet Explorer では scrolldelay属性の値が "60" 未満("1-59")の場合は、"1" でも "60" でも同じ 0.06秒おきに指定の距離を移動します。"60" 未満の値を指定する場合には、truespeed属性を組み合わせて、その値に "true" を指定する必要があります。

マーキーの背景色を指定

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

bgcolor属性は、マーキーのスクロールする領域に背景色を指定する属性です。値は RGB値、またはカラーネームを指定します。

マーキーのサイズ指定

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

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

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

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

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

登場要素の詳解
Updated / Published