☆ フォントの基礎 ☆




M E N U

■ フォントカラーを指定する

■ フォントサイズを指定する

■ 書体を指定する

■ ページ全体のフォントとリンクの色と大きさを固定する

■ 文字を飾る





■ フォントカラーを指定する　カラーコードはこちら

BODY タグで文字色を指定 （ページ全体に適用）
背景色 bgcolor <BODY bgcolor="#fffcfb">
背景画像 background <BODY background="○○.gif">
テキスト色 text <BODY text="#5044a4">
リンク色 link <BODY link="#8000ff">
訪問済みリンク vlink <BODY vlink="#800080">
リンクをクリック時 alink <BODY alink="#FF8080">
全てを指定した場合 　 <BODY bgcolor="#fffcfb" background="○○.gif" text="#5044a4" link="#8000FF" vlink="#800080" alink="#FF8080">


スタイルシートで文字色を指定 （部分的に適用）
通常一行の変更には <SPAN> を、複数行にまたがる変更は <DIV> を使いますが、
一行の変更も<DIV> ひとつで済ませても問題ありません。
<SPAN>を使った指定 青い文字 <SPAN STYLE="color:blue">青い文字</SPAN>
<DIV>を使った指定
青い文字
 <DIV STYLE="color:blue">青い文字</DIV>


ＦＯＮＴ タグで文字色を指定（部分的に適用）
青い文字 <FONT COLOR="#0000ff">青い文字</FONT>
FONTタグを使うとこんなにきれい♪ <FONT color="#ff9d9d">FONTタグを使うと</FONT><FONT color="#8c8cc6">こんなに</FONT><FONT color="#00cece">きれい♪</FONT>




■ フォントサイズを指定する

STYLE タグでフォントサイズを指定 （ページ全体に適用）
このタグを<HEAD>　と　</HEAD>の間に入れてください。
フォントサイズを10ポイントに指定 <STYLE type="text/css"><!--BODY{font-size :10pt;}--></STYLE>
フォントサイズをやや小さくする <STYLE type="text/css"><!--BODY{font-size : small;}--></STYLE>
フォントサイズを小さくする <STYLE type="text/css"><!--BODY{font-size : x-small;}--></STYLE>
フォントサイズを極めて小さくする <STYLE type="text/css"><!--BODY{font-size : xx-small;}--></STYLE>
フォントサイズを普通にする <STYLE type="text/css"><!--BODY{font-size : medium;}--></STYLE>
フォントサイズをやや大きくする <STYLE type="text/css"><!--BODY{font-size : large;}--></STYLE>
フォントサイズを大きくする <STYLE type="text/css"><!--BODY{font-size : x-large;}--></STYLE>
フォントサイズをより大きくする <STYLE type="text/css"><!--BODY{font-size : xx-large;}--></STYLE>
フォントサイズを極めて大きくする <STYLE type="text/css"><!--BODY{font-size : larger;}--></STYLE>


スタイルシートでフォントサイズを指定 （部分的に適用）
通常一行の変更には <SPAN> を、複数行にまたがる変更は <DIV> を使いますが、
一行の変更も<DIV> ひとつで済ませても問題ありません。
<SPAN>を使った指定 12ポイント <SPAN STYLE="font-size:12pt;color:navy">12ポイント</SPAN>
<DIV>を使った指定
12ポイント
 <DIV STYLE="font-size:12pt;color:navy">12ポイント</DIV>


ＦＯＮＴ タグでフォントサイズを指定（部分的に適用）
サイズ１ <FONT SIZE="1">サイズ１</FONT>
サイズ2 <FONT SIZE="2">サイズ2</FONT>
サイズ3 <FONT SIZE="3">サイズ3</FONT>
サイズ4 <FONT SIZE="4">サイズ4</FONT>
サイズ5 <FONT SIZE="5">サイズ5</FONT>
サイズ6 <FONT SIZE="6">サイズ6</FONT>
サイズ7 <FONT SIZE="7">サイズ7</FONT>
サイズ-2 <FONT SIZE="-2">サイズ-2</FONT>
サイズ-１ <FONT SIZE="-1">サイズ-１</FONT>
サイズ+0 <FONT SIZE="+0">サイズ+0</FONT>
サイズ+1 <FONT SIZE="+1">サイズ+1</FONT>
サイズ+2 <FONT SIZE="+2">サイズ+2</FONT>
サイズ+3 <FONT SIZE="+3">サイズ+3</FONT>
FONTタグを使うとこんなに楽しいよ！ <FONT size="2">FONTタグを使うと</FONT><FONT size="4">こんなに</FONT><FONT size="7"></FONT><FONT size="5">楽しいよ！</FONT>




