TOPページ > 文字を修飾する(書体、色、大きさetc...)

文字を修飾する(書体、色、大きさetc...) 項目一覧

ブログでは、特に指定しなければ、別に作成してあるスタイルシートで設定してある文字の色、大きさ、書体で表示されます。 でも、部分的に色や大きさを変えて強調したい、修飾したい、など。ここでは、簡単に、一部分だけそれらの設定を変更する方法を紹介します。


2006年02月26日

文字の修飾方法を指定する

文字の修飾方法を指定します。

<タグ名 style="text-decoration:修飾方法">修飾する文字</タグ名>
  1. タグ名: <p>や<div>、<span>などが一般的ですが、他にも下記のタグが使用できます。
    ■ブロックタグ  bodyaddressblockquotedivdirdlformh1~h6menuolpreplaintexttableulxmp
    ■インラインタグ  abbigblinkcitecodeemfontiinputkbdssampselectsmallspanstrikestrongsubsuptdtextareattuvar
  2. 修飾方法: 下記のキーワードで指定できます。
    キーワード 修飾方法
    nonel 通常のまま    InternetExplorer3 Netscape4
    underline 下線を付ける   InternetExplorer3 Netscape4
    (Mac日本語の場合無効)
    overline 上線を付ける   InternetExplorer3
    line-through 取消線を付ける  InternetExplorer3 Netscape4
    blink 点滅させる    Netscape4

サンプルソースです。

この部分は、<span style="text-decoration:none">
何もしません。(none)</span><br>
この部分は、<span style="text-decoration:underline">
下線(underline)を付けます。</span><br>
この部分は、<span style="text-decoration:overline">
上線(oerline)を付けます。</span><br>
この部分は、<span style="text-decoration:line-through">
取消線(line-through)を付けます。</span><br>
この部分は、<span style="text-decoration:blink">
点滅(blink)させます。</span>

このソースを表示させると、次のようになります。

この部分は、何もしません。(none)
この部分は、下線(underline)を付けます。
この部分は、上線(oerline)を付けます。
この部分は、取消線(line-through)を付けます。
この部分は、点滅(blink)させます。

文字を点滅させる

<blink>タグを使って、文字を点滅させることができます。

Netscape2
<blink>点滅させる文字</blink>

という形式になります。InternetExplorerは対応していません。

サンプルソースです。

<blink>
InternetExplorerは対応していません。Netscapeでご覧のかたは、この文字が点滅していると思います。
</blink>

このソースを表示させると、次のようになります。

InternetExplorerは対応していません。Netscapeでご覧のかたは、この文字が点滅していると思います。

style指定で取消線を付ける方法もあります。→文字の修飾方法を指定する

2006年02月23日

ルビ(ふりがな)の位置揃えを指定する

<ruby>タグを使って文字にルビ(ふりがな)を付けて表示するときに、ふりがなの位置揃えをすることができます。

<ruby style="ruby-align:位置">~</ruby>

キーワード位置揃え
left右詰め
center中央揃え
right左詰め

という形式になります。サンプルソースです。

<ruby style="ruby-align:left">
スタイルシート
<rp>(</rp>
<rt>CSS</rt>
<rp>)</rp>
<ruby><br>

<ruby style="ruby-align:right">
スタイルシート
<rp>(</rp>
<rt>CSS</rt>
<rp>)</rp>
<ruby>

このソースを、<ruby>タグ対応のブラウザで見ると、次のように表示されます。

ruby_sample

一方、未対応のブラウザでは、

スタイルシート ( CSS )
スタイルシート ( CSS )

というふうに表示されます。

ルビ(ふりがな)の表示位置を指定する

<ruby>タグを使って文字にルビ(ふりがな)を付けて表示するときに、表示位置の指定をすることができます。

<ruby style="ruby-position:ルビの表示位置">~</ruby>

キーワードルビの表示位置
above文字の上部
inline文字と同行

という形式になります。サンプルソースです。

<ruby style="ruby-position:above">
爬虫類
<rp>(</rp>
<rt>はちゅうるい</rt>
<rp>)</rp>
<ruby><br>

