ワンコワールド内 Contents Page 最下部に 各ページへ 戻る リンク があります。

☆ STYLEとは?・使い方 ☆

 STYLEとは?

HTML 文章の見栄えを良くする属性の 1 つです。
部分的にスタイルを適用する場合から文書全体に使用する場合など色々使えます。
また、ほとんど全ての要素に対して使用可能です。
この、属性は 3通りの使い方が出来ます。
 1.個々のタグに付け加えて使う。
 2.ページ全体に適応するように、head 要素の中に style 要素を記述する。
 3.CSSファイルを作り、複数の Web ページで共有する。
と言った使い方が出来ます。 非常に汎用性の高い属性の1つです。

1.の方法については、皆さんはすでに使っていると思いますのでここでは、省きます。
ホームページ作成ソフトでも、多用しています。
ソース表示をさせれば、いたる所に ( STYLE ) と言うタグを見つけられるでしょう。
という事で、このページでは、2.の方法を簡単に説明します。
そして 3.の方法を少し詳しく説明したいと思います。
このページで、STYLE に目覚めた方は、専門のサイトで学ぶことをお勧めします。(^◇^)

 2.の head 要素の中の style 要素を有効に使う

head 要素内の style 要素で指定 をすると、そのページの HTML 文書の全体を通して
共通のスタイルを設定することができます。複数のスタイルを同時に設定できます。
ページ背景 ( 色や写真等 ) を指定したり、標準の文字の色や大きさ、行幅・ページのマージンなど
ページをデザインする事が出来ます。
しかし、ページ内での STYLE 指定なので、別のページを書く時は、また、同じ事をする事になります。
そこで、外部にスタイルシートを作って ( 3.の方法 ) 他のページでも同じ設定を使える様にすれば、
効率がぐんと上がると思いませんか? 以下に説明していきます。

 スタイルシートを使うってどういう事?

スタイルシートを使うということは 「自分の HTML 文書に、自分が作った CSS を使う 」ということです。
スタイルシートを別に用意して、他の方のブラウザが自分のページを読み込む前に、
そのスタイルシートを読んでからから HTML 文書を表示するようにする。ということですね。

たとえば、AAA.html、BBB.html、CCC.html というページで、同じスタイルを個別に設定している場合、
セレクタやプロパティの追加や削除の際、各ページをひとつひとつ修正しなければなりません。
この内容を、外部ファイル化しておけば、その外部ファイルのみを修正すれば良い事になり、
HTMLページの書き換え作業効率が格段に向上します。

 なぜ、スタイルシートを使うといいの?

CSS を外部ファイル化することで、同一のスタイルを複数の Web ページで共有できます。
ということは、効率的に Web サイトを管理できるようになるということです。
また、CSS を外部ファイル化すると、ユーザー側の表示待ち時間を小さくできるというメリットがあります。
なぜならブラウザでの表示の際、その外部ファイルを一度読み込むだけですむので
他のページに移動しても再度読み込む必要がないからです。

但し、現在一般に有名なブラウザで CSS に対応しているのは、以下のようなブラウザです。
Internet Explorer ( IE ) ではバージョン 4 以降。
Netscapce Navigator ( NN ) でもバージョン 4 以降。
Mozilla Firefox などです。

 CSS ファイルって?

外部ファイルによるスタイル設定

もっとも汎用性が高いのは、外部ファイルにスタイルを記述し、それを読み込む方法です。
スタイル定義ファイルは、「セレクタ」と「宣言」を必要なだけ列挙したテキストファイルなので
Windows に付属のメモ帳でも作成できます。
スタイルシート の場合は通常 「 .css 」 という拡張子をつけて保存します。
スタイルを設定した外部ファイルは、head 要素の中の link 要素を使って取り込みます。

 CSSファイルの作成手順

スタイルシートの外部ファイルを作って見ましょう。

1.CSS の外部ファイルを作成

テキストエディターを開き、CSS の内容を記述し、拡張子を「.css」として保存します。 たとえば、以下の様に書くと・・・

body {              ←body 内で
color: #ff0000;          ←文字色は赤
background-color: #ffffff;  ←背景色は白
}                  ←指定終了

