スタイルシート適用

◼︎スタイルシートを使いたい

〈head〉〈/head〉内に配置して、HTML文書にスタイルシートを適用します。この形式で設定したスタイルは、同じHTML文書内でのみ有効になるため、ページごとにスタイルを設定した場合などに利用できます。

HTML文書にスタイルシートを適用させるには幾つかのほうほうがありますが、構造と見栄えの分離という意味では、外部スタイルシートを利用すると良いでしょう。外部スタイルシートは、要素や、@importを使って読み込みます。

・type属性

スタイルシート言語のMIMEタイプを指定します。通常は「text/css」です。

・media属性

style要素の中に記述されたスタイルシートをどのメディアに適用するのかを指定します。例えば、PCの画面であれば、「screen」、印刷時ようであれば、「print」のように、指定します。デフォルトの値は「all」です。そのため、media属性が省略された時は、全てのメディアに同じスタイルシートが適用されます。

◼︎スクリプトを使いたい

HTML/XHML文書にスクリプトを組み込む場合に使用します。

・type属性

スクリプト言語のMIMEタイプを指定します。従来スクリプト言語を指定するために使われていたlanguage属性は、HTML4.01やXHTML1.0では非推奨になっています。

・src属性

別に保存したスクリプトファイルを読み込んで利用する場合にスクリプトファイルのURLを指定し、スクリプトを読み込みたいところに記述します。

 ◼︎スクリプトが実行されない環境に対処したい

スクリプトを無効にしているブラウザなどで代わりに表示させる内容を指定します。この〈noscript〉タグは、〈body〉〈/body〉タグ内に配置します。

(サンプル)

〈body〉

〈p〉

〈script type=”text/javascript”〉

〈!–

document.write(”この部分はjavascriptで書き出しています。”);

//–〉

〈/script〉

〈/p〉

〈noscript〉

〈p〉

このページではjavascriptを使用しています。〈br〉

javascript未対応ブラウザをお使いの方は〈a href=”noscript.html”〉次のページ〈/a〉へどうぞ

〈/p〉

〈/noscript〉

〈/body〉

 ◼︎汎用的な範囲を指定したい

〈div〉~〈/div〉または、〈span〉〈/span〉を使用すると、特定の意味を持たない、汎用的な範囲を設定できます。

一般的にこれらのタグを指定しただけでは表示上の変化はありませんが、属性やid属性、lang即成などと併用することで、共通のスタイルシートや言語情報を設定できるようになります。

・div

指定した範囲を一つのブロックレベルの要素に設定します。複数の要素をグループ化する場合などに利用されます。テキストやインライン要素、ほかのブロックレベル要素を含めることができます。

・span

指定した範囲をインラインの要素に設定します。