|
初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう VOL3. スタイル設定の書式 その２★HTMLに書き込む
外部ファイルを作っておくと、どのページからでも呼び出せて便利ですが、ひとつのページでだけスタイルシートを動作させたい時や、外部ファイルの一部だけを変更したい場合もあります。こういう時はスクリプトをそのままHTMLに書込むことによって、スタイルを設定したり、変更を加えたりすることが出来ます。スタイルシートには適用の優先順位が予め設定されているので、例えそのページに外部ファイルが読込まれていても、HTML上に直接書かれた部分の設定は、そちらが優先して表示に反映されるからです。(※優先順位については、Column9.「スタイルの優先順位」を、ご参照下さい。) HTMLにスタイルシートを書込むには、以下の2通りの方法があります。
１．<head>〜</head>の間に指定 <head> <style type="text/css"> <!-- セレクタ { プロパティ: 値; } セレクタ { プロパティ: 値; } セレクタ { プロパティ: 値; } ・ ・ ・ --> </style> </head> 以上のように設定を、<style type="text/css">〜</style>で囲んで、<head>〜</head>内に記述すれば良いわけですが、スタイルシートに対応していないブラウザでは、この部分がテキストとしてそのまま画面に現れてしまう場合があります。そこで、設定内容をコメントを示すタグ<!-- 〜 -->で囲んで、テキストとして読込まれてしまった時でも画面に露出しないようにしておくのが一般的です。これらの点さえ覚えておけば、設定の仕方は外部ファイルと全く変わりません。
２.<body>〜</body>の間に指定 <body>〜</body>に書かれている内容の一部にスタイルを適用させたい時は、設定したい部分のタグ内に記述します。例えばページ内で、ひとつの段落のみ色や文字サイズを変えたいような場合... <p style="color: blue; font-size: 14pt;"> 〜テキスト内容〜 </p> 以上のように書込めば、その段落だけが指定されたスタイルで表示されます。つまり、HTMLタグ内に「style属性」を用いて書き加えるわけですね。(※タグの構成と属性については、Colum2.「タグの構成」 を参照して下さい。) ひとつのタグに対して複数の設定をしたい時は、「プロパティ: 値;」を横に並べます。「プロパティ: 値;」ごとに必ず「;」を入れるのを忘れず、半角スペース空けて次の項目を書くようにして下さい。項目がひとつの時や、最後の項目では「;」を入れなくても構いませんが、外部ファイルを書く時同様、付け忘れや編集時の脱落防止に最後まで「;」を付ける習慣にしておくと予防になります。設定内容全体を囲んでいる「" "」の位置にも注意して下さい。
>> 初級篇2.VOL４.ＣＳＳにおける「BOX概念」とは?
|
2007.7.10.
