- ベストアンサー
複数のページで使用する共通のレイアウトについて
なるべく(X)HTML＋CSSでサイトを作ろうと思っているのですが、 ヘッダ、フッタ、メニューなどの複数のページに及ぶ共通のレイアウト部分を CSSで一括で管理する方法はないのでしょうか？ JavaScriptでの方法は分かるのですが。。。 よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ＣＳＳの外部ファイルへの記述法，呼び出し方法が判らないと質問されているのなら、＃１の方の回答だと思いますが（重複するのでここでは書きませんが）。 しかしJavaScriptの様に更新時に一部を変えれば全部が変わるという仕掛けは、ＣＳＳではかなり困難です。 というのも、ＣＳＳはあくまでＨＴＭＬのデザインであり骨組みを変えたい場合はＨＴＭＬが変わらないと 少なくともそこにない要素を発生させる事は不可能です。 （まぁ逆に特定の要素を非表示にする事までは出来ますが・・・。） 結局、確認はしていませんがＨＰ作成ツールでのインサート機能を用いるか 自分で手作業で管理用ファイルと公開用ファイルを別にして、 あとは文字列の一括変換を行う（この程度ならフリーのテキストエディタで可能）しかないかと・・・。 まぁそれが理由で、フレーム（インラインフレーム含む）が嫌われながらも使われているのではないかなぁ～と。 尚、事前に全ての要素毎に DIV と SPAN を付加し ID を付けて於いて ブックレベル要素，インライン要素という性質も含めて スタイルシートで指定してしまうという対処方法もあるにはありますが （将来増えそうな内容に対しては非表示として仮置きしておくとか） ただしこれはＨＴＭＬタグの意味を無視した方法なので 余程の事がない限り採用しない方がよいでしょう。 最後に、各要素へはＩＤを必ず記述しておく事をお勧めします。 これにより当初使用していなかったＩＤでも 後の要素の特定やグループ化（ＣＬＡＳＳの代用）に役立ちます。
その他の回答 (2)
こんにちは！ もしかすると質問の意味を間違えているかもしれません・・。 ヘッダ、フッタ、メニューなどの部分をそれぞれ<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> の中の、【ｐ】だけに適応され他の部分の【ｐ】には影響しません。 その中にさらに【class】指定がある場合、 <div class="head"> <p>ヘッダ部分のソース</p> <p class="aka">ここだけ赤に変えたい</p> </div> この場合は .head p.aka { color:#FF0000; } となります。
お礼
説明不足ですみませんでした。 お返事ありがとうございました。
- einste
- ベストアンサー率25% (1/4)
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; }
お礼
説明が不十分だったようですみません。 外部スタイルシートを使用する方法は分かっているのですが、 フレームやJavaScriptを使用したもののように 後々の訂正でおおもとを直せば他のページも訂正されるというような方法はとれないかなと思ったんです。 （例えば画像を使ったロールオーバーボタンの ボタンの内容を変更したり、ボタンを増やしたりと言うような訂正の時）
お礼
やはりcssでは一括管理は無理なんですね。 テーブルを使ってJavaScriptで対処するか (X)HTMLを地道にコピペするか考えます。 ありがとうございました。