スタイルシートの指定に関して

解決済

質問者：nori_007
質問日時：2010/01/06 18:37
回答数：1件

<body>タグにクラスを与えて、以下のようにしました。

<body class="home blog">

一般的に、このような記述の場合、<body>に class="home"と、class="blog"の属性が与えられます。ここまでは理解出来ています。

2つのファイル
home.html
と
index.html

ファイルを作成しました。
html の記述は全て同じとします。参照する CSS ファイルを同一とします。

上記の条件で、home.html と index.html でデザインを変えたいと思います。希望として

home.html
には、class="home" のみを反映し、
index.html
には、class="blog" のみを反映させたい。

以下にサンプルを表記します。

html ファイル
home.html / index.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>テストページ</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body class="home blog">

<div id="container">
<p>テストページ</p>
</div>

</body>
</html>

css ファイルは home.html / index.html で共通
@charset "UTF-8";

body {
margin: 0;
padding: 0;
text-align: center;
background-color: #FFF;
}

.home #container {
width: 800px;
height: 200px;
text-align: center;
margin: 0 auto;
padding: 0;
background-color: #FFE;
}

.blog #container {
width: 800px;
height: 200px;
text-align: center;
margin: 0 auto;
padding: 0;
background-color: #FEE;
}

上記の記述だと home.html も CSS の記述順通り、バックグランドカラーが、#FEE になります。

<body class="home blog">
の記述は、WordPress が生成している記述です。デザインを別けることが出来るのかなと思っています。

自分のスキルでは無理だと思うのですが・・・。
CSS の記述でデザインを別けることが出来るのでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2010/01/06 19:58

このままでは、区別不能なので不可能です。

通常は
index.html
<bod calss="home index">
home.html
<body class="home blog">
のようにして区別します。

　なお、CSSをCGIかASPで、HTTP_REFERERか、PATH_INFOなどで判別させて異なるCSSを出力させるなら可能です。