【前のページ】 更新日

Ⅷ-１０　デザインの設定を共有する

<style>～</style>の中に書いていた設定を独立したデザイン設定ファイルとして扱えるようにします
それにより、複数のページで同じデザイン設定を共有し、デザインの統一や変更が簡単に出来るようになります。

１）デザイン設定ファイルを作ります

【色の呼び名】「iromei.htm」のページを元にデザインを設定を外部ファイルにまとめ、
デザイン設定ファイルとして複数のページで共有します。
表示→ソースを開き<style>～</style>の中に書いたデザインを設定をコピーして、
新しいメモ帳を開き貼り付けます。【style.css】次にこのファイルを「style.css」と言うファイル名で保存します。
デザイン設定のファイルには、拡張子を「.css」と付けます。このファイルは、「外部スタイルシートファイル」とも呼ばれます。
これでデザインを設定だけを書いたファイルが出来上がりました。

２）【色の呼び名】のデザイン設定を削除します

デザイン設定ファイルを作成したため、
「iromei.htm」ページで、<style>～</style>の中に書いていたデザインを削除します。【参考】
色や背景などのデザインを設定が全て無くなった状態で表示されます。

３）【色の呼び名】のデザイン設定ファイルを読み込ませます

「iromei.htm」にデザインを設定ファイルを読み込ませます。
<title>～</title>の後に<link>を追加し、デザインの設定ファイルを指定します。
<link rel="stylesheet" style type="text/css" href="style.css">と書きます【参考】
style.cssに書かれたデザイン設定で表示されます。
relとtypeでは、読み込むファイル名を指定します。
！！デザイン設定ファイルを読み込む場合、relは「stylesheet」、typeは「text/css」と指定しなくてはなりません。
hrefではデザインを設定ファイルの場所を指定します。

<html>
<head>
<title>色の呼び名</title>
<link rel="stylesheet" style type="text/css" href="style.css">
 <style type="text/css"><!--

--></style>
</head>
<body>

<div align="center">
<table class="head" cellspacing="0"><tr>
<td class="head1"><h1>色の呼び名</h1></th>
<td class="head2">「水と空」の風景から、さまざまな色を抽出して、色名と呼び名についてまとめてみます。<br>
四季の水、四季の空にふさわしいと思われる色名を配しました。</td>
</tr></table>
以下略

４）ご意見箱ページのデザイン設定を削除します

【ご意見箱】「box.htm」を開きソースを表示させます。（ファイル→表示→ソース）
form div{margin-bottom:15px}
form{margin-left:10%}
input{border-style:ridge;border-width:5px;border-color:#c8dad8}
textarea{border-style:ridge;border-width:5px;border-color:#c8dad8}
input.send{border-style:outset;background-color:#c8dad8}
はご意見箱のページのために追加した設定です。
これらは「style.css」の中では指定されていないため、そのまま残します。
後は上の２）と３）と同様に<style>の中の設定を削除して【参考】
<link rel="stylesheet" style type="text/css" href="style.css">を<title>～</title>の後に追加します。【参考】
<style>～</style>で設定したデザインと、「style.css」から読み込んだデザインの両方が適用されます。

５）他のページも同様にデザインの設定を「style.css」から読み込む設定にします

６）「style.css」の設定を変更します

全てのページが「style.css」でデザインを共有した状態になりました。
そこでまとめてデザインの変更が可能になりました。
スタート→プログラム→アクセサリー→メモ帳　でメモ帳を開きます。
メモ帳の上に「style.css」をドラッグします。それで拡張子.cssのファイルは開きます。
色を中心にデザインの設定を変えてみました。ファイル名を「design.css」で保存します。
それぞれのページからソースを開き、<link rel="stylesheet" style type="text/css" href="design.css">に変更します。

それぞれのページをまとめて変更
<style>～<style>のみ設定で表示される内容「style.css」を読み込み「design.css」を読み込み
【表紙】「index.htm」【表紙２】【表紙３】
【春の色】「contents.htm」【春の色２】【春の色３】
【日本の伝統色-メニュー】「menu-iro.htm」【メニュー２】【メニュー３】
【日本の伝統色-コンテンツ】「iro.htm」【コンテンツ２】【コンテンツ３】
【色の呼び名】「iromei.htm」【色の呼び名２】【色の呼び名３】
【ご意見箱】「box.htm」【ご意見箱２】【ご意見箱３】


●複数のデザイン設定を読み込む
<link>の設定を追加することで複数のデザイン設定ファイルを読み込むことが出来ます。【参考】

●デザイン設定の優先順位
デザイン設定ファイルと、<style>～</style>で指定したデザインが重複した場合、
<style>～</style>で指定したデザインが優先されます。
そのため、デザイン設定ファイルを共有してる場合でも、
<style>～</style>でデザインを指定することでページ毎に設定を変えることが出来ます。