テキスト関係のタグ．こひつじの家

　テキスト関係のタグ

ホームページ作成の部屋－タグの使用法と使用例

　テキストを表示するために必要な，文字列の整形，文字の大きさや色の指定などに関するタグを集めてみました。

1．`<h>`	見出しを付ける
2．`<br>`	改行する
3．`<nobr>`	改行させない
4．`<pre>`	ソースの通りに表示する
5．`<blockquote>`	引用文を使う
6．`<font>`	文字の大きさや色を指定する
7．`<basefont>`	基準フォントを設定する
8．`<b> <i> <tt>`	文字スタイルの一時的変更
9．`<sub> <sup>`	下付き文字／上付き文字指定
10．`<big> <small>`	少し大きく／少し小さく
11．`<u> <s>`	アンダーライン／抹消線

記：2002-8-18

　1．見出しを付ける

<h☆>⇔</h☆>　　ブロック要素

このページのトップへ

　見出しを表記するためのタグです。
　☆には 1～6 の数値を与えます。h1 で最も大きな文字，h6で最も小さな文字となります。
　見出しは太字で表示します。

表示位置を指定する

　<h align="☆">　　　廃止予定

`☆＝left`	：左寄せする（デフォルト）
`☆＝center`	：センタリングする
`☆＝right`	：右寄せする

<h> の使用例

**ソース**
とは独立したものと考える必要があります。 <h3 align="center">3．交通規則と実情</h3> 　テレビで豊橋技術大学の研究ということで，一時停止をしない交差点のビデオを放映していた。「そこで一時停止する車は５％しかいない」とのことで，交通事故死亡者も出ているとのこと。しかし見ていると一時停止の標識のある道路の方が幅員が広い上に交通量がずっと多いではないか。規則が実情に合っていないと思う。規則が実情に合ってないのでは，交通規則や標識に対する権威も失われてしまう。

**Webページの表示**
とは独立したものと考える必要があります。 3．交通規則と実情　テレビで豊橋技術大学の研究ということで，一時停止をしない交差点のビデオを放映していた。「そこで一時停止する車は５％しかいない」とのことで，交通事故死亡者も出ているとのこと。しかし見ていると一時停止の標識のある道路の方が幅員が広い上に交通量がずっと多いではないか。規則が実情に合っていないと思う。規則が実情に合ってないのでは，交通規則や標識に対する権威も失われてしまう。

　2．改行する

 　　インライン要素

このページのトップへ

ソース上で改行しても，ブラウザ上では改行しません。
　改行するところには タグを置く必要があります。

 の使用例

**ソース**
ソースはここ→ で改行しています。ここ⇒`<br>`に改行用のタグを入れました。

**Webページの表示**
ソースはここ→ で改行しています。ここ⇒ に改行用のタグを入れました。

　3．改行させない

⇔</nobe>　　　廃止予定　　　インライン要素

このページのトップへ

長いテキストはウィンドウ等の右で自動的に改行されますが，と</nobe>の間にあるテキストは自動的には改行されません。
　と</nobe>の間であっても， タグのところでは改行します。

の使用例

**ソース**
中央本線の名古屋から木曽福島までの駅は次のとおりです。<br> <nobr>名古屋－金山－鶴舞－千種－大曽根－新守山－勝川－春日井－神領－高蔵寺－定光寺－古虎渓－多治見－土岐市－瑞浪－釜戸－武並－恵那－美乃坂本－中津川－<br>落合川－坂下－田立－南木曽－十二兼－野尻－大桑－須原－倉本－上松－木曽福島</nobr>

Webページの表示

中央本線の名古屋から木曽福島までの駅は次のとおりです。
名古屋－金山－鶴舞－千種－大曽根－新守山－勝川－春日井－神領－高蔵寺－定光寺－古虎渓－多治見－土岐市－瑞浪－釜戸－武並－恵那－美乃坂本－中津川－
落合川－坂下－田立－南木曽－十二兼－野尻－大桑－須原－倉本－上松－木曽福島

解説
　落合川の前に タグがあるので，その位置では改行しています。

　4．ソースの通りに表示する

<pre>⇔</pre>　　ブロック要素

このページのトップへ

　テキストエディタでソースを表示しているときとほぼ同じように，表示します。
　ソースで改行してあるところで改行します。
　半角スペースもそのまま半角スペースとして表示します
　プログラムソースなどをブラウザで表示するときに使います。

<pre>の使用例

ソース

最初は非常に簡単なプログラムです。
<pre>
#include 

main()   /* コンソールに出力する */
{
    printf("こんにちは！ 今日はよい天気ですね。\n");
}
</pre>
入力したらコンパイルしてみましょう。<br><br>

&lt;pre&gt;を使わないとき<br>
　｜＼＿＿／｜<br>
　｜　∥∥　｜<br>
　｜=●▼●=｜<br>
 ＝＝　人　＝＝<br>
 　　－－－<br>
<br>
&lt;pre&gt;を使ったとき<br>
<pre>
　｜＼＿＿／｜
　｜　∥∥　｜
　｜=●▼●=｜
 ＝＝　人　＝＝
 　　－－－
