XHTML+CSSレイアウトについて

質問

恐れ入ります、XHTML+CSSレイアウトをするとき、
例えばTOP,ABOUT,PORTFOLIOというページがあった
としてCSSをリンクするとします。

この場合、cssはtop.css,about.css,potfolio.cssの
ように各ページごとにcssを用意すればよいのでしょうか?

回答No.3

d-_-b_kenken · ベストアンサー

CSSでは、「@import」を用いることで別ファイルとして用意したスタイルシートを取り込むことが可能です。その記法は、@importキーワードの後に「url(」と「)」の間にURLを指定します。

@import url(./sample.css);

@import文は、そのシート内の他の宣言よりも先、つまり、そのスタイルシートの先頭に記述しなくてはなりません。

共通するスタイルだけを記述した外部スタイルシート（例：site.css）を用意して、ページ毎のスタイルを記述した「top.css」「about.css」「potfolio.css」というそれぞれのCSSファイルの冒頭で、「@import url(URL);」 で「site.css」のurlを指定しインポートしてやれば、わかりやすくメンテナンスもしやすいと思います。

お礼

ご教授ありがとうございます。

まさにd-_-b_kenkenさまのいう感じに管理したいと考えて
おりました。

早速勉強してみます。

ありがとうございました!!!

回答No.2

armstrong-us

最近のcss設定はわかりやすくするためモジュール化しています。
ヘッダーcss,フッターcss,タグcss,コンテンツcss,さらにコンテンツからわかれたcssと各ブロックごとにcssでくくり分けしたりしています。それらはメインcssからインポートされているような仕組みになっています。
なぜモジュール化するかといえば、やはり一つのcssファイルでは、たくさん書くと行数がたくさんなり過ぎてわかりにくく、メンテナンスしずらいということからきています。
ただし、質問者さんのような比較的小規模なサイト構成なら一枚のmain.cssあたりに全てを記入して問題ないと思います。

お礼

ご教授ありがとうございます。
まさにそうなんです、ちょっと行数が予想以上に多く
管理しにくくなってきまして。

importというのも便利そうなので勉強してみます。

ありがとうございました。

回答No.1

maho-maho

デザインが一緒なら一枚でいいですよ。
でないと、同じ設定を各ページ変える場合、すべてのCSSを変更しなければいけないので、CSSの特性を生かせないと思います。

補足

ご教授ありがとうございます。

ヘッダー、フッターとメニュー部分はどのページでも
デザインは同じなのですが、コンテンツは各ページ違います。

この場合はどうしたらよいのでしょうか?
1つのCSSに全ページ分のコンテンツを制御する
CSSを書くのでしょうか?