HTMLの文字表示小技集

今回は、ホームページのHTML文書でいろいろと使える小技を掲載します。

小技といっても、文字サイズを変化させたり、文字色を指定する方法がメインですので、そのあたりを理解していない方は、ぜひ読んでおいてくださいね。

ホームページ作成が苦手、HTMLが苦手といっているほとんどの人は、思い通りにHTMLを扱えないから苦手なんです。

そんな人は、今回掲載するようなHTML小技から入っていくと、まだわかりやすいのできっと楽しくなると思います。

CGI作成で、HTML文書を出力させるということは当たり前に起こってきますから、HTMLがよくわかっていない場合は、ぜひ読んでくださいね。

  1. HTMLの文字サイズ(1)
  2. HTMLの文字サイズ(2)
  3. HTMLの文字色(1)
  4. HTMLの文字色(2)
  5. HTMLの文字下線タグ
  6. HTMLの抹消線タグ
  7. HTMLの等幅フォントタグ
  8. HTMLの改行操作タグ

HTMLの文字サイズ(1)

まずは、文字サイズの指定方法についてです。

文字サイズの指定には、大きく2通りのやり方があります。

一つ目は、文字のサイズを数値(絶対値)で指定する方法です。

二つ目は、ページの基準のフォントサイズから、プラス、マイナスなどの相対値で指定する方法です。

でもですね、どちらの方法でも、今では、スタイルシートを使用して設定することが当たり前になってきたので、あくまで簡単なHTMLを表示させるときぐらいしか参考にならないです。

でもCGIの簡易HTML出力など役に立つときもあるので、覚えておいて損はないです。

それでは、1つ1つ解説していきます。

まずは、文字サイズを数値で指定する方法からです。

文字表示関連を操作するには、「<font>」というHTMLタグを使用します。

さらに今回は文字のサイズを指定するので、「size」を使います。

こんな感じになります。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>文字表示サイズタグテスト</title>
</head>
<body>
<font size="1">フォント1</font><br>
<font size="2">フォント2</font><br>
<font size="3">フォント3</font><br>
<font size="4">フォント4</font><br>
<font size="5">フォント5</font><br>
<font size="6">フォント6</font><br>
<font size="7">フォント7</font><br>
</body>
</html>

フォントサイズを、「1」から「7」までの数値で指定します。

このやり方の方が後述するもう一つのやり方よりも簡単です。

HTMLの文字サイズ(2)

続いて、文字のサイズを相対値で指定する方法を説明します。

こんな感じで使用します。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>文字表示サイズタグテスト</title>
</head>
<body>
<font size="-1">標準のサイズからマイナス1</font><br>
<font size="-2">標準のサイズからマイナス2</font><br>
<font size="+2">標準のサイズからプラス2</font><br>
<font size="+3">標準のサイズからプラス3</font><br>
</body>
</html>

フォントサイズを、標準のサイズから、プラス、マイナスで指定しています。

この場合、何も指定していない標準のフォントサイズは、「3」になります。

でもですね、基準となるフォントサイズというのは、訪問者側のインターネットエクスプローラなどのブラウザで設定を変えることができるので、そんな単純なものではないです。

もし、閲覧するパソコンの設定によって、基準となるフォントサイズが異なる現象を回避したいのなら、次のような方法がお勧めです。

その方法とは、基準のフォントサイズをあらかじめ指定しておいて、そこから、プラス、マイナスを指定する方法です。

例えばこんな感じです。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>文字表示サイズタグテスト</title>
</head>
<body>
<basefont size="4">
<font size="-1">標準のサイズからマイナス1</font><br>
<font size="-2">標準のサイズからマイナス2</font><br>
<font size="+2">標準のサイズからプラス2</font><br>
<font size="+3">標準のサイズからプラス3</font><br>
</body>
</html>

上記の場合は、フォントサイズの基準を、「4」に指定しています。

基準となるフォントサイズから、マイナス1なら、フォントサイズは3。

基準となるフォントサイズから、プラス2なら、フォントサイズは6。

という感じになります。

ここで注意して欲しいことは、フォントのサイズはあくまで「1~7」であるということです。

つまり、フォントサイズを「1」以下になるよう指定しても、フォントサイズ「1」より小さくなることはありません。

