HTML TIPS

はじめに

このページでは，人とは少し違うページを作るためのコツを紹介します。
主に質問のあったものです。作成と動作確認はIE5, IE6で行っています。
ほかにも質問があればどうぞ。ただしすべてに答えられるかは分かりません。(できるだけ頑張ります。)

初級編

リンクの下線表示を無くしたい

リンクにマウスが近づいたとき変化させたい

文字の背景に色を付けたい

横線<HR>の3D表示をやめたい

日本語の文字フォントを変えたい

英文字をカッコイイものに変えたい

マウスカーソルを変化させたい

単語や１文字毎の間隔を変えたい

文章の行間隔を変えたい

色指定の際の参照が欲しい

文字の大きさを<H1>や<FONT SIZE="7">以上にしたい

ヒントのようなものを表示したい

表(table)を使って表現したい

IE のお気に入りに表示されるアイコンをカスタマイズする(IEのみ有効)

1. リンクの下線表示を無くしたい
リンクでは通常文字に下線が付きますが，このページのリンクのように下線はスタイルシートで消すことができます。
A { text-decoration: none; }
上のようにスタイルシートで宣言してみて下さい。

2. リンクにマウスが近づいたとき変化させたい
マウスが近づいたり離れたりするのを検出するのは通常，onMouseOverや onMouseOutなどのイベントが使われますが，リンクの場合はもっと簡単に行えます。
A:hover { color:#20541D;background-color:#77AAFF; }
このページでは上のように，colorで文字の色，background-colorで背景の色を変化させています。

3. 文字の背景に色を付けたい
背景に色を付ける場合は，テーブルタグなどが使われる事が多いのですが，テーブルタグはあくまでも表を作成するためのものです。またテーブルタグがあるとブラウザで読み込む時に動作が重くなります。なのでスタイルシートを使うことをお勧めします。
SPAN { background-color:#E0E0E0;width:100%;text-align:center; }
このページでは上のようにしています。SPANタグで囲まれた背景の色をbackground-colorで指定しています。また，これだけだと文字のみの背景で，もっと範囲を広げたい時は，widthで範囲を指定します。その背景の中での文字の位置はtext-alignで指定できます。

4. 横線<HR>の3D表示をやめたい
<HR>は標準では下のように3Dになり影が付き凹んでいるように見えます。
これをもっとシンプルな線にするには，オプションでNOSHADEを付けるだけです。
<HR NOSHADE>
上のように色指定をしなくても標準で灰色の線になります。

5. 日本語の文字フォントを変えたい
フォントはFONTタグのFACEオプションで指定すれば変える事ができます。ページ全体のフォントを指定するにはヘッダー部分(<HEAD></HEAD>内)でBASEFONTタグのFACE オプションで指定します。
<FONT FACE="フォント名">文字</FONT>
<HEAD>
・・・
<BASEFONT FACE="フォント名">
・・・
</HEAD>
また，ある特定のタグで囲まれたフォントのみを変更する場合はスタイルシートが使えます。例えばSPANタグで囲まれた文字のフォントを変える場合は，
SPAN { font-family:フォント名; }
日本語のフォント名にはWindowsではおもに以下のものがあります。
ＭＳＰゴシック
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
ＭＳＰ明朝
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
ＭＳゴシック
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
ＭＳ明朝
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
ＭＳなどの英字は全角，スペースは半角です。Ｐが付いたフォントは文字の幅が狭くなるようです。

6. 英文字をカッコイイものに変えたい
日本語のフォントでは下のようになります。英字のフォントはたくさんあり，それを使うともっと印象深く目立つものになります。フォントの指定方法はひとつ上を参考にして下さい。
標準
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
Arial Black
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
Arial Narrow
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
Arial
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
Comic Sans MS
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
CopperPlate Gothic Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
CopperPlate Gothic Light
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
Courier New
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
Georgia
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
Times New Roman
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
Verdana
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

7. マウスカーソルを変化させたい
マウスが近づいた時に，マウスカーソルを変化させるには, 単純にスタイルシートで指定するだけです。マウスカーソルの種類は下のようなものがあります。
自動(auto) 十字(crosshair) 標準(default) 手(hand) 移動(move) 右→(e-resize) 右上↑(ne-resize) 左上↑(nw-resize) 上↑(n-resize) 右下↓(se-resize) 左下↓(sw-resize) 下↓(s-resize) 左←(w-resize) テキスト(text) 砂時計(wait) ヘルプ(help)
B { cursor:hand; }
指定方法は上のようにヘッダー部分でスタイルシートで宣言することもできますが，頻繁に変更する場合は直接指定した方が簡単です。
<B STYLE="cursor:hand;">文字<B>

8. 単語や１文字毎の間隔を変えたい
フォントサイズを小さくすると，文章の単語や１文字毎の間隔が狭くて読みにくくなりますが，変更して読みやすくすることができます。

この文章は文字間隔，単語間隔を5ptにしています。
DIV.b { letter-spacing:5pt;word-spacing:5pt; }
letter-spacingが文字間隔，word-spacingが単語間隔です。

9. 文章の行間隔を変えたい
文章が何行にもわたって続くと非常に読みづらくなりますが，行間隔を広げることで，ある程度読みやすくなります。
BLOCKQUOTE { line-height:18pt; }
このページでは上のようにしています。行間隔の指定は line-heightで行います。またこれを使うと，
Ｇ
Ｙ

Ｃ
Ｋ

のように文字を重ねることができます。

10. 色指定の際の参照が欲しい
ただ今作成中です。

11. 文字の大きさを<H1>や<FONT SIZE="7">以上にしたい
標準のタグでは最大の文字は，
<FONT SIZE="7">
<H1>
ですが，スタイルシートを使うともっと大きくすることができます。

font-size:52pt;

上ではSTYLEオプションでfont-sizeで大きさを52ptに指定しています。
<FONT STYLE="font-size:52pt;">font-size:52pt;</FONT>

12. ヒントのようなものを表示したい
画像ファイルではALTで，マウスが近づくと文字を表示することができますが，特定の文字などで同じ様にヒントを表示することができます。
下の文字にマウスを近づけてみて下さい。
Jw_win Q&A Windows Q&A
<EM TITLE="w_win上達" STYLE="cursor:hand;">Jw_win Q&Ag</EM>
上のようにしています。表示するヒントはTITLEで設定します。上の例では TITLEだけ設定しても，その文字がヒントを持つかどうか分かりにくいので，マウスカーソルを手に，またEMタグで別の文字と区別しています。

■Top