■ 文字の色を変えるには？

個別に変える
文字の色は <FONT color= (色)> で指定します。
色は先頭に＃のついた色コードか、red , black などの色名で指定します。
牛飼いカラーチャートなどを参照ください。

文のなかで文字の色を指定するには、<FONT color="green">ABC</FONT>
のように <FONT>〜</FONT>タグでくくり、色コードを指定します。


全体を変える
ページ全体の文字の色とリンクの文字は <BODY> タグの中で指定します。

■BODY タグで文字の色を指定する
BGCOLOR ページの背景色　
<BODY BGCOLOR="#FFFFFF" >
ページ背景を白に設定
TEXT ページのテキスト色の指定
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
背景を白、テキストを黒に設定
LINK まだ訪問していないリンクの色を指定します
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" >
(例では #FF0000=赤色)
VLINK すでに訪問したリンクの色を指定します
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" >
(例では #FF0000=赤色)
ALINK リンクをクリックしている間のテキストの色を指定します
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" ALINK="#FF0000" >
(例では #FF0000=赤色)

スタイルシートで変える
文字の色はスタイルシートでも指定できます。 たとえばあるリンクの部分だけ色を変えたい場合、次のようにすることで色を変えることができます。
TEST
TEST の文字(リンク)をスタイル命令で赤に変えています
<A HREF="web03c.htm" style="color:red;">TEST</A>

見る人がスタイルシートを無効にしている場合も色を変えたいときは、リンクを色命令で囲みます
TEST
<A HREF="web03c.htm"><FONT color="red">TEST</FONT></A>

■Top

■ 文字のサイズを変えるには？

個別に変える
<FONT SIZE=(数値)> で指定します。わりとおおざっぱな指定になります。

Size 14 Sample

<FONT SIZE=14>Size 14 Sample</FONT>

現在のサイズからプラスマイナスさせるときは SIZE=+1 ,SIZE=-1 などもできます。

スタイルシートで変える
スタイルシートのほうがポイントやピクセルなど、はるかに柔軟な指定ができます。
複数行にまたがる変更は <DIV> を、一行の変更には <SPAN> を使います。
もちろん一行の変更まで全部 <DIV> ひとつで済ませても問題ありません。

14point Sample

<DIV STYLE="font-size:14pt;color:red">14point Sample</DIV>

<FONT> タグの中でもスタイルシートを使った指定ができます。こちらがスマートかも。

14point Sample
<FONT STYLE="font-size:14pt;color:red;font-weight:BOLD">14point Sample</FONT>
スタイルシートで太字にするには font-weight:BOLD　を使います。


■Top

■ 文字を装飾するには？



ウェブで使える文字装飾など スタイルシート
sample <U>sample</U>　アンダーライン Text-decoration:underline
sample <I>sample</I>　イタリック(斜体) Font-style:italic
sample <B>sample</B>　ボールド(太字) Font-weight:bold
sample <STRONG>sample</STRONG> Font-weight:bold
sample <S>sample</S>　取り消し線 Text-decoration:line-through
ABCsampleABC <SUP>sample</SUP> 上つき文字 Vertical-align:super　(ie のみ)
ABCsampleABC <SUB>sample</SUB> 下つき文字 Vertical-align:sub　(ie のみ)

スタイルシートで指定するには
一行なら <SPAN> 、複数行なら <DIV> です。ほかにスタイル指定が有効なタグの中でも使えます。

取り消し線をいれます
<SPAN STYLE="Text-decoration:line-through"> 取り消し線をいれます</SPAN>

取り消し線をいれます。FONT タグでもＯＫ
<FONT STYLE="Text-decoration:line-through"> 取り消し線をいれます。FONT タグでもＯＫ</FONT>

逆効果な BLINK
ここには取り上げていませんが、点滅文字 <BLINK> は使わないようにしましょう。
見た目にもうっとうしいのでヒジョーに嫌われているタグです。

■Top
■ 特殊な文字を出すには？



ウェブで使える特殊な記号など
< ＆ＬＴ； または ＆＃６０；
> ＆ＧＴ； または ＆＃６２；
& ＆ａｍｐ；または ＆＃３８；
" ＆ｑｕｏｔ； または ＆＃３４；
© ＆ｃｏｐｙ；
™ ＆ｔｒａｄｅ；
半角スペース ＆ｎｂｓｐ； または ＆＃３２；

© や ™ は、古いブラウザでは文字化けする場合があります。
半角スペースを空けるなら＆＃３２；(実際は半角で書きます)を使います。
これを使えばネットスケープ３でも＆ｎｂｓｐ；→「・」に文字化けしません。

トレードマーク(TM)は、ｎｓ３＆４では表示されません。そのまま＆ｔｒａｄｅ；と表示されます
またコピーライト(c) は　Windows など shift-jis 環境上のｎｓ３では小文字のゥに見えます

■Top

■ テキストをそのまま出すには？

<PRE> 〜 </PRE> タグで囲みます。
テキストをそのまま貼り付けると改行などがうまく反映されませんが、これで囲むと
そのまま表示できます。 テキスト中に入れたタグは正常に解釈されて表示されます。
下の例は一部で太字を指定しています。

<PRE>
どっちかというと、やはり女の子のほうが諸事のみこみが早いですな。
いわゆる「しつけ」というやつ、この年代の男の子はなかなかもって。。
それでも『ぴぴっ』とくるものはすぐ覚えるから、たいしたものである。
</PRE>

■Top

■ 文字の改行をアレンジするには？

改行するなら <BR>
改行する動作には <BR> と <P> とがあります。
<P> は段落の変わり目を現すタグなので、文の途中で改行するときは <BR> を使います。
<BR> には clear= オプションがあり、align=left オプションで左端に表示された画像の横にくる文字の改行に <BR cleae=left> または <BR clear=all> を指定することで、次にくる文字を画像の下の左端にすることができます。

一行目<BR>
ここになります
一行目<BR clear=left>
ここになります <BR clear=all> も可

※ホームページ制作ソフトによってはこれでもかというくらい <P> を入れるものがあります。 そういうソフトを使いつづけると HTML のメンテナンス性を著しく損なってしまいますので、よくよく考えて使いましょう。

■Top

■ 文字を左右にアレンジするには？


DIV は文字単位でアレンジする場合に、P は段落単位でアレンジする場合に使います。
CENTER はすでにご存知と思いますが、中央揃えの指定です。

ページの右に配置します
<DIV ALIGN="RIGHT">Sample</DIV>

ページの中央に配置します
<DIV ALIGN="CENTER">Sample</DIV>

■文字・段落の左右の位置を指定する
DIV <DIV align="right,center,left">〜</DIV>
P <P align="right,center,left">〜</P>
CENTER <CENTER>〜</CENTER>

■Top

■ 文字の行間をアレンジするには？

ｉｅではまだいいのですが、ネットスケープは文字の行間を詰めて表示するので日本語が非常に読み見にくくなってしまいます。
10ポイントの文字を使うなら、12〜14ポイントの行間を空けると見やすいページになります。
行間の指定は DIV タグとスタイルシートを組み合わせ、次のようにします。

これは行間の指定なしの状態です。
見た感じはどうでしょうか。
このくらいのサンプルだとあまり差は無いのですが、
長文になるほど違いがわかります。

<DIV STYLE="line-height:14pt">
ここでは行間を 14pt にセットしました。
見た感じはどうでしょうか。
このくらいのサンプルだとあまり差は無いのですが、
長文になるほど違いがわかります。
</DIV>

単純に 1.5 文字分と指定するには、 14pt のところを 1.5em としてください。

■Top

■ 文章の余白(マージン)を調整するには？

文章の上下左右のマージンも簡単に調整できます。

<DIV STYLE="MARGIN-LEFT:30pt;MARGIN-RIGHT:30pt;LINE-HEIGHT:14pt;">

ここの部分が左右30 ポイント分余白がとられます。
LINE-HEIGHT　は単におまけですが、これで行間が 14 ポイントになります
この３行に実際に効果をかけていますが、ちゃんと見えてますか？

</DIV>

MARGIN-TOP で上の余白、MARGIN-BOTTOM で下の余白も指定できます。
左から２文字分余白を取る、というときは MARGIN-LEFT:2em としてもいけます。
em は「文字分」の意味です。 2em で全角２文字分の余白を確保します。


■Top

■ 文章の行頭を一文字下げるには？

行頭の字下げ(インデント)をおこなうには次のようにします。

<DIV STYLE="TEXT-INDENT:1em">

1em = １文字分下げます。


<DIV STYLE="MARGIN-LEFT:30pt;MARGIN-RIGHT:30pt;LINE-HEIGHT:14pt;TEXT-INDENT:1em">
ここの行頭の１文字がインデントされます。
マージンとLINE-HEIGHT　と行頭インデントを組み合わせた例です。
この３行に実際に効果をかけていますが、ちゃんと見えてますか？

</DIV>


■Top

■ 文章の書き出しの文字を大きくするには？

Drop cap は次のようにします。

<STYLE type="text/css">
<!--
.dc {float: left; font-size: 24pt; width: 1em; height: 1em; font-weight:double;}
-->
</STYLE>

<SPAN class="dc">こ</SPAN>この行頭の１文字が大きくなります。<BR>
ちゃんと大きく見えていますか？<BR>


ここの行頭の１文字が大きくなります。
ちゃんと大きく見えていますか？
ちゃんと大きく見えていますか？
ちゃんと大きく見えていますか？
ちゃんと大きく見えていますか？



■Top

■ 箇条書きリストをつかう

箇条書きリストは本文から多少右に寄った形(インデント)で表示されます。


■番号なしのリスト　( < LI > と組で使います )
  • １行目
  • ２行目
  • ３行目
<UL>
<LI type=square>１行目
<LI type=circle>２行目
<LI type=disc>３行目
</UL>
 上から
■、○、●の指定ですが、ｎｓ３では○がつぶれます。またノートパソコンの機種によっては●と■の区別がつかないものもあります。

そんなわけですのでここはあまり体裁にこだわらず、『ポッチが出ていればよい』程度に割り切って使いましょう。

UL 部でも一括指定でき、この他に 1,a,A,i,I が指定できます
■番号つきのリスト　( < LI > と組で使います )
  1. １行目
  2. ２行目
  3. ３行目
<OL type=A>
<LI>１行目
<LI>２行目
<LI>３行目
</OL>
 1,a,A,i,I が指定できます
任意の開始ポイントを指定することもできます

次はいずれも <OL START=5> の例です

  1. １行目
  2. ２行目
  3. ３行目
  1. １行目
  2. ２行目
  3. ３行目
項目のひとつづつに特定の値をセットするには、<LI Value= > を使います。すぐ上の３行目を value=8 としています。
  1. １行目
  2. ２行目
  3. ３行目
<OL type=1>
<LI>１行目
<LI>２行目
<LI>３行目
</OL>
  1. １行目
  2. ２行目
  3. ３行目
<OL type=i>
<LI>１行目
<LI>２行目
<LI>３行目
</OL>
■説明つきリスト　
項目ラベル１
説明１１
説明１２
項目ラベル２
説明２
<DL>
<DT>項目ラベル１
<DD>説明１１
<DD>説明１２
<DT>項目ラベル２
<DD>説明２
</DL>
 <DT>が説明のタイトル、
<DD>が説明のデータになります。
■くみあわせ　
項目ラベル１
説明１
説明２
  1. Ａ
  2. Ｂ
  3. Ｃ
<DL>
<DT>項目ラベル１
<DD>説明１
<DD>説明２
<OL>
<LI>Ａ
<LI>Ｂ
<LI>Ｃ
</OL>
</DL>
 リストのタグの組み合わせで
いろいろなレイアウトがつくれます

■Top

■ BLOCKQUOTE　って、使っちゃいけない？

<BLOCKQUOTE>　タグでくくると、手軽に左右に余白を取ることができます。ところが 解説書には、『<BLOCKQUOTE> タグは本来 [引用文] の意味なので、左右のマージンをとるために使うのは間違い』と書かれています。本当に使っちゃいけないんでしょうか。謎です。それをいったら TABLE も本来は表作成のためのタグなので、レイアウトの補佐として使うのは邪道です。

それは置いておいて、使っていけません、で終わっている解説もありますし、もう少し親切なものでは「代わりにスタイルシートを使いましょう」とあるものもあります。

ところがそれじゃあ代わりにどういうスタイル命令を使うのか？　というのが一緒に説明されていないものが多いのですが、これは　<DIV> 〜 </DIV> を使って、

<DIV STYLE="MARGIN-LEFT:30pt;MARGIN-RIGHT:30pt;LINE-HEIGHT:14pt;">

ここの部分が左右30 ポイント分余白がとられます。
LINE-HEIGHT　は単におまけですが、これで行間が 14 ポイントになります
この３行に実際に効果をかけていますが、ちゃんと見えてますか？

</DIV>

のように MARGIN-LEFT と MARGIN-RIGHT　を指定すればＯＫです。
この指定はスタイルシートに対応していないブラウザでは無視されます。

■Top

■ 読めない文字。読みにくい文字

人によっては緑系と赤系の色の組み合わせや赤とオレンジの組み合わせが見づらい場合があります。また、背景に溶け込むようなコントラストの低い文字で作られたウェブも見受けられますが、これも環境によっては見えません。

たとえば白い背景に淡いブルーやピンク、ライトグレー、ベージュ・・・なんでもいいのですがとにかくそういう淡い文字でテキストを書くと、DSTN などコントラストのあまり出ないノートパソコンで見ている人や、視力の弱い人にとっては非常にみづらいページになってしまいます。


自分のウェブにどんな色を使うかは当然ながら個人の自由ではありますが、できれば「ぜひ読んで欲しいテキスト」や「メニュー・リンク」などは、読む人の利便を考えて見やすいコントラストの背景色と文字色の組み合わせのデザインにしたほうがよいでしょう。特にノートパソコンでは淡い色が飛んで消えてしまうというのは、ＣＲＴで確認していると意外な盲点になります。

これは文字に限らず、背景画像やアイコンなどの素材にも同様のことがいえます。
コントラストが弱い淡い系統の素材や文字は、とにかく要注意です。


■Top

copyright(C) 1999 Y.Kishino all rights reserved
Ushikai and Icons Room