</pre>

**Webページの表示**
最初は非常に簡単なプログラムです。 #include main() /* コンソールに出力する */ { printf("こんにちは！今日はよい天気ですね。\n"); } 入力したらコンパイルしてみましょう。 <pre>を使わないとき　｜＼＿＿／｜　｜　∥∥　｜　｜=●▼●=｜＝＝　人　＝＝　　－－－ <pre>を使ったとき　｜＼＿＿／｜　｜　∥∥　｜　｜=●▼●=｜＝＝　人　＝＝　　－－－

解説
　<pre>タグを使用しているところでは改行のための タグが不要です。
　表示するときに，<pre>の前にあるテキストとの間と，</pre>の後にあるテキストとの間に，空白行が設けられます。
　ネコちゃんの文字絵では，<pre>タグを使用しない場合にはフォントの大きさが一定でないために形が崩れてしまっているのがわかります。
　< と >は，< と > を表示させるために特殊文字です。

　5．引用文を使う

<blockquote>⇔</blockquote>　　ブロック要素

このページのトップへ

文章中に引用文として表示させるときに使います。
　<blockquote>と</blockquote>の間にあるテキストについては，上下に空白行が設けられ，左右にもマージンが設けられます。

<blockquote>の使用例

**ソース**
公開講座のいくつかあるテーマのうちのひとつ，「超伝導を体験しよう」を紹介しましょう。 <blockquote> 　高温超伝導体は，科学的にも極めて注目度が高く，実現への期待も高い材料です。ここでは超伝導体の作成，実験，そして学内の最先端・分析装置を用いた原子レベルでの材料構造分析をして，物質科学研究の一端を体験しましょう。 </blockquote> 　受講テーマは第一希望を優先しますが，…

**Webページの表示**
公開講座のいくつかあるテーマのうちのひとつ，「超伝導を体験しよう」を紹介しましょう。　高温超伝導体は，科学的にも極めて注目度が高く，実現への期待も高い材料です。ここでは超伝導体の作成，実験，そして学内の最先端・分析装置を用いた原子レベルでの材料構造分析をして，物質科学研究の一端を体験しましょう。　受講テーマは第一希望を優先しますが，…

　6．文字の大きさや色を指定する

<font☆>⇔</font☆>　　　廃止予定　　　インライン要素

このページのトップへ

　文字の大きさや色，フォントの種類を指定するためのタグです。
　1 文字ごとの指定が可能です。
　タグを入れ子にすることができます。

　文字の大きさを指定する

　size="☆"
　size="±☆"

☆に数値を入れて指定します。
　文字の大きさは 1～7 までが有効で，数字が大きいほど文字も大きくなります。（デフォルトの大きさは 3 です）
　数値だけを入れて指定する方法を絶対指定といいます。

　数値の前に±を付けると，基準の大きさ±数値が文字の大きさとなります。
　　（基準の大きさ±数値が 1～7 の範囲に入っている必要があります）
　基準の大きさは<basefont>タグで指定しますが，指定しないときはデフォルトの 3 となります。

　数値の前に±を付けて指定する方法を相対指定といいます。
　相対指定を使えば，ページ全体の文字の大きさを変更したいときに，基準の大きさを変えるだけで簡単にできますので，一般に相対指定の方がよく用いられます。

　タグで指定した文字の大きさと画面に表示される文字の大きさは比例しません。表示される文字の大きさはブラウザの種類や設定，ディスプレイの種類や設定などによってもかなり変わります。

　文字の色を指定する

　color="☆"

［☆ ：色の指定］
　デフォルトは <body bgcolor> で設定した色になりますが，<body bgcolor> で設定していないときはブラウザで設定した色（たとえば黒）になります。

の使用例－ 1

sizeとcolor属性についての例です。上段がソース，下段がブラウザでの表示例です。

文字の大きさ＝1
文字の大きさ＝1

文字の大きさ＝2
文字の大きさ＝2

文字の大きさ＝3
文字の大きさ＝3

文字の大きさ＝4
文字の大きさ＝4

文字の大きさ＝5
文字の大きさ＝5

文字の大きさ＝6

文字の大きさ＝6

文字の大きさ＝7

文字の大きさ＝7

<basefont size="3">

文字の大きさ＝3－1＝2
文字の大きさ＝3－1＝2

文字の大きさ＝3＋2＝5
文字の大きさ＝3＋2＝5

では 小さい青字の中に 大きい赤字 を入れてみます。 どうですか。

では小さい青字の中に大きい赤字を入れてみます。どうですか。

解説
　で指定した文字の大きさと実際に表示されるサイズを見比べてみると，標準の大きさ±1の範囲（大きさ 2～4）では表示サイズの違いが比較的小さいことが分かります。

　最後の例ではタグが入れ子になっています。このような使い方ができますので，参考にしてください。

　文字の書体指定する

　face="☆"