■ 書体を指定する 書体の見本はこちら

スタイルシートで書体を指定 （ページ全体に適用）
このタグを<HEAD>　と　</HEAD>の間に入れてください。
ページ全体の書体を「MS UI Gothic｣に <STYLE type="text/css"><!--BODY{font-family : "MS UI Gothic";}--></STYLE>


ＦＯＮＴ タグで書体を指定 （部分的に適用）
部分的に書体を「MS UI Gothic｣に <FONT face="MS UI Gothic">あいうえお</FONT>


テーブル（枠）に書体を指定 （ページ全体のテーブルに適用）
このタグを<HEAD>　と　</HEAD>の間に入れてください。
ページ全体のテーブルの書体を「MS UI Gothic｣に <STYLE type="text/css"><!--TABLE{font-family : "MS UI Gothic";}--></STYLE>


テーブル（枠）に書体を指定 （部分的に適用）
特定のテーブルの書体を「MS UI Gothic｣に <TABLE>タグにstyle='font-family : "MS UI Gothic";'を追加 <TABLE style='font-family : "MS UI Gothic";'>




■ ページ全体のフォントとリンクの色と大きさを固定する

フォントとリンクの色と大きさを固定 (ページ全体に適用）
このタグを<HEAD>　と　</HEAD>の間に入れてください。
<STYLE type="text/css">
<!--
a:link {
font-size: 10pt;
text-decoration:none;
color:#6666cc ; /*未訪問リンク */
}
a:visited {
font-size: 10pt;
text-decoration:none;
color:#9966ff ;/*訪問済みリンク */
}
a:active {
font-size: 10pt;
text-decoration:none;
color:#cc66ff ; /*クリックしたとき */
}
a:hover {
font-size: 10pt;
text-decoration:none;
color:#9999ff ;/*マウスが乗ったとき */
}
td {
font-size: 10pt; /*枠内のフォントサイズ*/
}
span {
font-size: 10pt; /*<SPAN>〜</SPAN>のフォントサイズ*/
}
b {
font-size: 10pt; /*太字のフォントサイズ*/
}
body {
font-size: 10pt; /*フォントサイズ*/
color:#5044a4; /*フォントカラー*/
font-family:MS UI Gothic;/*書体*/
}
-->
</STYLE>
アンダーラインを消したい時　text-decoration:none
アンダーラインを出したい時　text-decoration:underline




■ 文字を飾る

文字を装飾する
太字 Various Colors <B>Various Colors</B>
斜体 Various Colors <I>Various Colors</I>
下線 Various Colors <U>Various Colors</U>
取り消し線 Various Colors <S>Various Colors</S>
上揃え ■Various Colors■ <SUP>Various Colors</SUP>
下揃え ■Various Colors■ <SUB>Various Colors</SUB>


特殊文字記号 （ＩＥのみ）
< &#60; &lt;
> &#62; &gt;
& &#38; &amp;
" &#34; &quot;
© &copy;
™ &trade;
♠ &#9824; &spades;
♡ &#9825;
♣ &#9827; &clubs;
♤ &#9828;
♥ &#9829; &hearts;
♦ &#9830; &diams;
半角スペース &#32; &nbsp;


フォントの小技
文字に背景色を付ける 背景色を付ける <FONT style="background-color:#ddccee">背景色を付ける</FONT>
文字に背景画像を付ける 背景画像を付ける <FONT style="background-image:url(○○.gif)">背景画像を付ける</FONT>
文字がキラキラ☆ キラキラ☆ <FONT style="position:absolute;filter:Glow(color=#ddccee)">キラキラ☆</FONT>
文字の上ににカーソルが乗ると
コメントが出る　改行は&#13;で 		コメントを出す <FONT title="ほらね♪&#13;改行も出来るよ！">コメントを出す</FONT>




Copyright (C) 2001-2014. Various Colors. All rights reserved.