前のページでスタイルシートをタグに直接書く方法を使っています。
＜タグ ｓｔｙｌｅ＝”・・・・いろいろ書く・・・・”＞ 〜 ＜／タグ＞という感じで。
ところがスタイルシートは、いろいろと指定できて便利なのですが、入力する文字がけっこう多いのです。
そこで、スタイルシートを
<head></head>の中にまとめて指定する方法と、
別のファイルにスタイルシートのみを記述して、それを読み込む方法のお話です。
まず、スタイルシートを
<head></head>内にまとめて指定するには、
|
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=X-SJIS">
<title>タイトル</title>
<STYLE TYPE="text/css">
<!--
ここにスタイルシートを書く！
-->
</STYLE>
</head>
<body>
</body>
</html>
|
この赤い文字の部分を
<head></head>内に書き入れます。
そして、例えば、そのページ内の
<p></p>タグにすべて共通のスタイルシートを書く場合、
|
<p style="font-family:'ＭＳ Ｐゴシック';font-size:12pt;color:#000000">
いろいろな文章
</p>
そして他にもいろいろ書いて、その後また<p>タグにさっきと同じスタイルシート
<p style="font-family:'ＭＳ Ｐゴシック';font-size:12pt;color:#000000">
そしてまた別の文章
</p>
|
<STYLE TYPE="text/css">
<!--
p {font-family:'ＭＳ Ｐゴシック';font-size:12pt;color:#000000;}
-->
</STYLE>
と、書き入れると、そのページ内の
<p>タグすべてに、その指定したスタイルシートが適用されます。
タグを書き入れるごとに、属性として、いちいち
style="・・・・・・"と、書かなくていいのです。
ちなみに、このように改行して書いてもかまいません。
<STYLE TYPE="text/css">
<!--
p {
font-family:'ＭＳ Ｐゴシック';
font-size:12pt;
color:#000000;
}
-->
</STYLE>
◆
そして、２種類のタグすべてに共通のスタイルシートを指定したい場合は、
例えば、
<p></p>と
<div></div>に同じスタイルシートを適用したいとき、
<STYLE TYPE="text/css">
<!--
p,div {
font-family:'ＭＳ Ｐゴシック';
font-size:12pt;
color:#000000;
}
-->
</STYLE>
と言うふうに、タグとタグを
, で区切って並べて書きます。
◆
次に、どのタグで使用するかわからないけど、そのページでよく使うスタイルシートを指定するには
<STYLE TYPE="text/css">
<!--
.クラス名 {
font-family:'ＭＳ Ｐゴシック';
font-size:12pt;
color:#000000;
}
-->
</STYLE>
クラス名の直前に
. を必ずつけます。
そして、適用したいタグに
<div class="クラス名"></div>とか、
<h2 class="クラス名"></h2>と言うふうに指定します。
ここには
. をつけない。
クラス名は半角のローマ字で自由に決めることが出来ます。
例をあげると
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=X-SJIS">
<title>タイトル</title>
<STYLE TYPE="text/css">
<!--
.moji {
font-family:'ＭＳ Ｐゴシック';
font-size:12pt;
color:#000000;
}
-->
</STYLE>
</head>
<body>
<div class=" moji">ここにスタイルシートが！</div>
<table>
<tr>
<td class=" moji">ここにもスタイルシートが！</td>
</tr>
</table>
</body>
</html>
|
と、このようによく使うスタイルシートは
<head></head>内にまとめて指定できます。
次に、別のファイルにしてしまう方法です。
スタイルシートのみを書いたファイルを用意します。
それにはｈｅａｄもｂｏｄｙも書きません。
スタイルシートのみを書いておくのです。
そして、拡張子を
cssとして・・・
そのスタイルシートを使いたいホームページに読み込みます。
まず、スタイルシートのみのファイルを作ります。
|
.oomoji{font-family:'ＭＳ Ｐゴシック';font-size:30pt;color:#8080ff;}
.komoji{font-family:'ＭＳ Ｐゴシック';font-size:10pt;color:#0000aa;}
p,div{font-family:'ＭＳ Ｐゴシック';font-size:12pt;color:#000000;}
|
こんな感じで、書いたものをファイル名は何でも良いのですが、拡張子をｃｓｓで保存して、それをアップロードしておきます。
例えば、
mojisize.cssというファイル名にしたとしましょう。
そして、そのスタイルシートを使いたいページに、次のように書きます。
（
<head></head>内に！）
<head>
<link rel="stylesheet" type="text/css" href="mojisize.cssのアドレス">
</head>
これなら、１度設定したスタイルシートを複数のページで共用して使えます。