HOME > オンラインマニュアル
> ホームページ作成ガイド > CSS編 > 基本ルール－スタイルの記述方法－
ホームページ作成ガイド
CSS編
基本ルール-スタイルの記述方法-
1. 外部ファイルから読み込む
|
| |
|
ＨＴＭＬファイル以外にスタイルに関する記載だけを書いてあるファイルを用意しておいて、
ＨＴＭＬファイルの方には一緒に読み込むよう記載しておく方法。
この方法を用いると１つの設定ファイルを複数のページにあてはめることができるので、ホームページ全体のスタイルを統一することができます。
|
|
まず拡張子.cssのファイルを用意します。
このファイルの中にはスタイルに関する記述のみを書きます。
次に、ＨＴＭＬ文書本体の<HEAD>～</HEAD>の間に
<LINK REL=STYLESHEET HREF="スタイルファイル名"
TYPE="text/css"> |
というように記述しておきます。
これにより、ＨＴＭＬ文書がブラウザに読み込まれる時に同時にスタイルファイルの方も読み込まれ、スタイルが反映した文章が表示されます。
|
|
2. HTML文書内に埋め込む
|
| |
|
ＨＴＭＬファイル本体にスタイルに関する記述を行う方法です。
スタイルに関する設定はＨＴＭＬファイルの冒頭にまとめて記載します。
この方法を用いることによって、ページごとにスタイル設定を変えることができます。
|
|
ＨＴＭＬ文書本体の<HEAD>～</HEAD>の間に、
<STYLE TYPE="text/css">
～スタイル設定についての記述～
</STYLE> |
の記述を行います。
これにより、<STYLE>～</STYLE>内に設定内容が記載されているページに限り記載されたスタイルが表示に反映されます。
|
|
3. インラインで埋め込む
|
| |
|
スタイルを反映させたい部分をタグで囲い、タグの中にスタイルに関する述をして設定を反映させる方法です。
この方法を用いることによって１部分だけ特殊な効果を得たい場合などに利用することができます。
普通のＨＴＭＬタグをつかうのと同じような感覚で記述していけばよいでしょう。
|
<H1 STYLE="font-size:15pt;color:Maroon;">
スタイルシート作成講座</H1> |
のように記述することで、<H1>～</H1>タグで囲まれた部分は設定した内容が反映された表現になります。
ただし内容が反映されるのは、あくまでもスタイルの設定を内部に含むタグに限定されます。他の<H1>タグに囲まれた文章は影響を受けません。
以上が主なスタイルシートの設定方法です。
実際に使用するときはこの内のどれか、または複数を組み合わせて使用することになります。
この場合問題になるのは、同じ要素に対して複数のスタイルを設定してしまった場合です。
この場合、優先順位は以下のようになります。
| インライン埋め込み ＞ ＨＴＭＬ埋め込み ＞ 外部ファイル読み込み |
|
|
4. スタイルファイルから読み込む
|
| |
|
スタイルシートからさらにスタイルシートを読み込むという、変わったやり方です。
残念ながら、この機能はNetscapeNavigatorではサポートされていません。
|
|
従来の方法で作った.cssファイルを読み出すための.cssファイルの冒頭に以下のような記述を加えます。
| @import url(読出対象の.cssファイル名); |
読み出すファイル名が複数あれば、@import url（）も複数行記載します。
|
|
:link ：Ａタグで囲まれたリンクで未参照のもの
:visited ：Ａタグで囲まれたリンクで参照済みのもの
:active ：マウスボタンが押されるなどでアクティブ状態
:hover ：マウスカーソルが重なっている |
上のように、要素名と擬似クラスを":"(コロン)でつないで記述します。 |
|
