アプリ版：「スタンプのみでお礼する」機能のリリースについて

外部CSSの記述方法

解決済

  • 質問者：nekobaka
  • 質問日時：
  • 回答数：2件

色々調べたのですが行き詰まってしまったので質問させて下さい。

ＨＰのそれぞれのページの文字色や背景が違う為BODYをクラス分けしてCSSに記述しています。
ページによって違うリンク色等はそれぞれのページの<HEAD>内で指定していますが
外部CSSから指定する場合クラスを定義すれば出来ますが下記のBODYの中には
どのように記述すれば良いか解かる方がいらっしゃいましたらご回答宜しくお願い致します。
(説明ベタですみません。要は外部CSSのそれぞれのBODYのクラス内に
リンク色等の記述をしたいのです。(;^_^A )

外部ＣＳＳ
BODY.top{
color:#2E8B57;background-color:#FFEAFA;
}
BODY.menu{
color:purple;background-color:#FFFFFF;
}

top.htmlの<HEAD>内の下記を外部ＣＳＳのBODY.topの中に入れたい
A:visited
{ text-decoration:none;color:#CD1076;}
A:active
{ text-decoration:none;color:blue;}
menu.htmlの<HEAD>内の下記を外部ＣＳＳのBODY.menuの中に入れたい
A:visited
{ text-decoration:none;color:purple;}
A:active
{ text-decoration:none;color:#E1ACDA;}

通報する

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

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： picoco
  • 回答日時：

特定のCLASSにのみリンクのCSSを反映させたい場合は



（BODY.topの指定）
BODY.top A:visited
{ text-decoration:none;color:#CD1076;}
BODY.top A:active
{ text-decoration:none;color:blue;}

（BODY.menuの指定）
BODY.menu A:visited
{ text-decoration:none;color:purple;}
BODY.menu A:active
{ text-decoration:none;color:#E1ACDA;}

このような形で指定されれば、CLASSごとに反映されます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答有り難う御座いました。m(＿" ＿)m
やはり外部ＣＳＳのBODY.topの中に直接いれる事は出来いようですね。
教えて下さった通り個々に修正しました。
クラスの定義が少し分かったような気がします。勉強になりました。
有り難う御座いました！

通報する
お礼日時：2003/12/02 23:54

No.2

  • 回答者： lead1976
  • 回答日時：

既に回答が寄せられているので蛇足ですが…



bodyにクラスを設定していて、それぞれのクラスごとにスタイルシートを振り分けたいという場合でしたら、#1の方が回答されているように、

BODY.top A:visited { text-decoration:none;color:#CD1076;}
BODY.top A:active { text-decoration:none;color:blue;}

BODY.menu A:visited { text-decoration:none;color:purple;}
BODY.menu A:active text-decoration:none;color:#E1ACDA;}

このように、親要素を特定するセレクタに、半角スペースで区切って振り分けようとしているスタイル指定を追加すればよいでしょう。

ただ、このケースでは、一つのHTMLファイルにbody要素は一つしかないわけですから、body要素のクラスで振り分けている分のスタイルシートをまとめて別の外部CSSファイルに分割してしまって、共通する部分の外部スタイルシートファイルとは別にして管理する方が、メンテナンス時に見通しやすいかもしれません。
外部CSSファイルを1つのHTMLファイルで複数取得することもできますので、現状body.topで指定しているスタイルをtop.cssに、body.menuで指定しているスタイルをmenu.cssにまとめてしまい(このときは、スタイルシートやbodyタグから、クラス指定を取り払ってください)、残ったスタイル指定をcommon.cssなどとして、
bodyにclass="top"としていたファイルには

<link rel="stylesheet" href="top.css" type="text/css">
<link rel="stylesheet" href="common.css" type="text/css">

bodyにclass="menu"としていたファイルには

<link rel="stylesheet" href="menu.css" type="text/css">
<link rel="stylesheet" href="common.css" type="text/css">

というような形で、1つのHTMLファイル内で複数の外部CSSファイルを組み込むようにするのでも良いのではないかと思います。

参考まで。 乱文失礼しました。
    • good
    • 0
    • 件
通報する
この回答へのお礼

アドバイス有り難う御座います。m(＿" ＿)m
問題は解決しました。
今、外部ＣＳＳが物凄く長くなってしまっていて管理し辛くなっていました。
アドバイス通り分割する事にします。恥ずかしい話ですが分割する事自体、
全く思いつきませんでした。(;￣Д￣A ふきふき
ご親切に有り難う御座いました！

通報する
お礼日時：2003/12/03 00:00

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報