HTML TIPS

はじめに

このページでは，人とは少し違うページを作るためのコツを紹介します。
主に質問のあったものです。作成と動作確認はIE5, IE6で行っています。
ほかにも質問があればどうぞ。ただしすべてに答えられるかは分かりません。(できるだけ頑張ります。)
初級編
  1. リンクの下線表示を無くしたい
  2. リンクにマウスが近づいたとき変化させたい
  3. 文字の背景に色を付けたい
  4. 横線<HR>の3D表示をやめたい
  5. 日本語の文字フォントを変えたい
  6. 英文字をカッコイイものに変えたい
  7. マウスカーソルを変化させたい
  8. 単語や１文字毎の間隔を変えたい
  9. 文章の行間隔を変えたい
  10. 色指定の際の参照が欲しい
  11. 文字の大きさを<H1>や<FONT SIZE="7">以上にしたい
  12. ヒントのようなものを表示したい
  13. 表(table)を使って表現したい
  14. スタイルシートでのフォント属性指定
  15. 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. 色指定の際の参照が欲しい

スタイルシート（CSS）のシンタックスに従ってスタイルシートに色の指定をする場合、HTMLの色の定義の規則に合わせることができます。 色の値を16進法で #XXXXXX といったように入力することができますが、一般に普及している色名のキーワードで入力することもできます。

スタイルシート（CSS）では色を定義する時さらに別な方法もあります。rgb(rrr,ggg,bbb) という書き方があります。rgb(...) の所は常に同じです。括弧の中には10進法で3つ値を書き入れるか、パーセントの値が3つ記入します。各数字はカンマで区切ります。rrr には赤、ggg には緑、bbb には青の値が来ます。3つの値全てに 0 （その色の要素が無いという意味）から 255 （その色の要素を最大限という意味）までの絶対値を書き入れるか、 0% （その色の要素が無いという意味）から 100% （その色の要素を最大限という意味）のパーセントを書きます。

例：

<style type="text/css">
<!--
h1 { color:#FFCCDD; background-color:black }
body  { background-color:rgb(51,0,102); }
blockquote  { background-color:rgb(60%,90%,75%); }
//-->
</style>

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
Copyright© 2004 N.Misumi All right reserved.