スタイルシートについて


スタイルシートとは?

スタイルシートは、InternetExplorer3.0以降、NestcapeNavigater4.0以降のブラウザが対応している新しいWebのデザイン方法です。

もともとHTMLは文書の構造を指定するもので、文章の表示方法についてはブラウザやユーザ設定に依存してきました。FONTタグなど、さまざまなタグが追加されてHTMLの表示能力は向上してきましたが、より細かく表示方法を指定できるものがスタイルシートなのです。HTMLの流れとしては、今後は文書の論理構造についてはHTMLのタグで、表示方法についてはスタイルシートで指定するようになるでしょう。

さて、スタイルシートを使うと既存のHTMLに比べて何が向上するか、ということを以下にまとめてみました。

このようにスタイルシートを使うことで、今までは指定できなかったさまざまな表現を使うことができます。弱点としては、昔のブラウザではスタイルシートは効果がないことです。特にNetscapeNavigater3.0のユーザはまだ多いので、そのようなユーザでも似たような視覚効果が得られるようなタグの工夫が必要になります。


スタイルシートの種類

スタイルシートには3つの種類があります。これらは組み合わせて使うこともできます。

  • リンク型スタイルシート
  • スタイルシートを別ファイルにし、それを読み込んで使用します。これはHyperEditでは現在サポートされていません(もちろん、手書きで作ることは可能ですが、機能的にはサポートしていません)。

  • 埋め込み型スタイルシート
  • <HEAD>部分に<STYLE>タグを記述し、その内部にスタイルを記述します。この場合、書くスタイルはタグごと(あるいはクラスごと)になります。

    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というクラスは全てのタグで使用することができるクラスです。これを設定すると赤色で表示されます。

  • インラインスタイル
  • HTMLタグの一部にSTYLE=でスタイルを指定します。HyperEditでは各タグを挿入するときに出るダイアログの「スタイル」ボタンを押すことで、スタイルを設定することができます。

    例:
    <H1 STYLE="color: #FF0000">あいうえお</H1>

    この例では「あいうえお」が赤色で表示されます。


    スタイルシートを使う

    具体的にスタイルシートを使う手順の例を書いてみました。

    1.<STYLE>領域を設定

    まずは、<HEAD>内に[HTML]-[スタイル]-[スタイル領域]でスタイル要素を書くエリアを作ります。

    2.タグごとにスタイルを記述

    <STYLE>内に[HTML]-[スタイル]-[スタイル要素]でタグごとにスタイルを書いていきます。感覚としては「え〜と、H2はこのフォントでこの大きさにして、H3はこの色とこの色のものを用意しておくか・・」といった感じです。

    例:
    <STYLE>
    <!--
    H2 {font: 22pt "Arial"}
    H3.yellow {font: 18pt "Arial";color: #FFFF00}
    H3.green {font: 18pt "Arial";color: #00FF00}
    .red {color: #FF0000}
    -->
    </STYLE>

    3.文書にスタイルを設定

    2までがスタイルを使う準備、といったところでしょうか。これから実際にスタイルを設定したい箇所にスタイルを設定していきます。

    上の例で、まずH2のスタイルを設定します。これは単純で普通に[HTML]-[フォント]-[見出し]でH2を設定するだけです。

    次にH3ですが、これにはyellowとgreenの二つのクラスがあります。どちらのスタイルにするかは[HTML]-[フォント]-[見出し]で「クラス」から選択するだけです。

    redにはタグの指定がありません。つまり、どのタグでも使える、ということです。ここでは文章の一部をこのクラスを指定し、赤色にしたいとします。その場合には、赤色にしたい部分を選択し、[HTML]-[スタイル]-[部分スタイル]からクラスで「red」を選択します。これでSPANタグが挿入されスタイルが設定されます。

    このように、特にタグを設定せずにスタイルだけ設定したいときには、<SPAN>タグや<DIVタグ>が便利です。


    より詳しい情報
    表紙へ

    Copyright(C) Dicre Ltd.