と言うようになります。 ( 指定文字は、すべて半角です )
上記のように書いたテキストファイルを 「○○○.css」と言うように保存します。
たとえば、「 css 」というサブフォルダに、「 123 .css 」というファイル名で保存するとすると、
パスは css/123.css と言う感じですね。

※ サブフォルダ名、ファイル名とも、どのような名前でも構いません。
  サブフォルダ名については、「 css 」 とすると、分かりやすいですが・・・

2. CSS の外部ファイルを呼び出す為にページ内に書き込みをする。

呼び出したい HTML 文書の <head> の範囲内に、
<link rel="stylesheet" type="text/css" href="../css/123.css"> と書くだけです。

なお、ひとつのページに複数の外部ファイルを適用することも可能です。
上記とあわせて「css/456.css」を呼び出す場合も同じように記述します。
<link rel="stylesheet" type="text/css" href="../css/123.css">
<link rel="stylesheet" type="text/css" href="../css/456.css"> と書くだけです。

2つのスタイルシートを書いた場合、あとに読んだ方が有効になります。
つまり、同じ内容の定義を2つの css で、していた場合、後に書いた CSS が使われる事になります。

 さらにきめ細かく・・・

スタイルできめ細かな表現ができるなら、たとえば 「 注釈 」 や 「 重要 」 など特定の役割を持つ文字に
異なるスタイル設定をしたいと思いますよね。
style 要素や外部ファイルを使う場合、セレクタに p や h 1 などの要素タイプ名しか記述できないと、
こうした使い分けができずあまり使い勝手が良くありません。
そこで、個別の要素 ( タグ ) に class 属性 を指定し、そのクラスをセレクタとする事で、
よりきめ細かなスタイルを設定ができる様になります。
また、id 属性とスタイルを対応させれば、ドキュメントの中でその id を持つ要素だけに適用される
スタイルを定義する事もできます。

クラスセレクタ

セレクタでクラスによる指定をするためには、「 要素タイプ名 . クラス名 」 のように、
ピリオドの後ろにクラスの名前を記述します。
要素タイプ名を省略して 「 .クラス名 」 のようにすると、全ての要素タイプに共通のクラスを
設定することができます。

たとえば・・・上記2.の方法で記述すると

<head>
<style type="text/css">
p.;red {color: red}
.blue {color: blue}
</style>
と言うように書くと同じ ( P ) の指定でも、赤い字と青い字が表示できます。

セレクタを指定するときに #半角英数字の名前 でセレクタを指定するとidを宣言したことになります。
idを宣言し、今度はCSSを適応させたい要素の id属性 で宣言した名前を指定すると、
その部分にだけCSSが適応されて便利です。

たとえば・・・

<style type="text/css">
<!--
#bbb { font-size : 15pt }
-->
</style>   と STYLE 宣言しておいて

文書内で以下の書き方をすると・・・

<p id="bbb">この部分の文字サイズは15ポイントになります。</p>

と、色々な指定の仕方が出来ます。1つの方法にこだわらず、それぞれをうまく使いこなせば
色々な表現が出来そうですね。
ただ、あまりにも1ページに色々な事をしてしまうと、見ずらいページになりますので、気をつけましょう。
また、対応ブラウザで、見ている方ばかりでは無い事も、念頭に入れておく必要がある事を忘れずに!

 CSS設定の気遣い

フォントサイズには、絶対単位を使わない様に心がけましょう。
CSS でフォントサイズを指定するには、大きく分けて 「 絶対単位 」 、 「 相対単位 」 、 「 パーセント 」 の
3 つが利用できます。
ただし、絶対単位で指定してしまうと、ユーザー側でブラウザの設定を変更し、
フォントサイズを変えることができなくなってしまい、ディスプレイが小さかったり、お年寄りなど文字を
大きくして見たい場合など、不都合が出てしまいます。
出来ることなら、フォントサイズを指定する際は、絶対単位 ( pt ) ではなく、
相対単位やパーセント ( % ) を使うようにしましょう。



・・・Frame で閲覧している方へ・・・
URLを知りたい時、印刷や一時的にお気に入りに入れる場合などの為に単一 Page 表示に出来ます。
こちら をクリックしてください。 戻るときは、開いたページを閉じてください。

[ index-Page へ戻る ]    [ Top-Page へ戻る ]    [ Frame Main-Page へ戻る ]


Valid HTML 4.01!    Valid CSS!