さらに、フォントサイズ「7」以上になるよう指定しても、フォントサイズ「7」より大きくなることはありません。

<戻る>

HTMLの文字色(1)

次は、文字の色を指定する方法について説明します。

これも現在では、スタイルシートを使用して、設定することが当たり前になっているので、今から説明する方法を使用することはあまりないかもしれませんが、参考レベルで覚えておくとお得です。

ピンポイントで文字色を変えることができますからね。

それでは、説明していきます。

文字の色を指定する方法には、次の2つの方法があります。

一つ目は、RGB値で指定(16進数)を使用して指定する方法です。

二つ目は、色名で指定する方法です。

ではまず、RGB値(16進数)を使用して指定する方法について説明します。

「#」に続けて、赤(R)、緑(G)、青(B)の値を「00」から「ff」の16進数合計6桁で指定します。

16進数については、「Perl/CGI入門講座」を読んでください。

では、実際に使用してみましょう。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>文字表示色タグテスト</title>
</head>
<body>
<font color="#000000">これは黒で指定しています</font><br>
<font color="#ff0000">これは赤で指定しています</font><br>
<font color="#00FF00">これは緑で指定しています</font><br>
<font color="#0000FF">これは青で指定しています</font><br>
<font color="#FF00FF">これはマゼンタ色(深紅色)で指定しています</font><br>
<font color="#FFFFFF">これは白で指定しています</font><br>
</body>
</html>

この「RGB指定」の場合は、数値を変えるだけで簡単に微妙な色の指定ができることが利点です。

逆に、「思った色をすぐに指定できない」というのが欠点です。

例えば、「緑のRGB指定の数値は?」と急に聞かれても、わかりませんよね(笑)。

HTMLの文字色(2)

続いて、色名で指定する方法について説明します。

大文字、小文字に関係なく、色名を直接指定することができます。

赤なら「red」、青なら「blue」、緑なら「green」、黄色なら「yellow」といった感じです。

では、実際にやってみましょう。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>文字表示色タグテスト</title>
</head>
<body>
<font color="Black">これは黒で指定しています</font><br>
<font color="Red">これは赤で指定しています</font><br>
<font color="Green">これは緑で指定しています</font><br>
<font color="Blue">これは青で指定しています</font><br>
<font color="Magenta">これはマゼンタ色(深紅色)で指定しています</font><br>
<font color="White">これは白で指定しています</font><br>
</body>
</html>

この色名指定の場合は、名前を直接指定するだけなので、わかりやすいのが利点です。

しかし、色の名前を知っていないと使えない、というのが欠点です(笑)。

状況と好みによって器用に使い分けてください。

最後に、部分的に文字の色を変えるときの注意です。

部分的な文字色の指定で、青を使う場合は、注意です。

というのは、ホームページのデフォルト(初期設定)の状態でのリンクの色は「青」ですから、部分的に青を使うのは紛らわしくなるだけです。

そういうまぎらわしいページを作りたいなら別ですが(笑)。

<戻る>

HTMLの文字下線タグ

リンクとしてまぎらわしいという話をしたついでに、もっとまぎらわしくする方法について書きます(笑)。

それは、表示文字に下線を引く方法です。

通常のHTMLでは、リンクタグを指定したところにも、下線がひかれます。

したがって、通常のHTML文字に下線を引いておけば、もっとまぎらわしくすることができます(笑)。

以下のように書くと、文字に下線をひくことができます。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>下線文字表示タグテスト</title>
</head>
<body>
<p>文字に<u>下線</u>を引きました。</p>
</body>
</html>

ちょっとした、お遊びにでも使ってください。

HTMLの抹消線タグ

「<s>~</s>」か「<strike>~</strike>」どちらも、囲まれた部分に抹消線が引かれます。

どちらも同じ効果がでます。

以下のように記述します。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>抹消線文字表示タグテスト</title>
</head>
<body>
<p>この文章には<s>抹消線</s>を引いています。</p>
<p>この文章には<strike>抹消線</strike>を引いています。</p>
</body>
</html>

ホームページの場合には、抹消線を使うことはほとんどないです。

というのも、抹消線を引いたところが読みづらいものになるからですね。

