トップ > 初心者用HTML講座！ > テキストで遊ぼう

■　文字の大きさを変える

文字サイズは1→7の順に大きくなります。

<font size="1">文字サイズ1</font>
文字サイズ1

<font size="2">文字サイズ2</font>
文字サイズ2

<font size="3">文字サイズ3</font>
文字サイズ3

<font size="4">文字サイズ4</font>
文字サイズ4

■　大きい文字にする

標準の文字、<big>大きい文字</big>
標準の文字、大きい文字

■　小さい文字にする

標準の文字、<small>小さい文字</small>
標準の文字、小さい文字

■　太字にする

聖徳<b>太字</b>？
聖徳太字？

■　斜体にする

こっちは<i>斜体</i>
こっちは斜体

■　下線を入れる

大事なところに<u>アンダーライン</u>を引く
大事なところにアンダーラインを引く

■　取消線を入れる

<s>不細工な</s>個性的な顔立ちです
~~不細工な~~個性的な顔立ちです

■　強調文字にする

そんなとこ、わざわざ<strong>強調</strong>しなくても
そんなとこ、わざわざ強調しなくても

■　上付き文字にする

<sup>上付き</sup>文字、2m×2m＝4m<small><sup>2</sup></small>
^上付き文字、2m×2m＝4m²

■　下付き文字にする

<sub>下付き</sub>文字
_下付き文字

■　等幅フォントにする

<tt>等幅フォント</tt>
等幅フォント

■　フォントを指定する

フォント名はカンマ（,）で区切って優先順位をつけます。

<font face="Verdana,MS UI Gothic,MS ゴシック">第１希望、第２希望、第３希望・・・</font>
第１希望、第２希望、第３希望・・・

<font face="Times New Roman,MS 明朝">the meaning of peace</font>
the meaning of peace

■　文字の色を変える

<font color="#ff0000">RGB値</font>で指定
RGB値で指定

<font color="purple">カラーネーム</font>で指定
カラーネームで指定

■　見出しをつける

見出しタグを使うと、上下が１行空き、文字が太字になります。
見出しサイズは1→6の順に小さくなります。

<h1>見出しサイズ1</h1>

見出しサイズ1

<h3>見出しサイズ3</h3>

見出しサイズ3

<h6>見出しサイズ6</h6>

見出しサイズ6

■　見出しの位置を指定する

<h2 align="left">見出し位置左寄せ（デフォルト）</h2>

見出し位置左寄せ（デフォルト）

<h2 align="center">見出し位置中央（センタリング）</h2>

見出し位置中央（センタリング）

<h2 align="right">見出し位置右寄せ</h2>

見出し位置右寄せ

■　適用範囲を指定する

<span>タグは、単独では属性を持たないタグです。
スタイルシートで、スタイルの適用範囲を指定したいときなどに使います。

このように、<span>単独では何も変わりません</span>が、変わらないことで<span style="background-color:#dad;">スタイルが指定しやすく</span>なります。

このように、単独では何も変わりませんが、変わらないことでスタイルが指定しやすくなります。

■　文字にカーソルをあてると説明を表示する

titleプロパティは、<span>タグ以外のタグにも使うことができます。
例えば、<a>タグに使うとリンク先の説明を入れることができます。

次の作品のうち、トム・ハンクスがアカデミー賞主演男優賞を取っていないのはどれ？<br>
1.<span title="ブー！不正解です">フィラデルフィア</span><br>
2.<span title="ブー！不正解です">フォレストガンプ</span><br>
3.<span title="ピンポ～ン♪正解です">プライベート・ライアン</span>

次の作品のうち、トム・ハンクスがアカデミー賞主演男優賞を取っていないのはどれ？
1.フィラデルフィア
2.フォレストガンプ
3.プライベート・ライアン

<a href="http://park16.wakwak.com/~html-css/" target="_top" title="トップページへ戻ります">HOME</a>
HOME

■　文字の大きさを変える [スタイルシート]

<div style="font-size:3mm;">この文字サイズは3mmです。</div>

この文字サイズは3mmです。

<div style="font-size:15px;">この文字サイズは15ピクセルです。</div>

この文字サイズは15ピクセルです。

<div style="font-size:90%;">大きさ（長さ）を表す単位には、mm、cm、in、pt、pc、px、ex、em、% があります。</div>

大きさ（長さ）を表す単位には、mm、cm、in、pt、pc、px、ex、em、% があります。

<div style="font-size:larger;">親要素で指定した大きさより大きくしたい場合は larger を使います。</div>

親要素で指定した大きさより大きくしたい場合は larger を使います。

<div style="font-size:smaller;">逆に小さくしたい場合は smaller を使います。</div>

逆に小さくしたい場合は smaller を使います。

<div style="font-size:x-small;">xx-small、x-small、small、medium、large、x-large、xx-large の順でだんだん<span style="font-size:large;">大きく</span>なります。</div>

xx-small、x-small、small、medium、large、x-large、xx-large の順でだんだん大きくなります。

