|
スタイルシートを使うには3種類の方法があります。 1.外部ファイル(拡張子.css)から読み込む方法
2.<head>タグ内で定義する方法 3.タグにスタイルを定義する方法
| |
まず、1.外部ファイル(拡張子.css)から読み込む方法とは、htmlとcssを別々のファイルに分けて、リンクさせるということです。
メリットとしては、同じスタイルにさせたいHTMLファイルが大量にある場合、スタイルの記述は、CSSファイル一回で済むのでデータ容量が抑えられます。この時、スタイルを読み込ませたいHTMLファイルの<head>タグ内にその旨を記述しなければならないので、手間が少なくなるかというとそういうわけではないでしょう。
| 
HTML内の<head>タグ内に次の文で定義します。 <link rel="stylesheet" href="スタイルシートのURL"
type="text/css"> |
2.<head>タグ内で定義する方法とは、HTMLファイル1ページごとに違ったスタイルをかけたい場合に使用します。
例えば、「このページのスクロールバーの色は白にしたいんだけど、他のページは青がいいな」なんてときに使います。白いスクロールバーのページは、この方法を使い、他のページの青いスクロールバーは、1の外部ファイルから読み込む方法と使い分けるのがよいでしょう。
|
HTML文書の<head>タグ内へ次のように記述します。 <style type="text/css">
<!-- a { background-color: orange} --> </style>
|
3.タグにスタイルを定義する方法は、HTMLファイルのこの部分だけスタイルを変えたいという場合に使用します。
例えば、こんな感じをhtmlで表すと、ソースを見てもらえばわかるのですが、(メニューバー/表示→ソース)
<b style="background-color: #ffff66">こんな感じ</b> という記述になっています。
そうです。 太文字の<b>タグについている style="background-color: #ffff66"
がスタイルですね。 はっきり言って、これはタグ一つ一つに記入していかなければならないので、かなり面倒な作業になります。 ここぞというときにだけ使いましょう。
| タグ内へ直接書き込みます。
<b style="background-color: #ffff66"> <span style="font-size:
26pt">サンプル</span> などなど。 |
| これらの3種類のCSSを巧みに使ってCoolなサイトを作りましょう!
|