この抹消線タグは、今までのようなホームページを見やすくするタグではなく、もっと腹黒い戦略で使用するタグです。

抹消線を引くということは、書いた文字を取り消すということです。

取り消すのであれば、ホームページのデータを書き換えればすむことです。

そうではなく、あからさまにデータの書き換えを訪問者にアピールすることで、このページが他のページよりも有利であることを表しています。

例えば、他店に比べて商品の価格の安さを強調するために、一般的な価格を書いておいて、わざと消すという場合です。

使い方によっては有利に働くタグです。

<戻る>

HTMLの等幅フォントタグ

「<tt>」から「</tt>」で囲まれた部分は、等幅フォントになります。

等幅フォントとは、全角文字なら、ひらがなでもカタカナでも、スペースでも、全部同じ幅になるというフォントです。

半角文字、半角スペースの場合でも、きっちり全角の半分の幅になります。

その結果、縦の線がピタッと揃ってくれるので、読みやすい文章になるというわけです。

メールマガジンには、「等幅フォントでご覧になってください」などと書かれているものがあります。

これは、全角文字の幅と、半角文字の幅がしっかり決まっている文字を使用することで、レイアウトを整えたいという狙いがあるからです。

以下のように記述します。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>等幅フォント表示タグテスト</title>
</head>
<body>
<p><tt>等幅フォントにしてみました</tt></p>
</body>
</html>

ちなみに、等幅フォントとは逆に、文字の本来もっている幅にあわせて、1文字の幅を決めるフォントを、プロポーショナルフォントといいます。

たとえば、同じ全角文字でも、漢字だと幅をとりますが、「し」や「り」などのひらがなは、細身になります。

半角文字でも同じで、「I」より「W」のほうが幅がありますよね。

具体例をあげると…

MSゴシックは、等倍フォント

MS Pゴシックは、プロポーショナルフォント

MS明朝 は、等倍フォント

MS P明朝 は、プロポーショナルフォント

       といった具合です。 

<戻る>

HTMLの改行操作タグ

ここでは、ホームページのHTML文書の改行を自由にコントロールするHTMLタグについての説明です。

通常何も指定しないでHTML文書を作った場合、インターネットエクスプローラなどのブラウザの幅に合わせて、勝手にHTML文書が折り返されて表示されます。

この機能により、通常はホームページを縦にスクロールすることはあっても、横にスクロールさせることはないわけです。

でもここで紹介するHTMLタグを使えば、文書の自動改行を阻止しつつ、文書の好きなところで改行処理命令を出すことができます。

つまり、改行させずに横スクロールさせることができるということです。

ではまず、ホームページのHTML文書を自動改行させないHTMLタグの紹介です。

「<nobr>」から「</nobr>」タグで文書を挟めば、HTML文書の自動改行を禁止させることができます。

使用方法は以下の通りです。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>HTML文書自動改行禁止タグテスト</title>
</head>
<body>
<nobr>
このテキストは、画面の幅が変わっても改行されません。
お使いのブラウザの幅を変えてみましょう。
テキストが、画面の幅を変えても改行されていないのがわかると思います。
</nobr>
</body>
</html>

この文書は、わかりやすく改行していますが、実際には改行されずに表示されます。

HTMLタグの改行を指定する「<br>」や「<p></p>」を使用していませんよね。

このHTMLタグを使用すると、改行されなくなりますので、もし使用する機会がありましたら、試してみてください。

次に紹介するのは、文書レイアウトが崩れない程度になら「自動改行表示を許可する」といった便利なHTMLタグです。

もっとわかりやすく言うなら、「自動改行のときは、文書の改行位置を指定する」といったものです。

以下のように記述します。

<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>HTML文書自動改行操作タグテスト</title>
</head>
<body>
<nobr>
このテキストは、<wbr>
基本的には、インターネットエクスプローラなどのブラウザの幅が変わっても改行されない設定になっていますが、<wbr>
ブラウザの幅が変更されると、<wbr>
指定された部分で改行されます。
</nobr>
</body>
</html>

このようにすると、もし自動改行表示されたときでも、指定した部分でのみ改行されるので、使用用途がありますね。

HTMLの文書レイアウトにこだわりのある人は、ぜひ試してみてください。

<戻る>