AIと戦って、あなたの人生のリスク診断 >>

なるべく(X)HTML+CSSでサイトを作ろうと思っているのですが、
ヘッダ、フッタ、メニューなどの複数のページに及ぶ共通のレイアウト部分を
CSSで一括で管理する方法はないのでしょうか?
JavaScriptでの方法は分かるのですが。。。
よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

CSSの外部ファイルへの記述法,呼び出し方法が判らないと質問されているのなら、#1の方の回答だと思いますが(重複するのでここでは書きませんが)。



しかしJavaScriptの様に更新時に一部を変えれば全部が変わるという仕掛けは、CSSではかなり困難です。
というのも、CSSはあくまでHTMLのデザインであり骨組みを変えたい場合はHTMLが変わらないと
少なくともそこにない要素を発生させる事は不可能です。
(まぁ逆に特定の要素を非表示にする事までは出来ますが・・・。)

結局、確認はしていませんがHP作成ツールでのインサート機能を用いるか
自分で手作業で管理用ファイルと公開用ファイルを別にして、
あとは文字列の一括変換を行う(この程度ならフリーのテキストエディタで可能)しかないかと・・・。


まぁそれが理由で、フレーム(インラインフレーム含む)が嫌われながらも使われているのではないかなぁ~と。

尚、事前に全ての要素毎に DIV と SPAN を付加し
ID を付けて於いて
ブックレベル要素,インライン要素という性質も含めて
スタイルシートで指定してしまうという対処方法もあるにはありますが
(将来増えそうな内容に対しては非表示として仮置きしておくとか)
ただしこれはHTMLタグの意味を無視した方法なので
余程の事がない限り採用しない方がよいでしょう。


最後に、各要素へはIDを必ず記述しておく事をお勧めします。
これにより当初使用していなかったIDでも
後の要素の特定やグループ化(CLASSの代用)に役立ちます。
    • good
    • 0
この回答へのお礼

やはりcssでは一括管理は無理なんですね。
テーブルを使ってJavaScriptで対処するか
(X)HTMLを地道にコピペするか考えます。
ありがとうございました。

お礼日時:2005/07/07 10:34

こんにちは!



もしかすると質問の意味を間違えているかもしれません・・。

ヘッダ、フッタ、メニューなどの部分をそれぞれ<div>で囲みます。

<div class="head">
ヘッダ部分のソース・・
・・・・・・・・・・
【div】は入れ子になっても構いません。
ヘッダ部分全体を【div】で囲みます。
</div>

<div class="menu">
メニュー部分のソース
</div>

<div class"con">
コンテンツ・・・
</div>

<div class="foot">
フッタ部分・・・
</div>

そして外部CSSでリンクしますが、記述方法は、

.head p {
・・・・・・・・
・・・・・・・・
}

という感じで記述します。
これで <div class="head">~</div>
の中の、【p】だけに適応され他の部分の【p】には影響しません。
その中にさらに【class】指定がある場合、

<div class="head">
<p>ヘッダ部分のソース</p>
<p class="aka">ここだけ赤に変えたい</p>
</div>

この場合は
.head p.aka {
color:#FF0000;
}

となります。
    • good
    • 0
この回答へのお礼

説明不足ですみませんでした。
お返事ありがとうございました。

お礼日時:2005/07/07 10:48

CSSを定義したファイルを外だしすることが可能です。


共通部分の定義を外だしを行い、共通に参照することで対応してはどうでしょう。

■test.html
<html>
<head>
<link rel=stylesheet type=text/css href=css.css>
</head
<body>
<table>
<tr class=th>
<td>header1</td>
<td>header2</td>
</tr>
<tr class=td>
<td>data1</td>
<td>data2</td>
</tr>
</table>
</body>
</html>

■css.css
body {
background:green;
}
table {
border: 2px solid black;
padding: 0;
}
.th {
background:red;
}
.td {
background:blue;
}
    • good
    • 0
この回答へのお礼

説明が不十分だったようですみません。
外部スタイルシートを使用する方法は分かっているのですが、
フレームやJavaScriptを使用したもののように
後々の訂正でおおもとを直せば他のページも訂正されるというような方法はとれないかなと思ったんです。
(例えば画像を使ったロールオーバーボタンの
ボタンの内容を変更したり、ボタンを増やしたりと言うような訂正の時)

お礼日時:2005/07/07 10:43

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング