もともとHTMLは文書の構造を指定するもので、文章の表示方法についてはブラウザやユーザ設定に依存してきました。FONTタグなど、さまざまなタグが追加されてHTMLの表示能力は向上してきましたが、より細かく表示方法を指定できるものがスタイルシートなのです。HTMLの流れとしては、今後は文書の論理構造についてはHTMLのタグで、表示方法についてはスタイルシートで指定するようになるでしょう。
さて、スタイルシートを使うと既存のHTMLに比べて何が向上するか、ということを以下にまとめてみました。
HyperEditでは[スタイル領域]で<STYLE>タグを挿入し、[スタイル要素]でタグごと(あるいはクラスごと)のスタイルを挿入することができます。
また、タグを挿入する際に、どのクラスを使うかを選択することができます。HyperEditはSTYLEタグの内容を解析し、このタグに使えるクラスを選択肢として表示します。単純にSTYLE設定のみ行いたいときには、<SPAN>や<DIV>タグを使うといいでしょう。
例:
<STYLE>
<!--
H2 {font: 22pt "Arial"}
H3.yellow {font: 18pt "Arial";color: #FFFF00}
H3.green {font: 18pt "Arial";color: #00FF00}
.red {color: #FF0000}
-->
</STYLE>
この例では、H2のタグはArialフォントの22ポイントで表示されます。
H3タグはyellowとgreenという二つのクラスのどちらかで表示されます。どちらで表示するかはタグ挿入時に「クラス」のところで選択してください。
redというクラスは全てのタグで使用することができるクラスです。これを設定すると赤色で表示されます。
例:
<H1 STYLE="color: #FF0000">あいうえお</H1>
この例では「あいうえお」が赤色で表示されます。
例:
<STYLE>
<!--
H2 {font: 22pt "Arial"}
H3.yellow {font: 18pt "Arial";color: #FFFF00}
H3.green {font: 18pt "Arial";color: #00FF00}
.red {color: #FF0000}
-->
</STYLE>
上の例で、まずH2のスタイルを設定します。これは単純で普通に[HTML]-[フォント]-[見出し]でH2を設定するだけです。
次にH3ですが、これにはyellowとgreenの二つのクラスがあります。どちらのスタイルにするかは[HTML]-[フォント]-[見出し]で「クラス」から選択するだけです。
redにはタグの指定がありません。つまり、どのタグでも使える、ということです。ここでは文章の一部をこのクラスを指定し、赤色にしたいとします。その場合には、赤色にしたい部分を選択し、[HTML]-[スタイル]-[部分スタイル]からクラスで「red」を選択します。これでSPANタグが挿入されスタイルが設定されます。
このように、特にタグを設定せずにスタイルだけ設定したいときには、<SPAN>タグや<DIVタグ>が便利です。
Copyright(C) Dicre Ltd.