<div style="font-size:midium;">midium はデフォルトで標準の大きさです。</div>

midium はデフォルトで標準の大きさです。

■　文字の太さを変える [スタイルシート]

ブラウザ、親要素の指定、フォントによって見え方が異なります。

これが bold です。

<div style="font-weight:light;">これが light です。</div>

これが light です。

<div style="font-weight:bolder;">これが bolder です。</div>

これが bolder です。

<div style="font-weight:lighter;">これが lighter です。</div>

これが lighter です。

これが 100 です。

<div style="font-weight:400;">これが 400 です。400 が標準です。</div>

これが 400 です。400 が標準です。

これが 700 です。

■　斜体にする [スタイルシート]

<div style="font-style:italic;">斜めになってるでしょ。</div>

斜めになってるでしょ。

■　下線を入れる [スタイルシート]

<div>二人に大切なのは<span style="text-decoration:underline;">互いに信じ合うこと</span>です</div>

二人に大切なのは互いに信じ合うことです。

■　下線を入れる(2) [スタイルシート]

ボックスの枠線を設定する方法を応用してテキストにラインを入れています。

<div>二人に大切なのは<span style="border-bottom:double 3px #f00;">互いに信じ合うこと</span>です</div>

二人に大切なのは互いに信じ合うことです。

■　上線を入れる [スタイルシート]

<div><span style="text-decoration:overline;">上線</span>ってどんなときに使うの？</div>

上線ってどんなときに使うの？

■　上線を入れる(2) [スタイルシート]

ボックスの枠線を設定する方法を応用してテキストにラインを入れています。

<div><span style="border-top:dotted thin blue;">上線</span>ってどんなときに使うの？</div>

上線ってどんなときに使うの？

■　上下線を入れる [スタイルシート]

<div><span style="text-decoration:overline underline;">上下線</span>ってどんなときに使うの？</div>

上下線ってどんなときに使うの？

■　上下線を入れる(2) [スタイルシート]

ボックスの枠線を設定する方法を応用してテキストにラインを入れています。

<div><span style="border-top:dotted thin blue;border-bottom:dotted thin red;">上下線</span>ってどんなときに使うの？</div>

上下線ってどんなときに使うの？

■　取消線を入れる [スタイルシート]

<div>画像を貼る。リンクを<span style="text-decoration:line-through;">貼る</span>張る。</div>

画像を貼る。リンクを貼る張る。

■　文字に装飾をしない [スタイルシート]

<a href="../index.html" target="_top" style="text-decoration:none;">HOME へ戻る</a>
HOME へ戻る

■　スモールキャップ [スタイルシート]

フォントサイズを指定していると、指定したサイズで表示されます。

<div>Don't start now</div>

Don't start now

<div style="font-variant:small-caps;">Don't start now</div>

Don't start now

■　フォントを指定する [スタイルシート]

フォント名、フォントファミリー名はカンマ（,）で区切って優先順位をつけます。

<div style="font-family:'Times New Roman',serif;">フォントファミリーは serif です。フォント名にスペースが入る場合は、シングルクォーテーション（'）で区切ります。</div>

フォントファミリーは serif です。フォント名にスペースが入る場合は、シングルクォーテーション（'）で区切ります。

<div style="font-family:Arial,Verdana,sans-serif;">フォントファミリーは sans-serif です。</div>

フォントファミリーは sans-serif です。

<div style="font-family:cursive;">フォントファミリーは cursive です。</div>

フォントファミリーは cursive です。

<div style="font-family:fantasy;">フォントファミリーは fantasy です。</div>

フォントファミリーは fantasy です。

<div style="font-family:monospace;">フォントファミリーは monospace です。</div>

フォントファミリーは monospace です。

■　文字の色を変える [スタイルシート]

<div style="color:#ff0000;">文字の色を「#rrggbb」で指定する方法。</div>

文字の色を #rrggbb で指定する方法。

<div style="color:lime;">文字の色を「カラーネーム」で指定する方法。</div>

文字の色を「カラーネーム」で指定する方法。

<div style="color:#00f;">文字の色を「#rgb」で指定する方法。</div>

文字の色を「#rgb」で指定する方法。

<div style="color:rgb(255,0,255);">文字の色を「rgb(n,n,n)」で指定する方法。</div>

文字の色を「rgb(n,n,n)」で指定する方法。

<div style="color:rgb(0%,100%,100%);">文字の色を「rgb(n%,n%,n%)」で指定する方法。</div>

文字の色を「rgb(n%,n%,n%)」で指定する方法。

■　テキストの背景色を指定する [スタイルシート]

<p style="background-color:#fbf;">スタイルシート（CSS）を使えば、テキストにも<span style="color:white;background-color:red;">背景色</span>をつけることができます。</p>

スタイルシート（CSS）を使えば、テキストにも背景色をつけることができます。

投票数:17 平均点:5.88

この記事の1行目に飛ぶ

ページの基本構造

初心者用HTML講座！

スクロール(マーキー)で遊ぼう