<ruby style="ruby-position:inline">
爬虫類
<rp>(</rp>
<rt>はちゅうるい</rt>
<rp>)</rp>
<ruby>

このソースを、<ruby>タグ対応のブラウザで見ると、次のように表示されます。

ruby_sample
爬虫類 はちゅうるい

一方、未対応のブラウザでは、

爬虫類 ( はちゅうるい )
爬虫類 ( はちゅうるい )

というふうに表示されます。
ruby-position に inline を指定した場合の見え方は、<ruby>タグ未対応のブラウザと同じようになります。

文字にルビ(ふりがな)を付ける

<ruby>タグを使って、文字にルビ(ふりがな)を付けて表示することができます。

<ruby>ルビを付けたい文字<rt>ふりがな</rt><ruby>

という形式になります。ただし、Netscape は対応していません。<ruby>タグ未対応ブラウザに考慮して、対応していない場合の代替文字も指定したほうが良いでしょう。例えば次のように、<rp>タグで、括弧を付けて記述します。

<ruby>
ルビを付けたい文字
<rp>(</rp>
<rt>ふりがな</rt>
<rp>)</rp>
<ruby>

サンプルソースです。

<ruby>
爬虫類
<rp>(</rp>
<rt>はちゅうるい</rt>
<rp>)</rp>
<ruby>

このソースを、<ruby>タグ対応のブラウザで見ると、次のように表示されます。

ruby_sample

一方、未対応のブラウザでは、

爬虫類 ( はちゅうるい )

というふうに表示されます。

文章の一部にスタイルを適用する

<span>タグを使って、文章の一部にスタイルを適用することができます。

<span style="スタイル">文章</span>

という形式になります。複数のスタイルを指定するときは、;(セミコロン)で区切ります。</span>タグを抜けると、スタイルは元の状態に戻ります。

ここは、スタイル適用外です。
<span style="font-size:16px;background-color:blue;color:white;">
この部分は、フォントサイズ16ピクセル、背景色 青、文字色 白です。
</span>
ここは、スタイル適用外です。

このソースを表示させると、次のようになります。

ここは、スタイル適用外です。 この部分は、フォントサイズ16ピクセル、背景色 青、文字色 白です。 ここは、スタイル適用外です。

2006年02月14日

文字を等幅文字にする

文字を、等幅フォントで表示させることができます。等幅フォントとは、半角文字(英数文字)と日本語文字との文字幅の比率が1対2になります。見る側のブラウザに等幅フォントが設定されている必要があります。

<tt>
等幅フォント
Sample text
</tt>
普通フォント
Sample text

このソースを表示させると、次のようになります。お使いのブラウザが等幅フォントに対応していれば、上の2行は等幅フォントになっているのがご確認いただけると思います。

等幅フォント
Sample text
普通フォント
Sample text

2006年02月12日

文章の書体、サイズ、行の高さ、スタイルをまとめて指定する

文章の書体、サイズ、行の高さ、スタイルをまとめて指定することができます。

e3.gif n2.gif
<タグ名 style="font:イタリックや斜体の指定 スモールキャップスの指定 文字の太さ 文字の大きさ/行の高さ 書体">スタイルを指定する文字</タグ名>

