スタイルシート(CSS)の組み込み方

CSSの設定方法

スタイルシート（ＣＳＳ）の設定方法は大きく3種類に分けることが出来ます。

タグ(セレクタ)に囲まれた部分のみに適用する。
ページ全体の同一タグに適用する。
別ファイルでＣＳＳを作成してリンクを使用してスタイルを適用する。

タグ(セレクタ)に囲まれた部分のみに適用

個々のタグ(セレクタ)にスタイルを適用する場合には、通常の開始タグ宣言の中に style="スタイルシート" と記述します。

例えば、ある１つの<p>タグにのみスタイルを使用する場合は下のようになります。

【記述例】

上のように記述すれば、任意のpタグにのみサイズ14ピクセルのスタイルが適用されます。

ちなみに複数のスタイルを適用させるには、

といった感じでスタイルとスタイルの間に『;(半角セミコロン)』を記入して記述します。（一番後ろのスタイル文にはセミコロンは不要です。）

ページ全体の同一タグに対して適用

上の例だとある1つのタグについてのみのスタイル適用となるので、同一タグで同じスタイルを用いて表示させたい場合には１つ１つスタイルを記述しなければなりません。
これって、すごく手間ですよね。

そこで、次はページ単位でスタイルを適用する方法について説明します。
この場合は、

を<head>～</head>内に記述してあげます。
そう、つまりページ情報としてスタイルを適用させるわけですね。

【記入例】

<head>
・
・
<style type="text/css">

</style>
</head>
<body>
・
・

これでスタイルを適用したページ内の全てのpタグにサイズ14ピクセル、フォントカラー”＃000000(白)”のスタイルが適用されました。
他のタグにもスタイルを適用させたい場合は<style type="text/css">～</style>内に追加していけばＯＫです。

<解　説>

まず、<head>～</head>内にスタイルを使用することを宣言する為に<style type="text/css">～</style>を記述します。
次に、<style　type="style/css">～</style>の中に適用したいスタイルを記入していきます。
この時に、スタイルシート全体をで囲みます。これは、ＣＳＳに対応していないブラウザーで表示したときにＣＳＳのソースをテキストとして表示するのを防ぐためのものです。

１つのスタイルを複数のタグに適用させたい場合(例えば、<p>タグと<h2>タグに同じスタイルを適用させたいetc)は、

p,h2,・・{スタイルの内容}

というように要素名の間を「,(半角カンマ)」(注：ピリオドでは無くカンマです)で区切って記述します。なお、最後の要素名のあとには「,」は不要です。

ＣＳＳファイルをリンクしてスタイルを適用

最後に別ファイルでCSSを記述して、それをリンクによって読み込んで使用する方法を紹介します。

この方法を使えば複数のページのレイアウトや装飾などを一括して編集することが出来ます。
では、その仕組みについてお話しします。

まず、外部ファイルとしてCSSを記述するファイルを、HP作成支援ソフトなどで作成します。この時に拡張子を「○○.css」と記述します。例えば「bass1.css」といった感じですね。

次に、そのファイルの中に適用させたいスタイルを記述していきます。

p{font-siize: 14px;
color:#000000;
}
h1{font-size:20px;
margin:0;
color:#ffffff;
}
・
・
・

といった感じですね。

最後に"2"で作ったcssファイルをHTMLソースの<head>～</head>内でリンクします。
これは、画像を挿入するときと同じ考え方で行います。
まず、ＨＰを作ろうとしているフォルダーの中に新しいフォルダーを作って半角英数で名前をつけます。ここでは分かりやすく「css」って名前にしときますね。で、上の例のようにして作った「○○.css」というファイルを呼び出します。この時、

という記述を<head>～</head>内に記入します。これでcssというフォルダーにある「○○.css」というスタイルシートを読み込んだことになります。

この方法で同じ「○○.css」というスタイルシートを他のページでも読み込んでおくと、そのスタイルシートを編集しただけで、複数のページのスタイルを変えることが出来るようになります。どうです？ＣＳＳって便利でしょ？

無料レンタルサーバー

優良レンタルサーバー