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

文字を修飾する(書体、色、大きさなど...)

ブログでは、特に指定しなければ、別に作成してあるスタイルシートで指定してある文字の色、大きさ、書体で表示されます。

でも、部分的に色や大きさを変えて強調したい、修飾したい、など。ここでは、簡単なHTMLタグやソースで、部分的に表示の設定を変更する方法を紹介します。

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

ホームページやブログなどのウェブサイトで 文字の大きさを指定するには、FONTタグのsizeオプションで指定する方法があります。この場合1(小)~7(大)段階の...

文字の修飾方法を指定します。 <タグ名 style="text-decoration:修飾方法">修飾する文字</タグ名&g...

ホームページやブログなどのウェブサイトで文章を表示させる際に、 簡単なHTMLタグで 点滅させることができます。BLINKタグを使います。 <blink&...

ホームページやブログなどのウェブサイトに文章や文字を表示する際には 、RUBYタグを使って文字にルビ(ふりがな)を付けることができますが、このときに ふりがなの...

ホームページやブログなどのウェブサイトに文字を表示する際には <ruby>タグを使って文字にルビ(ふりがな)を付けてることができますが、この表示位置...

ホームページやブログなどのウェブサイトで文字を表示する際に、ルビ(ふりがな)を付けることができます。<ruby>タグを使います。 <ruby&...

ホームページやブログなどのウェブサイトで文字や文章などを表示させる際に、<span>タグを使って、文章の一部にスタイルを適用することができます。 文...

