見る人に優しいウエブ作成


Directory

はじめに
CSSの利点
CSSの書式
CSSの定義
CSSの単位
継承について
CSSのプロパティ
CSS実例編 (1)
CSS実例編 (2)
CSS実例編 (3)
CSS実例編 (4)
CSS実例編 (5)


Contents

優しいウエブ作成
HTML入門
画像処理入門
ページレイアウト入門
スタイルシート入門
用語集
サポートタグ

+++ スタイルシート入門(基礎編)+++

戻る
次へ

■ スタイルシートの定義

スタイルシートの指定方法は、以下の3種類(実際は4種類ですが、IEのみ対応の為省略)があります。

■インラインスタイルシート■
HTML内の好きな場所にスタイルシートを記述します。開始タグに直接STYLE属性を指定する方法です。

<H1 STYLE="color:blue">見出し1を青くします</H1>
<P STYLE="color:blue">ここの文字を青くします。</P>

<HEAD>〜</HEAD>間にスタイルシートコードを記載する必要はありません。 好きな箇所だけ見栄えを変える事ができます。しかし修正が必要になった場合は、 これまでのHTML同様にそれぞれの適応箇所単位での修正が必要です。

■エンベディングスタイルシート■
1ページ単位(そのページのみ)でスタイルシートを指定したい場合に使います。 <HEAD>〜</HEAD>間にSTYLE要素を記述します。

<STYLE type="text/css">
<!--
スタイルの記述
-->
</STYLE>


type="text/css"を記述する事で、CSSをサポートしないブラウザは無視するようになります。 コメントタグは、古いブラウザ(NN3など)でtype="text/css"と記載しても認識しないものがあり、 スタイルの定義部分がブラウザに表示されるのを防ぎます。 インラインより変更は便利ですが、それでも修正はページ単位です。

■リンキングスタイルシート■
外部のスタイルシートファイルをリンクして、すべてのページに対して、このルールを適用します。 <HEAD>〜</HEAD>間に記述します。

<LINK rel="stylesheet" type="text/css" href="ファイル名.css">

まず最初に、適用するスタイルシートを記述し保存します。ファイル名の拡張子は、"css"で保存します。 次に、適用したいページの<HEAD>〜</HEAD>間に上記のような記述します。 HREF属性は、HTML同様にURLでの指定が可能です。 これが、最も便利な使い方で、CSSファイルを編集するだけで、一瞬にして全ページの見栄えを変える事ができます。



■ スタイルシート定義の優先順位

スタイル設定の優先順位は、高い順で下記のようになります。

1、インラインスタイルシート
2、エンベディングスタイルシート
3、リンキングスタイルシート
4、ブラウザの初期設定スタイル

これは、スタイルの指定が重複された場合に適用される優先順位です。




Prev | Home | Next




Copyright(C) 1999-2000, ken_yuu All Right Reserved.