Q&A
HTML,CSSで複数ページを作成する場合、bodyに別々のクラス名を当て、同じクラス名を使い回すことは可能でしょうか？
例えば、index.htmlとindex2.htmlがありboxというクラス名でcolor:red fontsize20pxでindex.htmlで指定しました。
index2.htmlのbodyタグにtestというクラス名をつけて、boxというクラスでfontsize30pxを指定して、大きさだけ指定したいのですが、色もredを引き継いでしまいます。
同じクラスを使って、複数ページを作りたいのですが、そもそも複数ページでの作成方法が違うのでしょうか？
回答1件
0
質問文に最も近いサンプルコードを以下に示します．その後，蛇足として，CSSファイルやHTMLファイルの書き方を少し説明しています．蛇足は必要に応じてお読みください．
- index.html
index.html
1<!DOCTYPE html> 2<html lang="Ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>sample</title> 6 <link rel="stylesheet" href="sample.css"> 7 </head> 8 <body> 9 <div class="box">sample</div> 10 </body> 11</html>
- index2.html
index2.html
1<!DOCTYPE html> 2<html lang="Ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>sample</title> 6 <link rel="stylesheet" href="sample.css"> 7 </head> 8 <body class="test"> 9 <div class="box">sample</div> 10 </body> 11</html>
- sample.css
sample.css
1body:not([class]) .box{ 2 font-size: 20px; 3 color:red; 4} 5 6body.test .box{ 7 font-size: 30px; 8}
上記のサンプルについて，index.htmlとindex2.htmlの違いは，<body>タグにtestというクラス名を付けたか否かです．
sample.cssでは，bodyタグ内にあるboxというクラスのついた要素を対象にスタイルを適用しています．
body:not([class])は，クラスが指定されていないbodyタグを指します．
.boxは，boxというクラスが指定された要素を指します．
この2つを半角スペースで区切り，body:not([class]) .boxとすることで，クラスが指定されていないbodyタグ内にあるboxというクラスが指定された要素に対してスタイルを設定できます．
また，body.testは，クラスにtestが指定されたbodyタグを指します．
このため，body.test .boxとすることで，クラスにtestが指定されたbodyタグ内にあるboxというクラスが指定された要素に対して，スタイルを設定できます．
蛇足
同じクラスを使って、複数ページを作りたいのですが、そもそも複数ページでの作成方法が違うのでしょうか？
上記について，2通りの解釈ができたため，それぞれについて，サンプルコードとともに回答を記述します．
- 同じスタイルファイル（CSSファイル）を使いまわす
- 同じクラス名で異なるデザインを適用する
同じスタイルファイル（CSSファイル）を使いまわす
共通のCSSファイルを読み込むことで，複数のファイルで共通のスタイルの設定を使いまわすことができます．
例えば，boxというクラス名では，全てfont-size: 20px;を指定するといったことです．
以下にサンプルを示します．
- index.html
index.html
1<!DOCTYPE html> 2<html lang="Ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>sample</title> 6 <link rel="stylesheet" href="sample.css"> 7 </head> 8 <body> 9 <div class="box red">sample</div> 10 </body> 11</html>
- index2.html
index2.html
1<!DOCTYPE html> 2<html lang="Ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>sample</title> 6 <link rel="stylesheet" href="sample.css"> 7 </head> 8 <body> 9 <div class="box">sample</div> 10 </body> 11</html>
- sample.csv
.box{ font-size: 20px; } .red{ color:red; }
上記のサンプルでは，<head>タグで，<link rel="stylesheet" href="sample.css">とすることでsample.cssファイルを読み込んでいます．これにより，クラス名にboxを指定した要素にfont-size:20px;が適用されます．
また，赤色にすることについて，redというクラスを用意して，別のクラスにしています．index.htmlに書いた通り，クラス名には，半角スペースで区切って複数のクラスを書くことができます．例えばclass="box red"のように書けます．このようにすることで、複数のhtmlファイルで共通のデザインを適用できます．
同じクラス名で異なるデザインを適用する
読み込むCSSファイル以外は，同じHTMLファイルを用意して，異なるデザインを適用する方法を示します．
- index.html
index.html
1<!DOCTYPE html> 2<html lang="Ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>sample</title> 6 <link rel="stylesheet" href="sample.css"> 7 </head> 8 <body> 9 <div class="box">sample</div> 10 </body> 11</html>
- index2.html
index2.html
1<!DOCTYPE html> 2<html lang="Ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>sample</title> 6 <link rel="stylesheet" href="sample2.css"> 7 </head> 8 <body> 9 <div class="box">sample</div> 10 </body> 11</html>
- sample.css
sample.css
1.box{ 2 font-size: 20px; 3 color:red; 4} 5
- sample2.css
sample2.csv
1.box{ 2 font-size: 30px; 3} 4
上記のサンプルでは，index.htmlとindex2.htmlはそれぞれsample.css，sample2.cssを読み込んでいます．これにより，<body>タグ内は完全に同じですが，異なるスタイルを適用できます．
投稿2021/05/05 13:24
総合スコア78
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。