　☆には書体の名前を入れます。
　ブラウザ（コンピュータ）が指定した書体に対応していないときは，ブラウザのデフォルト書体で表示されます。
　半角文字のカンマで区切って複数の書体を入力することもできます。その場合は先頭から順にブラウザに対応した書体を調べ，対応した書体があればそれで表示します。

の使用例－ 2

face属性についての例です。上段がソース，下段がブラウザでの表示例です。

　書体の名前は英字の大文字と小文字，さらには半角と全角も区別されますので，注意して入力する必要があります。

Computer science
Computer science

 Computer science
Computer science

Computer science
Computer science

Computer science
Computer science

Computer science
Computer science

Computer science
Computer science

Computer science
Computer science

Computer science
Computer science

Computer science
Computer science

Computer science
Computer science

Computer science
Computer science

Computer science
Computer science

明朝体という書体です
明朝体という書体です

行書体という書体です
行書体という書体です

江戸文字という書体です
江戸文字という書体です

江戸文字がなければ行書体，行書体もなければ明朝体で表示します
江戸文字がなければ行書体，行書体もなければ明朝体で表示します

　7．基準フォントを設定する

<basefont size="☆">　　　廃止予定　　　インライン要素

このページのトップへ

終了タグはありません。
　<body>～</body>において何度でも使用できます。
　☆に数値（1～7）を入れて文字の大きさ指定します。
　<basefont>によって指定した文字の大きさは，<table>～</table>間では無視されます。

　<basefont>タグは，すでに NN6.0 以降や Mozilla では機能しなくなっています。

　8．文字スタイルの一時的変更

 <tt>　　インライン要素

このページのトップへ

`<b>⇔</b>`	太字指定
`<i>⇔</i>`	斜体文字（イタリック体）指定
`<tt>⇔</tt>`	等幅フォント指定

 <tt>の使用例

上段がソース，下段がブラウザでの表示例です。

The <b>Internet</b> is a great way for seaching a new job.
<b>インターネット</b>は仕事探しに大いに役立ちます。

The Internet is a great way for seaching a new job.
インターネットは仕事探しに大いに役立ちます。

The Internet is a great way for <i>seaching a new job</i>.
インターネットは<i>仕事探し</i>に大いに役立ちます。

The Internet is a great way for seaching a new job.
インターネットは仕事探しに大いに役立ちます。

<tt>The Internet is a great way for seaching a new job.
インターネットは仕事探しに大いに役立ちます。</tt>

The Internet is a great way for seaching a new job. インターネットは仕事探しに大いに役立ちます。

<tt>
The Internet is a <i>great way for <b>seaching a new job</b></i>.
インターネットは<i><b>仕事探し</b>に大いに役立ちます</i>。
</tt>

The Internet is a great way for seaching a new job. インターネットは仕事探しに大いに役立ちます。

解説
　最後の例でもわかるように，これらのタグは入れ子にすることができます。

　9．下付き文字／上付き文字指定

 　　インライン要素

このページのトップへ

`<sub>⇔</sub>`	下付き文字指定
`<sup>⇔</sup>`	上付き文字指定

 の使用例

上段がソース，下段がブラウザでの表示例です。

2H<sub>2</sub>＋O<sub>2</sub>　→　2H<sub>2</sub>O

2H₂＋O₂　→　2H₂O

6x<sup>3</sup>－7x<sup>2</sup>－30x－9 ＝
（2x＋3）（x－3）（3x＋1）

6x³－7x²－30x－9 ＝（2x＋3）（x－3）（3x＋1）

3<sup>4<sup>2</sup></sup>＝43,046,721

3^4²＝43,046,721

解説
　やが使われた時の文字よりも1段階小さい文字で表示されます。最後の例のように，入れ子にすることもできます。

　10．少し大きく／少し小さく

<big> 　　インライン要素

このページのトップへ

`<big>⇔</big>`	少し大きくする
`<small>⇔</small>`	少し小さくする

<big> の使用例

上段がソース，下段がブラウザでの表示例です。

文字を<big>少しだけ大きくしたり</big>，
ときには<small>少しだけ小さくしたり</small>します。

文字を少しだけ大きくしたり，ときには少しだけ小さくしたりします。

解説
　bigやsmallが使われた時の文字よりも1段階大きい文字，あるいは小さい文字で表示されます。

　11．アンダーライン／抹消線

 <s>　　　廃止予定　　　インライン要素

このページのトップへ

`<u>⇔</u>`	アンダーラインを引く
`<s>⇔</s>`	抹消線を引く

しばらくお待ちください

 <s>の使用例

上段がソース，下段がブラウザでの表示例です。

ワープロが登場した頃には<u>アンダーライン</u>や
網かけがよく使われました。

ワープロが登場した頃にはアンダーラインや網かけがよく使われました。

開店記念セール！　平常価格 <s>98,000 円</s> ⇒ 84,900 円

開店記念セール！　平常価格 ~~98,000 円~~ ⇒ 84,900 円

解説
　アンダーラインはリンクアンカーに付けるのが一般的ですので，あまり使用しない方がよいでしょう。強調する部分は太字にするか色を変えることが推奨されています。

このページのトップへ

3． 交通規則と実情

3．交通規則と実情