![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
<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 の記述でデザインを別けることが出来るのでしょうか。
No.1ベストアンサー
- 回答日時:
このままでは、区別不能なので不可能です。
通常は
index.html
<bod calss="home index">
home.html
<body class="home blog">
のようにして区別します。
なお、CSSをCGIかASPで、HTTP_REFERERか、PATH_INFOなどで判別させて異なるCSSを出力させるなら可能です。
アドバイスをありがとうございます。
>index.html
><bod calss="home index">
>home.html
><body class="home blog">
自分の理解が間違っていないようで安心しました。
他の手立てを考えます。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
書籍を見つつサイト造りの練習...
-
ウェブサイトにアップされてい...
-
サイトにコンテンツを並べる際...
-
pythonに自分で作ったHTMLを、...
-
WEBページを強制的に横画面で見...
-
Google検索も終わりですか? グ...
-
HTMLタグのあるCSVファイルを利...
-
静止画画像をクリックすると音...
-
css初心者 フレックスボックス...
-
iPhoneで HTMLファイルを閲覧
-
webデザインの勉強で、HTML/CSS...
-
私、Paiza Cloudやっているのだ...
-
WEBサイトの作成で、imgタグに...
-
先日ウェブデザイン技能検定三...
-
X の仕様変更? 埋め込みフレー...
-
指定した演算を実施の結果を表...
-
指定した演算を実施の結果を表...
-
htmlソース編集で、各タグを何...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTML 特殊文字の タブ:	...
-
個人HPにログイン機能付けられる?
-
VBで簡単なゲームをつくるサイト
-
ページ内のテキストをスクロー...
-
DWでのCSSの使い方について。
-
CSSでindex.htmlをクリックする...
-
textarea 内に IFRAME を読み込...
-
うっかり</body>と</html>を消...
-
一発太郎の一発ロボに登録した...
-
タグの左揃えと波型の違いで・
-
HTMLのタグは閉じなくてもいい...
-
embedタグでFirefox右クリック禁止
-
色定数 → Hex値の対応 (LightYe...
-
エラーメッセージ
-
METAタグのrefreshでサイト引越し
-
googlemapへのリンクを作りたい
-
ドリームウィバーを利用してス...
-
リファラ偽装について少し質問...
-
インラインフレームを使用した...
-
EUC文字体系のhtmlから、mailto...
おすすめ情報