というふうに、スペースで区切って指定内容を併記します。

  1. タグ名: <p>や<div>、<span>などが一般的ですが、他にも下記のタグが使用できます。 e3.gif n2.gif
    ■ブロックタグ  bodyaddressblockquotedivdirdlformh1~h6menuolpreplaintexttableulxmp
    ■インラインタグ  abbigblinkcitecodeemfontiinputkbdssampselectsmallspanstrikestrongsubsuptdtextareattuvar
  2. イタリックや斜体の指定: 下記のキーワードで指定できます。 e3.gif n2.gif
    キーワード 文字のスタイル
    normal 通常
    italic イタリック体
    oblique 斜体
  3. スモールキャップスの指定: 下記のキーワードで指定できます。 e3.gif
    キーワード 文字のスタイル
    normal 通常
    small-caps スモールキャピタル
  4. 文字の太さ: 下記のキーワードまたは数値で指定できます。 e3.gif n2.gif
    キーワード 文字の太さ
    normal 通常
    bold 太字
    bolder より太く
    lighter より細く
    数値
    100(細い)~900(太い)
    ※100刻みで指定
  5. 文字の大きさ: 文字の大きさは、下記の絶対サイズ、相対サイズまたはキーワードから指定することができます。 e3.gif n2.gif
    絶対
    サイズ
    意味
    in インチ( 1 in = 25.4 mm )
    cm センチメートル
    mm ミリメートル
    pt ポイント( 1 pt = 1/72 in)
    pc パイカ( 1 pc = 12 pt )
    px ピクセル(表示上の 1 ドット幅)
    相対
    サイズ
    意味
    em 基準書体の文字の高さ
    ex 基準書体の文字 x の高さ
    % 基準書体のサイズに対する百分率
    ※正確にはデバイス依存の相対サイズ
    絶対サイズ
    キーワード
    文字の大きさ
    xx-small 超特小
    x-small 特小
    small
    medium 標準
    xx-large 超特大
    x-large 特大
    large
    相対サイズ
    キーワード
    文字の大きさ
    smaller より小さく
    larger より大きく
  6. 行の高さ (→詳しくはこちら): 行の高さは、下記の絶対サイズまたは相対サイズから指定できます。 e3.gif n2.gif
    絶対
    サイズ
    意味
    in インチ( 1 in = 25.4 mm )
    cm センチメートル
    mm ミリメートル
    pt ポイント( 1 pt = 1/72 in)
    pc パイカ( 1 pc = 12 pt )
    px ピクセル(表示上の 1 ドット幅)
    相対
    サイズ
    意味
    em 基準書体の文字の高さ
    ex 基準書体の文字 x の高さ
    % 基準書体のサイズに対する百分率
    数字のみ 基準書体のサイズに対する倍率
    ※正確にはデバイス依存の相対サイズ
  7. 書体名 (→詳しくはこちらe3.gif n2.gif
    ' Osaka ' , ' 極細明朝 '
    というふうに、' (シングルクォート)で囲った上に、,(カンマ)で区切って複数指定することができます。これは、ブラウザのシステムが対応していない場合に、代わりに表示する書体を指定するためです。

続きを読む "文章の書体、サイズ、行の高さ、スタイルをまとめて指定する" »

2006年02月01日

文章の書体を指定する(スタイル指定)

タグ内で style指定することで、文章の書体(フォント)を指定することができます。

InternetExplorer3 Netscape4
<タグ名 style="font-family:書体名">書体を指定する文章</タグ名>
  1. タグ名: <p>や<div>、<span>などが一般的ですが、他にも下記のタグが使用できます。
    ■ブロックタグ  bodyaddressblockquotedivdirdlformh1~h6menuolppreplaintexttableulxmp
    ■インラインタグ  abbigblinkcitecodeemfontiinputkbdssampselectsmallspanstrikestrongsubsuptdtextareattuvar
  2. 書体名:書体名を指定します。
    ' Osaka ' , ' 極細明朝 '
    というふうに、' (シングルクォート)で囲った上に、,(カンマ)で区切って複数指定することができます。これは、ブラウザのシステムが対応していない場合に、代わりに表示する書体を指定するためです。

サンプルソースです。

<p style="font-family:'細明朝体','MS 明朝'">
この段落は細明朝体、システムが対応していない場合はMS 明朝。</p>
<div style="font-family:'Trebuchet MS','Verdana'">
この段落はTrebuchet MS、システムが対応していない場合はVerdana。</div>

このソースを表示させると、次のようになります。

この段落は細明朝体、システムが対応していない場合はMS 明朝。

この段落はTrebuchet MS、システムが対応していない場合はVerdana。

書体のサンプルは、こちらをご覧ください。

段落を指定する

<p>タグ、<div>タグを使って、段落を指定することができます。

e3.gif n2.gif
<p>段落文章</p>
<div>
段落文章</div>

というふうにタグで囲まれた範囲が、1つの段落として表示されます。

<p>タグの場合、上下にマージン(余白)が取られるため段落の前後に空白が入ります。、<div>タグの場合マージンが取られないため前後に空白は入りません。

普通の行です。<br>ここは、タグで囲っていません。
<p>ここは、一つ目の段落です。<br>
pタグで囲っています。</p>

<p>ここは、二つ目の段落です。<br>
pタグで囲っています。</p>

<div>ここは、三つ目の段落です。<br>
divタグで囲っています。</div>

<div>ここは、四つ目の段落です。<br>
divタグで囲っています。</div>

普通の行です。<br>ここも、タグで囲っていません。

というソースを表示させると、次のようになります。

普通の行です。
ここは、タグで囲っていません。

ここは、一つ目の段落です。
pタグで囲っています。

ここは、二つ目の段落です。
pタグで囲っています。

ここは、三つ目の段落です。
divタグで囲っています。
ここは、四つ目の段落です。
divタグで囲っています。
普通の行です。
ここも、タグで囲っていません。

2006年01月26日

文字をイタリック/斜体にする

文字をイタリックで表示することができます。

InternetExplorer3 Netscape2
<i>イタリック体にする文字</i>

サンプルソースです。

食間とは、<i>食後2時間後くらい</i> のことです。

表示すると、こうです。

食間とは、食後2時間後くらい のことです。

続きを読む "文字をイタリック/斜体にする" »

文字の書体を指定する(専用タグ)

<font>タグのfaceオプションで、部分的に文字の書体を変えることができます。

InternetExplorer3 Netscape3
<font face="書体名">書体を指定する文字</font>
  • 書体名:書体名を指定します。カンマで区切って複数の書体を指定することができます。これは見る側のシステムに指定した書体がない場合、代わりに表示する書体として使用されます。

サンプルソースです。

次の文字は、
<font face="HGS創英角ポップ体,Courier New">HGS創英角ポップ体、なければCourier New</font>
で表示されます。

表示させるとこんな感じです。お使いのブラウザが対応していない書体の場合、無視されます。

次の文字は、 HGS創英角ポップ体、なければCourier New で表示されます。

見る側のシステムが指定した書体に対応していない場合、指定は無視されます。また、Netscape では書体名に日本語を指定すると無視(無効扱い)されます。

書体サンプルは、下記をご覧ください。

続きを読む "文字の書体を指定する(専用タグ)" »

文字に下線をつける(アンダーライン)

文章の一部に下線(アンダーライン)を表示することができます。

InternetExplorer3 Netscape2
<u>下線を付ける文字</u>

というふうに記述します。サンプルソースです。

昨日は<u>第4火曜日</u>で、伊勢丹が1割引だった。

表示すると、こうです。

昨日は第4火曜日で、伊勢丹が1割引だった。

style指定で取消線を付ける方法もあります。→文字の修飾方法を指定する

文字を見え消しにする(取消線)

文章の一部を見え消し(取消線)にして表示することができます。

<s>取消線を付ける文字</s> InternetExplorer3Netscape2
<strike>取消線を付ける文字</strike> InternetExplorer3Netscape3
<del>取消線を付ける文字</del> InternetExplorer4

サンプルソースです。

sタグで<s>取消線を付けます。 </s><br>
strikeタグで<strike>取消線を付けます。 </strike><br>
delタグで<del>取消線を付けます。 </del>

このソースを表示すると、次のようになります。

sタグで取消線を付けます。
strikeタグで取消線を付けます。
delタグで取消線を付けます。

style指定で取消線を付ける方法もあります。→文字の修飾方法を指定する

2006年01月25日

文字を強調する

文字を強調するタグに、<em>と<strong>があります。

InternetExplorer3 Netscape2
<em>強調する文字</em>
<strong>より強調する文字</strong>

という形式になります。どちらも『強調する』というタグなので、どう強調されるかはブラウザにおまかせ、といった感じですが、だいたいは少しフォントが大きく表示されたり、太字で表されるようです。

昨日は第4火曜日で、<em>伊勢丹が1割引</em>だった。<br>
でもきっと、<strong>いつものマルエツと同じくらい</strong>かも知れない。

いまお使いのブラウザでは、こう表示されます

昨日は第4火曜日で、伊勢丹が1割引だった。
でもきっと、いつものマルエツと同じくらいかも知れない。

文字の太さを指定する

文字の太さを指定することができます。

InternetExplorer3 Netscape4
<タグ名 style="font-weight:文字の太さ">太さを指定する文字</タグ名>
  1. タグ名: <p>や<div>、<span>などが一般的ですが、他にも下記のタグが使用できます。
    ■ブロックタグ  bodyaddressblockquotedivdirdlformh1~h6menuolpreplaintexttableulxmp
    ■インラインタグ  abbigblinkcitecodeemfontiinputkbdssampselectsmallspanstrikestrongsubsuptdtextareattuvar
  2. 文字の太さ: 下記のキーワードまたは数値で指定できます。
    キーワード 文字の太さ
    normal 通常
    bold 太字
    bolder より太く
    lighter より細く
    数値
    100(細い)~900(太い)
    ※100刻みで指定

サンプルソースです。

<div style="font-weight:normal">
この文字は、normal(普通)です。</div>
<div style="font-weight:bold">

この文字は、bold(太字)です。</div>
<div style="font-weight:bolder">

この文字は、bolder(より太く)です。</div>
<div style="font-weight:lighter">

この文字は、lighter(より細く)です。</div>
<hr>
<div style="font-weight:100"> この文字は、太さ100です。</div>
<div style="font-weight:300">
この文字は、太さ300です。</div>
<div style="font-weight:500">
この文字は、太さ500です。</div>
<div style="font-weight:700">
この文字は、太さ700です。</div>
<div style="font-weight:900">
この文字は、太さ900です。</div>

このソースを表示させると、次のようになります。

この文字は、normal(普通)です。
この文字は、bold(太字)です。
この文字は、bolder(より太く)です。
この文字は、lighter(より細く)です。

この文字は、太さ100です。
この文字は、太さ300です。
この文字は、太さ500です。
この文字は、太さ700です。
この文字は、太さ900です。

デフォルトの設定が通常あまり太くありませんから、細くする指定をしても違いがわかりにくいかも知れません。

文字を太字にする

文章で部分的に強調したいとき、一番短いタグで簡単にできるのがこれですね。

InternetExplorer3 Netscape2
<b>太字にする文章</b>

サンプルソースです。

昨日は第4火曜日で、<b>伊勢丹が1割引</b>だった。

表示すると、こうなります。

昨日は第4火曜日で、伊勢丹が1割引だった。

太さを指定して太字にする方法もあります。 →文字の太さを指定する

上付き/下付き文字にする

<sup>タグを使えば、文字を上付きにして表示することができます。

InternetExplorer3 Netscape2
<sup>上付きにする文字</sup>
<sub>下付きにする文字</sub>

サンプルソースです。

上付きサンプル<sup>(注1)</sup>です。

上付きサンプル<sub>(注1)</sub>です。

このソースを表示させると、次のようになります。

上付きサンプル(注1)です。

上付きサンプル(注1)です。

文字の色を変える

文字の大きさを変えたい時は、<font>タグのcolor指定が便利です。

IntertetExplorer3 Netscape2
<font color="色番号または色名称">色を変える文字</font>

という形式になります。色は、『 #008000 』などの、16進数表記または色名称で指定します。
HTML4.0で定義されているWEB基本カラー16色以外では、ブラウザによっては近似色に統合されて表示される場合もあります。またこの場合、16進数表記のほうが安全です。

先週の土曜日に、<font color="#008000">秋葉原の電気街</font>へ行きました。

これをブログの投稿欄にそのまま入力すると、

先週の土曜日に、秋葉原の電気街へ行きました。

こんなふうに表示されます。

続きを読む "文字の色を変える" »

文字を一段大きく/小さくする

他の文字より少し大きく、または小さくしたいというときは<big>タグや<small>タグといった専用タグが用意されています。

e3.gif n2.gif
<big>一段大きくする文字</big>
<small>
一段小さくする文字</small>

サンプルソースです。

先週の日曜日に、<big>東京ディズニーランド</big>へ行きました。 <br>
入り口では、<small>たいへん混雑</small>していました。

表示は、こんな感じです。

先週の日曜日に、東京ディズニーランドへ行きました。
入り口では、たいへん混雑していました。


<font>タグのサイズオプションで指定することもできます。

e3.gif n2.gif
<font size="+1">一段大きくする文字</font>
<font size="-1">
一段小さくする文字</font>

サンプルソースです。

先週の日曜日に、<font size="+1">東京ディズニーランド</font>へ行きました。 <br>
入り口では、<font size"-1">たいへん混雑</font>していました。

表示は、こんな感じです。

先週の日曜日に、東京ディズニーランドへ行きました。
入り口では、たいへん混雑していました。

周囲の文字との違いがわかりにくい場合は、『 +1 』、『 -1 』の数字を、『 +2 』、『 -2 』とか、『 +3 』、『 -3 』などとするとよいでしょう。

文字の大きさを指定する

文字の大きさを変えたい時は、style指定が便利です。

e3.gif n4.gif
<タグ名 style="font-size:文字の大きさ">大きさを指定する文字</タグ名>
  1. タグ名: <p>や<div>、<span>などが一般的ですが、他にも下記のタグが使用できます。
    ■ブロックタグ  bodyaddressblockquotedivdirdlformh1~h6menuolpreplaintexttableulxmp
    ■インラインタグ  abbigblinkcitecodeemfontiinputkbdssampselectsmallspanstrikestrongsubsuptdtextareattuvar
  2. 文字の大きさ: 文字の大きさは、下記の絶対サイズ、相対サイズまたはキーワードから指定することができます。
    絶対
    サイズ
    意味
    in インチ( 1 in = 25.4 mm )
    cm センチメートル
    mm ミリメートル
    pt ポイント( 1 pt = 1/72 in)
    pc パイカ( 1 pc = 12 pt )
    px ピクセル(表示上の 1 ドット幅)
    相対
    サイズ
    意味
    em 基準書体の文字の高さ
    ex 基準書体の文字 x の高さ
    % 基準書体のサイズに対する百分率
    ※正確にはデバイス依存の相対サイズ
    絶対サイズ
    キーワード
    文字の大きさ
    xx-small 超特小
    x-small 特小
    small
    medium 標準
    large
    x-large 特大
    xx-large 超特大
    相対サイズ
    キーワード
    文字の大きさ
    smaller より小さく
    larger より大きく

例えば下記の文で、『東京ディズニーランド』を 18ピクセルの大きさで表示するとすると、

先週の日曜日に、<span style="font-size:18px;">東京ディズニーランド</span>へ行きました。

こんな感じが一番使いやすいと思います。これをブログの投稿欄にそのまま入力すると、こんなふうに部分的に文字の大きさを変えることができます。

先週の日曜日に、東京ディズニーランドへ行きました。

各キーワードで指定した場合のサンプルはこちら。

超特小xx-smallです。
特小x-smallです。
小smallです。
標準mediumです。
大largeです。
特小x-largeです。
超特大xx-largeです。
より小さくsmaller(相対サイズ)です。
より大きくlargeer(相対サイズ)です。

ソースは、次のようになっています。

<div style="font-size:xx-small">超特小xx-smallです。</div>
<div style="font-size:x-small">
特小x-smallです。</div>f
<div style="font-size:small">
小smallです。</div>
<div style="font-size:medium">
標準mediumです。</div>
<div style="font-size:large">
大largeです。</div>
<div style="font-size:x-large">
特小x-largeです。</div>
<div style="font-size:xx-large">
超特大xx-largeです。</div>
<div style="font-size:smaller">
より小さくsmaller(相対サイズ)です。</div>
<div style="font-size:larger">
より大きくlargeer(相対サイズ)です。</div>

続きを読む "文字の大きさを指定する" »