次のような背景画像部分だけが異なる場合、
.MY_TABLE_1 {
position: static;
height: 15;
color: #ffffff;
background-color: #ffffff;
background-image: url('bg_title_blue.gif');
font-family: MS UI Gothic;
font-weight: normal;
font-size: 12;
text-indent: 10;
border-left: thin groove #cccccc;
border-right: thin groove #666666;
border-top: thin groove #cccccc;
border-bottom: thin groove #666666;
padding: 0
}
.MY_TABLE_2 {
position: static;
height: 15;
color: #ffffff;
background-color: #ffffff;
background-image: url('bg_title_yellow.gif');
font-family: MS UI Gothic;
font-weight: normal;
font-size: 12;
text-indent: 10;
border-left: thin groove #cccccc;
border-right: thin groove #666666;
border-top: thin groove #cccccc;
border-bottom: thin groove #666666;
padding: 0
}
これをまとめて、
.MY_TABLE_BASE {
position: static;
height: 15;
color: #000000;
background-color: #ffffff;
font-family: MS UI Gothic;
font-weight: normal;
font-size: 12;
text-indent: 10;
border-left: thin groove #cccccc;
border-right: thin groove #666666;
border-top: thin groove #cccccc;
border-bottom: thin groove #666666;
padding: 0
}
.MY_TABLE_1 {
ほにゃらら
background-image: url('bg_title_blue.gif');
}
.MY_TABLE_2 {
ほにゃらら
background-image: url('bg_title_yellow.gif');
}
というようにまとめて指定する方法はないのでしょうか???
No.2ベストアンサー
- 回答日時:
background-image: url('bg_title_blue.gif');
を指定するほうに
class="MY_TABLE_1 MY_TABLE_BASE"
を指定して
background-image: url('bg_title_yellow.gif');
を指定するほうに
class="MY_TABLE_2 MY_TABLE_BASE"
を指定すれば
.MY_TABLE_BASE {
position: static;
height: 15;
color: #000000;
background-color: #ffffff;
font-family: MS UI Gothic;
font-weight: normal;
font-size: 12;
text-indent: 10;
border-left: thin groove #cccccc;
border-right: thin groove #666666;
border-top: thin groove #cccccc;
border-bottom: thin groove #666666;
padding: 0
}
.MY_TABLE_1{
background-image: url('bg_title_blue.gif');
}
.MY_TABLE_2{
background-image: url('bg_title_yellow.gif');
}
でうまくいくはずです。
あと、気になるのはフォント名にスペースがあるのと該当フォントが無いときの記述が無いことですね。
font-family: MS UI Gothic;
は
font-family: "MS UI Gothic",sans-serif;
としたほうがいいです。sans-serifはゴシック系のフォントを意味します。
皆さん、ありがとうございます。
やっと出来ました。
class="MY_TABLE_1 MY_TABLE_BASE"
とやって、間は、スペースならいくつ入ってもいいのですね。
コンマだったらわかりやすいと思ってコンマにしたら駄目でした。
これって三っ以上つなげても大丈夫かな?
スタイルシートも奥が深いのがわかりました。
「ホームページデザインの要」であり、
優れたページ作成や迅速、機動的な改訂に、
おおいに役に立つと思いますので、
これからこれを活用したいと思います!
No.1
- 回答日時:
スタイルシートの正式名称を知っていれば、理解できていた事なのかも知れません。
。。オブジェクト指向的と言うか、要するに継承(カスケード)がやりたいのですよね?(違いますか?)
.my_table {
なんちゃら
}
.my_table #my_table1 {
かんちゃら
}
.my_table #my_table2 {
うんちゃら
}
などと定義すると、my_table を指定したところでは、「なんちゃら」の指定が有効となり、my_table の指定内で指定された my_table1 内であれば、「なんちゃら」と「かんちゃら」の指定が有効になります。
スタイルシート(Style Sheet)は、カスケード・スタイル・シート(Cascading Style Sheet)の略語でして、*カスケード*・スタイル・シートって言う位なので、継承はできます(^_^;)
この回答への補足
ありがとうございます。
早速やってみてますが、class=の指定は、
どのようにしたらよいのでょうか?
class="my_table1"
class="my_table #my_table1"
class="my_table my_table1"
class="my_table.my_table1"
などと、いろいろやってみましたが、
駄目です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストの前後の行間をなくす方...
-
テキストボックス途中で切れて...
-
テキストエリア内の文字の装飾
-
特定の文字のみcssを適用するに...
-
文字の位置、上下のマージンが...
-
iframe 文字化け
-
h1タグのパンくずリストへの設置
-
jquery.validationEngine.jsカ...
-
フォームのスタイルについて教...
-
htaコードですが、IE6に対応さ...
-
リンク文字
-
background-color: #ddd;の意味...
-
文字サイズの変更などが、IE上...
-
テキストファイルの行を指定し...
-
Excel VBA メール作成について ...
-
fontサイズ指定の ”-(マイナ...
-
全角半角含めて等幅で表示したい
-
<input type="file"> の幅
-
上付き文字と下付き文字を同時...
-
SMILのReal textでの文字化け
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HLMT、CSSについて相談です。 ...
-
文字の位置、上下のマージンが...
-
リストの前後の行間をなくす方...
-
Format 関数 表示書式指定文字...
-
background-color: #ddd;の意味...
-
HTMLで特定の文字だけ色を変え...
-
全角半角含めて等幅で表示したい
-
リンク文字
-
テキストボックス途中で切れて...
-
テキストエリア内の文字の装飾
-
jquery.validationEngine.jsカ...
-
Excel VBA メール作成について ...
-
fontサイズ指定の ”-(マイナ...
-
特定の文字のみcssを適用するに...
-
Excel VBA メール作成について ...
-
ホームページビルダー作成HPがi...
-
API Sleep関数について
-
iframe 文字化け
-
FireFoxで"display = none"を指...
-
アコーディオンメニューが思う...
おすすめ情報