スタイルシートを一箇所で管理


スタイルシートを一箇所で管理できるようにします。
ホームページが何ページあっても、一箇所スタイルシートを変更すれば、全てのページが 同時に変更できるようになります。
部分的に限定して使う方法にも触れています。


TOPページに戻る   文字サイズを変えるには Control キーを押しながらマウスのスクロールホイールを回してください
スタイルシートを使い、全ページのタグを一箇所で管理       

ここまでは、『どこに』『何をするか』は、すべて<HEAD></HEAD>の間の、各ページごとに記入してきました。
しかし複数のページがある場合は、一々書くのは面倒です。まとめて一つのファイルに書いてしまいます。
こうすれば、このファイルを変更するだけで、全てのページを同時に変更できるようになります。
季節により背景を換えたり、色を変えたりすることが手軽に、間違いなくできるようになります。

専用ファイルを作る
今迄<HEAD></HEAD>の間に書いていた部分を、独立した1枚のファイルにします。
例えば下のように書いていたら、枠で囲った部分だけを抜き出します。
<STYLE TYPE="text/css">
<!--
A {font-size:10pt}
A .1 {font-size:10pt; color:red;}
TD{font-size:11pt; color:"#444444"; line-height:140%}
Div{font-size:11pt; color:"#444444"; line-height:140%;}
DIV.1 {font-size:11pt; font-weight:bold; border:1pt #666666 solid;width=400px; padding: 5px;}
-->
</STYLE>
ファイルにする際、頭にHTMLをつけるとか余計ななことは一切必要ありません。 単に枠で囲った部分だけをファイルにします。
ファイル名には『.css』を付けます。haru.css 等と適当に名前を付ければOKです。

専用ファイルを読み込む
専用ファイルに書いたスタイルシートの内容を、個別のページに適用していきます。 ここは呪文として覚えるだけです。次のように書きます。
<HTML><HEAD>
<TITLE>超簡単ホームページ作り</TITLE>
<LINK REL="stylesheet" type="text/css" href="ファイル名">
</HEAD>
<BODY>本文</BODY>
</HTML>

href="ファイル名"の部分に、上で作った読み込む専用ファイル名を記入します。
href="haru.css" のような具合です。
すべてのページに一度このように書いておけば、haru.css の中味を変えるだけで、すべてのファイルの見映え・レイアウトを 一括して変更することができます。
季節に応じてホームページの色使いを変更する、何てことも簡単にできてしまいます。
上に戻る

スタイルシートを部分的に限定して使う       

部分的にスタイルシートを適用する方法です。 <HEAD></HEAD>間には何も書きません。効果を適用したい場所ごとに『何をするか』を記入していきます。
通常の HTML と同じ書き方になります。違いは HTML では使えない効果も使えることです。

書き方
style="何をするか"という書き方をし、使いたい場所ごとに書いていきます。 こんな感じです。
<HTML><HEAD>
<TITLE>超簡単ホームページ作り</TITLE>
</HEAD><BODY>
部分的に、少しだけスタイルシートを利用するときに適した使い方です。 <SPAN style="font-size: 10pt; background:green; ">HTMLのタグとまったく同じ要領 </SPAN> で使え、部分的に効果を与えたい場所を、与えたい効果を書いたタグで 挟んでいくだけです。この文中では「HTMLのタグとまったく同じ要領」の部分が「フォントサイズ10ポイント・背景色が緑」なるような 指示をしています。
リンク部に使うときであれば、 <A style="font-size: 10pt; background:green; " href="aaa.htm">ここをクリック</A>のような 使い方をします。
</BODY></HTML>


TOPページに戻る 前に戻る 順番に次を見ていく