スタイルシートマニア
CSSファイルを読み込む | ホームページカスタマイズ Tips
さて実際にCSSをサイト内に取り入れて見ましょう。
方法としては、３つあります。
１．CSSファイルを読み込む
もっとも基本的な方法で、link要素のhref属性の値にCSSファイルのURLを指定して読み込ませます。
このとき、link要素を複数書けば、その数だけCSSファイルを読み込ませることができますが、現在の作成方法はHTML側からの指定するCSSファイルは一つにしておくというのが主流です。
これはHTML側で「読み込み用.css」を読み込ませてその中から@import命令で各CSSファイルを読み込むという方法です。
これを発見したときは、目から鱗でした（笑）
記述例
<link href=”css/import.css” rel=”stylesheet” type=”text/css” />
２．head要素内にstyle要素を入れてCSSを記述
これは、titleタグなどを記述する場所と同じところに記述する方法です。
Yahoo!なんかはこれを使って、つらつらと。。。長々と。。。沢山書いてHTML内に全てのスタイルを書いています。
ある意味すごいです（笑）
一度Yahoo!に行ってソースを見て見るのも良いかもしれません。
IEなら右クリックでソースを表示を選択するとソースを見ることができます。
その他ブラウザでも表示からソースの表示を選択するとソースを見ることができます。
IEの場合、ソースを表示するソフトがメモ帳になるので、charsetがeucの場合文字化けして表示されますのでご注意を！
なお、この方法をとる場合は、type=”text/css”を指定する必要があります。
それに、コメントタグ <!– –> で囲うと本当のコメントとして処理される可能性があります。
記述例
<head>
省略～
<style type=”text/css”>
@import”import.css”;
</head>
３．タグの中に直接記述
XHTMLで使えるほとんどのタグにはstyle属性を指定して、その値を直接記述することができます。
また、;（セミコロン）で区切れば、複数のスタイルを指定することができます。
ただし、タグに直接スタイルを記述するということはHTML内にレイアウトをするという記述が組み込まれてしまうことになる上、CSSを使っている意味が全くなくなるのでこの方法はとりあえず試しに変えてみるなどの、テストだけで使うことをおすすめします。
記述例
<h1 style=”font-size:18px color:#ff0000″;>見出し</h1>
ちょっと便利なCSS
media属性を指定することにより、CSSの適用対象となる出力先を設定できます。
例えば、パソコン用のscreen、プリント用のprintなどがあって、これを使えばprint用のCSSを別に用意して、読み込ませることが可能になります。
更に、Netscape4.XにCSSを読み込ませないための方法としても使われています。
| « 前の記事 | 次の記事 » |
庄野英朗
Source Marine 代表
デザイン・コーディング・PHPアプリケーションまでこなす。
マルチデザインプログラマ。