Dynamic HTMLNo.03


Internet Explorer4.0 or Netscape Communicator4.0以上をご利用下さい。
それ以外のブラウザをご使用の場合は,CSSの効果は保証できません。

 6月号では,書体(フォント)の指定について示しました。ご自分のブラウザでCSS を使用した場合,どの様な動きをするか理解できましたか?
 いやぁ,実に沢山のFontがあるものですねぇ。(Font?驚いた(さむぅ〜))英字フォントなんて,使ったとしてもせいぜい「Century」程度でしょうから(筆者の場合)掘り下げて話す程のこともないのですが... ましてやこれらの指定は,Netscape Communicator の日本語版では,まったく無意味と来た日にゃ,次版に期待するしかないですね。おっと,ソース公開されてるし,ご自分でっうタフな人は?いるわけないかぁ。筆者を含め皆さんただのクワ馬鹿だものねッ!

Hello World!!

Hello World!!
が同じ様に見えない貴方は,Netscape Communicator を使用していますね。

けど,

私はただのクワ馬鹿です。年休とってせっとクワガタ採取に勤しんでいます。
私はただのクワ馬鹿です。年休とってせっとクワガタ採取に勤しんでいます。

が同じに見えるなら「よし」としましょう。なにぃ。同じに見えない!駄目だこりゃ。

 このコーナーでは,こうしたブラウザの差異をできるだけ多く暴露して行くと共に少しでも多くの方にCSS を理解してもらえればと考えます。

 第3回目は,書体の設定について示します。
 何時もながら難しい説明は一切抜き。すべて,ご自分で学習してみて下さい。ここでは,Internet Explorer4.xと Netscape Communicator4.x の効果の違いと方法論のみ示します。

文字装飾

<DIV STYLE="text-decoration:overline">Hello World!!</DIV>
Hello World!!
★Netscape Communicatorでは,Overlineの効果は得られません。

<DIV STYLE="text-decoration:underline">Hello World!!</DIV>
Hello World!!

<DIV STYLE="text-decoration:line-through">Hello World!!</DIV>
Hello World!!

<DIV STYLE="text-decoration:blink;color:red">Hello World!!</DIV>
Hello World!!
★Internet Explorerでは,Blink の効果は得られません。

文字のサイズを変える。

文字の大きさを変えるには,font-size を使います。
10ポイントのテキストです。
<DIV style="font-size:10pt;">10ポイントのテキストです。</DIV>
20ポイントのテキストです。
<DIV style="font-size:20pt;">20ポイントのテキストです。</DIV>
30ポイントのテキストです。
<DIV style="font-size:30pt;">30ポイントのテキストです。</DIV>

サイズの指定は,次の通り行います。
  • ポイント(pt):通常はこれを使用します。
  • インチ(in)
  • センチメートル(cm)
  • ピクセル(px)

効果は,大凡<FONT SIZE=n></FONT>タグと同じです。。

文字の太さを変える。

文字の太さを変えるにはfont-weightを使います。
<DIV STYLE="font-weight:normal">これは普通の太さです。</DIV>
<DIV STYLE="font-weight:bold">これは太字です。</DIV>
★Netscape Communicatorでは,font-weight の効果は得られません。
効果は<B></B>タグと同じです。

斜体文字にする。

斜体にするにはfont-styleを使います。
<DIVSTYLE="font-style:normal">これは普通の文字です。</DIV>
<DIVSTYLE="font-style:italic">これは斜体文字です。</DIV>
効果は<I></I>タグと同じです。

 インタラクティブな情報のストリーミングやマルチメディアプレゼンテーション等を構築するためのSMIL(Synchronized Multimedia Integration Language)とデータ転送プロトコル「RTSP」(Real Time Streaming Protocol),インタネット技術の著しい発展により,インタネット・テレビもどうやら夢ではなく現実味を帯びて来ました。そのうちクワ馬鹿ビデオレターとか飼育マニュアルなんかもインタネットでビデオ配信されちゃったりして...
 と言うことで?次回は,CCS の基本的な使い方について示します。それと,例のやばいネタいつか特集してみたい気もするのですが... こちらの方は,反論も多そうだし,個人のページで特集?することにします。(気が向いたらね!)

このコーナーに関するご意見ご要望をお待ちしております。


7月号目次へ

7月号目次へ(フレーム未対応)