W3G

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

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

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

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

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

登場要素の詳解

• font要素
• basefont要素

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

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

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

登場要素の詳解

• big要素
• small要素

テキストの太字・斜体（視覚的強調）

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

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

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

登場要素の詳解

• b要素
• i要素

テキストの強調表示（論理的強調）

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

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

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

また、strong要素や em要素で強調された部分（キーワード）は、検索エンジンのロボットにおいても、この文書の中でどのキーワードが重要であるかをより明確に伝えるのにも役立つかもしれません。かと言って文章全体を囲んでしまうような使い方をすると、検索エンジンのロボットにはもちろん、非視覚環境のユーザにも文書内の一体どこが伝えたい部分なのかを認識・理解することはできません。strong要素や em要素のように具体的に意味をもつ要素は適切に使用してこそ、その効果を発揮できます。

登場要素の詳解

• em要素
• strong要素

テキストの等幅表示

<tt>等幅（テレタイプ）表示</tt>

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

登場要素の詳解

• tt要素

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

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

sup要素は文字を上付き文字（例：2²）で、sub要素は文字を下付き文字（例：H₂O）で表示します。

数式や化学式、フランス語などを示す場合に使用します。sup要素, sub要素ともに見た目を定義する要素であることに基づいているため、span要素をセレクタに CSS の vertical-alignプロパティで代替されていることがあるのですが、sup要素, sub要素の場合はあくまでも数式や化学式、フランス語などを示すための要素であるため、それらに該当する場合は代替手段を用いるのではなく素直に 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プロパティを使うことで代替することができます。

登場要素の詳解

• del要素
• ins要素
• s要素
• strike要素
• u要素

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

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

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

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

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

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

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

<var>$number</var>

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

登場要素の詳解

• abbr要素
• acronym要素
• cite要素
• code要素
• dfn要素
• kbd要素
• samp要素
• var要素

見出し（章・節・項の題名）の定義

<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属性は非推奨属性です。

登場要素の詳解

• h1-h6要素

引用文の表示

<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コード"の形式で指定します。

関連

• blockquote要素
• q要素
• ブロックレベル要素

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

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

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

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

登場要素の詳解

• 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の規格ではルビを使用することができません。

関連

• rb要素
• rbc要素
• rp要素
• rt要素
• rtc要素
• ruby要素

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

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

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

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

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

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

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

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

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

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

登場要素の詳解

• marquee要素