ホームページやブログなどのウェブサイトに表示させる文字を、等幅フォントにすることができます。<tt>タグを使います。 等幅フォントとは、半角文字(英...

文章の書体、サイズ、行の高さ、スタイルをまとめて指定することができます。 <タグ名 style="font:イタリックや斜体の指定 スモールキャ...

タグ内で style指定することで、文章の書体(フォント)を指定することができます。 <タグ名 style="font-family:書体名&q...

ホームページやブログなどのウェブサイトに文章を表示する際に、Pタグ、DIVタグを使って、段落を指定することができます。 <p>段落文章</p&...

ホームページやブログなどのウェブサイトで文字や文章を表示させるさいに、イタリックや斜体で表示することができます。 専用タグを使用してイタリック体にする <...

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

文章の一部に下線(アンダーライン)を表示することができます。 <u>下線を付ける文字</u> というふうに記述します。サンプルソースです...

ホームページやブログなどのウェブサイトで文字や文章を表示させる際に、文章の一部を見え消し(取消線)にして表示することができます。 <s>取消線を付け...

ホームページやブログなどのウェブサイトで、部分的に文字や文章を強調したい場合は、EMタグやSTRONGタグを使用します。 <em>強調する文字<...

ホームページやブログなどのウェブサイトで文章を表示させる際に、文字の太さを指定することができます。 <タグ名 style="font-weigh...

ホームページやブログなどのウェブサイトで、部分的に文字を太く表示させたい場合は、Bタグが便利です。文字の太さを指定する方法は他にもありますが、このタグが一番短く...

ホームページやブログなどのウェブサイトで、文字を上付きにして表示させる場合は、SUPタグを使用します。自乗などの数学式 23=8 を表現したり、化学式を表示 H...

ホームページやブログなどのウェブサイトで、部分的に 文字の大きさを変えたい時は、FONTタグのcolor指定が便利です。style指定でも同一の効果が得られます...

ホームページやブログなどのウェブサイトで 文字や文章を表示させる際に、まわりの文字より少し大きく、または小さくしたいというときはBIGタグやSMALLタグといっ...

ホームページやブログなどのウェブサイトで 文字の大きさを変えたい時は、style指定が便利です。ピクセル値などの絶対サイズで細かく指定したり、LARGER/SM...

2006年05月19日

ホームページやブログなどのウェブサイトで 文字の大きさを指定するには、FONTタグのsizeオプションで指定する方法があります。この場合1(小)~7(大)段階のおおまかな指定になります。

e3.gif n2.gif
<font size="文字の大きさ">大きさを指定する文字</font>
  • 文字の大きさ:1~7の数字で指定します。数字が小さいほど文字の大きさは小さく、数字が大きいほど大きく表示されます。

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

続きを読む "文字の大きさを指定する(FONTタグ)" »

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

サンプルソースです。

続きを読む "文字の修飾方法を指定する" »

ホームページやブログなどのウェブサイトで文章を表示させる際に、 簡単なHTMLタグで 点滅させることができます。BLINKタグを使います。

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

という記述になります。InternetExplorerは対応していませんが、i モードでも使えます文字の修飾形式が限られている携帯電話向けサイトなどで使用するとよいかも知れません。
サンプルソースです。

続きを読む "文字を点滅させる" »

2006年02月23日

ホームページやブログなどのウェブサイトに文章や文字を表示する際には 、RUBYタグを使って文字にルビ(ふりがな)を付けることができますが、このときに ふりがなの位置を指定することができます。

<ruby style="ruby-align:位置揃えの指定">~</ruby>

位置揃えの指定は、下記の中から選択できます。

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

サンプルソースです。

続きを読む "ルビ(ふりがな)の位置揃えを指定する" »

ホームページやブログなどのウェブサイトに文字を表示する際には <ruby>タグを使って文字にルビ(ふりがな)を付けてることができますが、この表示位置を指定をすることができます。

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

という記述になります。表示位置は、下記の中から指定できます。

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

サンプルソースです。

続きを読む "ルビ(ふりがな)の表示位置を指定する" »

ホームページやブログなどのウェブサイトで文字を表示する際に、ルビ(ふりがな)を付けることができます。<ruby>タグを使います。

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

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

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

サンプルソースです。

続きを読む "文字にルビ(ふりがな)を付ける" »

ホームページやブログなどのウェブサイトで文字や文章などを表示させる際に、<span>タグを使って、文章の一部にスタイルを適用することができます。

文字の大きさ、色、余白そのたさまざまな指定ができますので、デフォルトや外部スタイルシートなどで指定されている 地の文に対して変化を付けたいときに便利です。

InternetExplorer3 Netscaple4
<span style="スタイル指定">スタイルを適用する文字</span>

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

サンプルソースです。

続きを読む "文章の一部にスタイルを適用する" »

2006年02月14日

ホームページやブログなどのウェブサイトに表示させる文字を、等幅フォントにすることができます。<tt>タグを使います。

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

InternetExplorer3.gif Netscaple2.gif
<tt>等幅文字にする文章</tt>

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

続きを読む "文字を等幅文字にする" »

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タグの場合マージンが取られないため前後に空白は入りません。

サンプルです。

続きを読む "文章の段落を指定する" »

2006年01月26日

ホームページやブログなどのウェブサイトで文字や文章を表示させるさいに、イタリックや斜体で表示することができます。

専用タグを使用してイタリック体にする
<i>イタリック体にする文字</i>
スタイル指定でイタリック/斜体にする
<タグ名 style="font-style:イタリックや斜体の指定">スタイルを指定する文字</タグ名>
  1. タグ名:PやDIV;、SPANタグなどが一般的ですが、他にもほとんどのブロックタグおよびインラインタグを使用できます。
  2. イタリックや斜体の指定: 下記のキーワードで指定できます。
    キーワード文字のスタイル
    normal通常
    italicイタリック体
    oblique斜体

サンプルです。

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

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

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

サンプルソースです。

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

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

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

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

スタイル指定で書体を指定することもできます→詳細はこちら

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

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

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

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

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

続きを読む "文字に下線をつける(アンダーライン)" »

ホームページやブログなどのウェブサイトで文字や文章を表示させる際に、文章の一部を見え消し(取消線)にして表示することができます。

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

どのタグを使用しても表示上の見え方は同じですが、対応するブラウザに若干の違いがあったようです。

サンプルソースです。

続きを読む "文字を見え消しにする(取消線)" »

2006年01月25日

ホームページやブログなどのウェブサイトで、部分的に文字や文章を強調したい場合は、EMタグやSTRONGタグを使用します。

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

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

サンプルです。

続きを読む "文字を強調する" »

ホームページやブログなどのウェブサイトで文章を表示させる際に、文字の太さを指定することができます。

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

サンプルソースです。

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

ホームページやブログなどのウェブサイトで、部分的に文字を太く表示させたい場合は、Bタグが便利です。文字の太さを指定する方法は他にもありますが、このタグが一番短く 手軽に使用できます。

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

サンプルソースです。

続きを読む "文字を太字にする" »

ホームページやブログなどのウェブサイトで、文字を上付きにして表示させる場合は、SUPタグを使用します。自乗などの数学式 23=8 を表現したり、化学式を表示 H2O したりするのに便利です。

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

サンプルソースです。

続きを読む "上付き/下付き文字にする" »

ホームページやブログなどのウェブサイトで、部分的に 文字の大きさを変えたい時は、FONTタグのcolor指定が便利です。style指定でも同一の効果が得られます。

FONTタグを使用する
<font color="色番号または色名称">色を変える文字</font>
スタイル指定で指定する
<タグ名 style="color:色番号または色名称">色を変える文字</タグ名>
  1. 色番号または色名称:『 #008000 』などの、16進数表記または色名称で指定します。
    HTML4.0で定義されているWEB基本カラー16色以外では、ブラウザによっては近似色に統合されて表示される場合もあります。またこの場合、16進数表記のほうが安全です。
  2. タグ名:PやDIV、SPANタグなどが一般的ですが、ほとんどのブロックタグおよびインラインタグが使用可能です。

サンプルです。

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

ホームページやブログなどのウェブサイトで 文字や文章を表示させる際に、まわりの文字より少し大きく、または小さくしたいというときはBIGタグやSMALLタグといった専用タグが用意されています。

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

サンプルソースです。

続きを読む "文字を一段大きく/小さくする" »

ホームページやブログなどのウェブサイトで 文字の大きさを変えたい時は、style指定が便利です。ピクセル値などの絶対サイズで細かく指定したり、LARGER/SMALLERなどのキーワードで他の文字より一段大きく/小さくなど相対的に指定したりできます。

e3.gif n4.gif
<タグ名 style="font-size:文字の大きさ">大きさを指定する文字</タグ名>
  1. タグ名:PやDIV、SPANタグなどが一般的ですが、他にもほとんどのインラインタグおよびブロックタグが使用できます。
  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より大きく

サンプルです。

続きを読む "文字の大きさを指定する(スタイル指定)" »

IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス