ArtNavi ホームページ作成入門HTML5のスタイルシート
HTML5の構成のように「ヘッダ部」、「本文」、「フッタ部」に分割しました。<header>や、<nav>は、意味のあるデータとなっていますが、レイアウトはスタイルシートを使います。
見本は「印刷スタイル」と「通常スタイル」をJavaScriptにより、ボタンのクリックで切り換えています。これらを含めスタイルシートを説明します。
スタイルシートは、HTML文書の中に書けますが、外部ファイル(拡張子はcss)が良いでしょう。
ファイル名は自分で決め、default.cssなどもあります。
私は背景色、文字色、大きさなどをスタイルシート名にしています。
例：dunWhite120.css（焦げ茶地白文字120%拡大の意味）。またプリント用はprint.cssなどです
下記はヘッド部のソースの一部です。
ヘッド部に２つスタイルシートを記入し、リンクしています。通常のスタイルシートファイル名は「dunWhite120.css」で、プリント用が「print.css」です。
通常スタイル(default-style)をdunと名付け、dunWhite120.cssを呼び出しています。
<meta http-equiv="default-style" content="dun" />
<link rel="stylesheet" title="dun" href="css/dunWhite120.css" />
<link rel="stylesheet" title="hanten" href="css/print.css" />
「印刷スタイル」と「通常スタイル」を切り替えるJavaScriptのおまじないは下記のとおりです。
<script type="text/javascript">
<!--
function changeCSS(sURL) {
var obj = document.getElementsByTagName("link");
obj[0].href = sURL;
}
//-->
</script>