複数のページで使用する共通のレイアウトについて

Question

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

koutarou504 · Accepted Answer

ＣＳＳの外部ファイルへの記述法，呼び出し方法が判らないと質問されているのなら、＃１の方の回答だと思いますが（重複するのでここでは書きませんが）。

しかしJavaScriptの様に更新時に一部を変えれば全部が変わるという仕掛けは、ＣＳＳではかなり困難です。
というのも、ＣＳＳはあくまでＨＴＭＬのデザインであり骨組みを変えたい場合はＨＴＭＬが変わらないと
少なくともそこにない要素を発生させる事は不可能です。
（まぁ逆に特定の要素を非表示にする事までは出来ますが・・・。）

結局、確認はしていませんがＨＰ作成ツールでのインサート機能を用いるか
自分で手作業で管理用ファイルと公開用ファイルを別にして、
あとは文字列の一括変換を行う（この程度ならフリーのテキストエディタで可能）しかないかと・・・。


まぁそれが理由で、フレーム（インラインフレーム含む）が嫌われながらも使われているのではないかなぁ～と。

尚、事前に全ての要素毎に DIV と SPAN を付加し
ID を付けて於いて
ブックレベル要素，インライン要素という性質も含めて
スタイルシートで指定してしまうという対処方法もあるにはありますが
（将来増えそうな内容に対しては非表示として仮置きしておくとか）
ただしこれはＨＴＭＬタグの意味を無視した方法なので
余程の事がない限り採用しない方がよいでしょう。


最後に、各要素へはＩＤを必ず記述しておく事をお勧めします。
これにより当初使用していなかったＩＤでも
後の要素の特定やグループ化（ＣＬＡＳＳの代用）に役立ちます。

einste · Answer

CSSを定義したファイルを外だしすることが可能です。共通部分の定義を外だしを行い、共通に参照することで対応してはどうでしょう。 ■test.html

header1	header2
data1	data2

■css.css body { background:green; } table { border: 2px solid black; padding: 0; } .th { background:red; } .td { background:blue; }

yayopix · Answer

こんにちは！もしかすると質問の意味を間違えているかもしれません・・。ヘッダ、フッタ、メニューなどの部分をそれぞれ

で囲みます。

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

コンテンツ・・・

フッタ部分・・・

そして外部CSSでリンクしますが、記述方法は、 .head p { ・・・・・・・・・・・・・・・・ } という感じで記述します。これで

～

の中の、【ｐ】だけに適応され他の部分の【ｐ】には影響しません。その中にさらに【class】指定がある場合、

ヘッダ部分のソース

ここだけ赤に変えたい

この場合は .head p.aka { color:#FF0000; } となります。

複数のページで使用する共通のレイアウトについて

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

こんにちは！

ＣＳＳの外部ファイルへの記述法，呼び出し方法が判らないと質問されているのなら、＃１の方の回答だと思いますが（重複するのでここでは書きませんが）。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング