>> HTML講座 >> 文字をいじってみよう!

文字をいじってみよう!

hyoujun.gif (3488 バイト)

7用途に応じた文字を使おう!
NE3 NE4 NE6 IE3 IE4 IE5 IE6  

基本編でもいろいろな形にする方法を学んだけど、それらをちょっと違った書き方でやる方法があるんだ。

<EM>〜</EM>
<STRONG>〜</STRONG>  

<CITE>〜</CITE>
<CODE>〜</CODE>
<DFN>〜</DFN>
<KBD>〜</KBD>
<SAMP>〜</SAMP>
<VAR>〜</VAR>

 ・・・・・強調
 ・・・・・さらに強調
 ・・・・・引用(引用文や、タイトルとして使う)
 ・・・・・プログラム(プログラムを書くときに使う)
 ・・・・・定義(定義用として使う)
 ・・・・・キーボード(キーボードで入力してもらう時はこのタグを使う)
 ・・・・・メッセージ(コンピューターのメッセージみたいに使う)
 ・・・・・変数(変数を入れてもらう場合に使う)

これは別に覚えなくていいよ。僕は1つも知らなかったしね。
下の結果を見てもらえればわかると思うけど、超基本編でならった<B>(太字)<I>(斜線)のような指定の組み合わせで全て作れるはず。
これらのタグは、ここは強調したいなって思ったら上の強調を使って、メッセージ用として使いたいなって思ったら上のメッセージを使ったりと用途ごとに使い分けることができるんだね。
つまり、文章の意味によってテキストの文字の形を指定するという意味なんだ。
最後の変数については今は覚える必要はないから。必要があればきちんとやるからね。
じゃあ、それぞれの効果を見てみよう。

 SOURCE
<HTML>
<HEAD>
<TITLE>用途別タグ</TITLE>
</HEAD>
<BODY>
<EM>強調</EM><P>
<STRONG>さらに強調</STRONG><P>
<CITE>引用</CITE><P>
<CODE>プログラム</CODE><P>
<DFN>定義</DFN><P>
<KBD>キーボード</KBD><P>
<SAMP>メッセージ</SAMP><P>
<VAR>変数</VAR><P>
</BODY>
</HTML>

これを表示すると、

 RESULT  

強調 ←<I>斜体と同じ働き
さらに強調         ←<B>太字と同じ働き
引用         ←<I>斜体と同じ働き
プログラム         ←<TT>等幅フォント
定義         ←<I>斜体と同じ働き(変化なしのときもある)
キーボード         ←<B>太字、又は<TT>等幅フォントと同じ働き
メッセージ         ←<TT>等幅フォントと同じ働き
変数           ←<I>斜体、又は<TT>等幅フォント

とまぁ、このような感じかな。
たぶん普通に<B>(太字)<I>(斜体)などを使って文字をレイアウトした方がわかりやすい人も多いと思う。
しかも上のやり方の場合、ブラウザによって表示が異なったりするのでややこしいんだ。
こういうものもあるんだと知っておくくらいでいいよ。

詳.gif (135 バイト)
これが便利なのはデーターベースなどに使う場合なんだ。
これらのタグは文字の形の変化以外にその文章がどのような使われ方をしているのかも示しているよね。
だから、あるページの中に、ある本から引用してきた文章がどれくらいあるかを調べるときには、このソース内にある<CITE>が重要な役割を果たすよね。
だって、引用文は<CITE>を使って書いているとするね。
そしてたら引用文だけを探すときにはソース内から<CITE>タグを検索してくればいいよね。
また、このそれぞれのタグには明確な役割が示されているので、今後のバージョンアップの際にこの役割に有効なバージョンアップがされる場合がある。
そのようなときのために、この役割を示すタグを使った方がいい場合もあるよ。

 


 文字の大きさを変えよう!
 文字の種類を変えてみよう!