-
■ 1 スタイルを一括して記述した外部ファイルをつくる。( my_style2.css )
「2-2 本文内の文字サイズ・行間隔などを一括で変える！」で設定したスタイルシートを外部ファイルとして読み込ませる事により、各ホームページごとに記述する必要がなくなります。
この外部ファイルはテキスト文書で、今回は、( my_style2.css )というファイル名で保存します。
A{text-decoration : none;}
・・・リンクの下線を表示させない。
A:HOVER{color : yellow;background-color : blue;text-decoration : underline;}
・・・リンク部分にマウスを乗せたときに色を変える。
BODY{font-size: 11pt;
line-height: 140%; }
・・・BODY 部分のフォントサイズおよび行間隔の設定。
TABLE{font-size: 11pt;
line-height: 140%; }
・・・TABLE 部分のフォントサイズおよび行間隔の設定。
PRE.c {font-size: 11pt;
border: 1px solid gray;
padding: 5px;
white-space: pre;
width: 100%;
background-color: #fffff0; }
・・・PRE(class=c) によるフォントサイズ、枠の色、間隔、
バックグラウンドカラーなどの設定。
SPAN.s {font-size:25pt;
line-height: 100%;
width:100%;
filter:Shadow(color=silver,direction=135); }
・・・SPAN(class=s) による影付き文字を設定。
-
■ 2 スタイルシートを設定したファイルを読み込む。<LINK>
このスタイルシート設定ファイルは、リンクの表示に関するスタイルシートと同様に <HEAD>〜</HEAD>タグの間に読み込むための、<LINK>タグを挿入します。
<HTML>
<HEAD>
<TITLE>・・・</TITLE>
<LINK rel="stylesheet" href="../my_style2.css">
</HEAD>
<BODY>
・・・・・・
</BODY>
</HTML>
-
■ 3-1 スタイルシートを設定したタグを使う。<A>〜</A>
(2-1)で説明した、「リンク部分にマウスが乗ったら色を変える！( <style>〜</style>タグ)」と同じです。
<HTML>
<HEAD>
・・・・
</HEAD>
<BODY>
テストです。→「<A href="hptec_00.htm">目次へ戻る</A>｣<BR>
</BODY>
</HTML>
［実行結果］
テストです。→「目次へ戻る｣
-
■ 3-2 スタイルシートを設定したタグを使う。<BODY>〜</BODY>
(1-1)で説明した、「<BODY>〜</BODY>内の文字サイズ・行間隔を設定する」で設定したのと同じ結果となります。
<BODY>〜</BODY>タグに関してはスタイルシートで設定した内容が全文に関して有効となります。（一度しか使いません。）
ただし、<TABLEY>〜</TABLE>タグなどの中は別途設定する必要があります。
-
■ 3-3 スタイルシートを設定したタグを使う。<TABLE>〜</TABLE>
(1-1)で説明した、「<TABLE>〜</TABLE>内の文字サイズ・行間隔を設定する」で設定したのと同じ結果となります。
<BODY>〜</BODY>タグに関してはスタイルシートで設定した内容が全文に関して有効となります。（一度しか使いません。）
ただし、<TABLEY>〜</TABLE>タグなどの中は別途設定する必要があります。
<TABLE BORDER="1" >
<TR><TD>
このテーブル内の表示は一括してスタイルシートが設定されているので、<BR>
都度スタイルシートを設定しなくても<BR>
文字サイズ１１ポイント<BR>
改行間隔１５０％に設定されています。<BR>
</TD></TR>
</TABLE>
このテーブル内の表示は一括してスタイルシートが設定されているので、
都度スタイルシートを設定しなくても
文字サイズ１１ポイント
改行間隔１５０％に設定されています。
|
なお、一括設定はしてあっても次のように個々に設定する事は勿論可能です。
<TABLE BORDER="1" style="font-size: 5pt; line-height: 200%; ">
<TR><TD>
このテーブル内の表示は、<BR>
スタイルシートにより文字サイズ５ポイント<BR>
改行間隔２００％に設定されています。<BR>
</TD></TR>
</TABLE>
このテーブル内の表示は、
スタイルシートにより文字サイズ５ポイント
改行間隔２００％に設定されています。
|
-
■ 3-4 スタイルシートを設定したタグを使う。<PRE class=c>〜</PRE>
pre は PREformatted text（整形済みテキスト） の略です。ソース中のスペースや改行をそのまま表示します。
ソースコードなどを表示する際に便利ですが、< や > や & は特殊文字として認識されてしまうので、< や> や & で記述します。
なお<PRE class=c>として、class を記述していますが、これはスタイルシートにて
PRE.c { ･･････ } としてクラス名を付けているためで、省略するとスタイルシートの設定を反映する事ができません。
<PRE class=c>
pre は PREformatted text（整形済みテキスト） の略です。
ソース中のスペースや改行をそのまま表示します。
ソースコードなどを表示する際に便利ですが、< や > や & は特殊文字として認識されてしまうので、
< や> や & で記述します。
</PRE>
pre は PREformatted text（整形済みテキスト） の略です。
ソース中のスペースや改行をそのまま表示します。
ソースコードなどを表示する際に便利ですが、< や > や & は特殊文字として認識されてしまうので、
< や> や & で記述します。
-
■ 3-5 スタイルシートを設定したタグを使う。<SPAN class=s>〜</SPAN>
<span> 自身は特に何の意味も持たないタグです。<span>〜</span> で囲まれた部分にスタイルシートを適用したりするのに用いられます。
同様なタグに <div> があります。<div> はブロック要素（前後に改行がはいる）の汎用的なタグとして、<span> はインライン要素（前後に改行が入らない）の汎用的なタグとして使用されます。
なお<SPAN class=s>として、class を記述していますが、これはスタイルシートにて
SPAN.s { ･･････ } としてクラス名を付けているためで、省略するとスタイルシートの設定を反映する事ができません。
<span class=s>
<font size=+2 color=red>
影付きの文字
</font>
</span>
影付きの文字