下記のサイトを全体的にオレンジ系の色にしたいと思うのですが(文字は黒のままで、見出しとかラインなど)、CCSスタイルシートのどこをいじればいいですか?教えてください。

http://assgs.web.fc2.com/index2.html

回答の条件
  • 1人1回まで
  • 登録:2009/04/23 00:04:40
  • 終了:2009/04/27 22:23:12

ベストアンサー

id:kn1967 No.2

kn1967回答回数2915ベストアンサー獲得回数3012009/04/23 02:57:44

ポイント30pt

(0)色はとりあえず2色とします。

#ffcc99 薄い

#ff5d00 濃い


(1)全体

HTMLではBODYの中に要素を詰めますから

bodyのカラーを#fffを#ffcc99にしてみましょう。

style.css を探してみると「1.全体」に記述がありますね。

background: #ffcc99; /* 全体の背景色 */

ブラウザ依存ですが下記部分の#fffを#ff5d00にしてみましょう。

scrollbar-3dlight-color: #fff;

scrollbar-arrow-color: #000;

scrollbar-base-color: #fff;

scrollbar-darkshadow-color: #fff;

scrollbar-face-color: #fff;

scrollbar-highlight-color: #fff;

scrollbar-shadow-color: #fff;

scrollbar-track-color: #ebebdd;


(2)メイン画像の枠

目立つ部分なので、まず替えてみましょう。

画像は IMGタグ ですから同じく「1.全体」にある img を見てみると

色や太さの指定はありません。

border: 0;

style.cssだけでなく、top.html の中を見てみましょう。

Pタグに囲まれている事に注目してみると mainimg とIDが振られてますので

style.cssを下のほうまで探していくと「8.メイン」に下記記述がありますので

#000 を #ff5d00 に替えてみましょう。

p#mainimg img {

border: 7px #000 solid;

}


(3)見出しのボーダー

H2タグが使われていますので h2 を探すと「2.見出し」にありますから

#000 を #ff5d00 に替えてみましょう。

border-top: 2px #000 solid;

border-bottom: 1px dashed #000;


まだ左半分は黒い部分がありますね。でも、長くなるので割愛させてください。

上記同様に替えたい部分がどのようなタグなのかを調べて

逐一替えながら調整してください。

(#で始まる部分を探して変えながら、どこが変わったかを見るのも手ですが

HTML側で使われていないタグだったりすると理解に苦しむので

今回はお勧めしません。)

id:kotonoha35

スクロールバーが変わるとだいぶ変わりますね。

これも知りたかったところなので、教えていただけて嬉しいです。

CSSのどこを変えたら変わるかとかも、良く分かりました。

分かりやすい回答ありがとうございます!

2009/04/27 22:21:27

その他の回答(2件)

id:pahoo No.1

pahoo回答回数5960ベストアンサー獲得回数6332009/04/23 01:51:35

ポイント25pt

見出し "WHAT'S NEW?" は h2 タグです。"style.css" に h2 が定義されているので、これに手を加えてください。

見出し文字そのものをオレンジ色にしたいなら、

color: #FF6600;

見出しのライン(ボーダー)をオレンジ色にしたいなら、

border-color: #FF6600;

といった感じでいかがでしょう。

参考サイト

id:kotonoha35

変えてみたら出来ました!

参考サイトもとても為になります、ありがとうございます。

2009/04/27 22:21:22
id:kn1967 No.2

kn1967回答回数2915ベストアンサー獲得回数3012009/04/23 02:57:44ここでベストアンサー

ポイント30pt

(0)色はとりあえず2色とします。

#ffcc99 薄い

#ff5d00 濃い


(1)全体

HTMLではBODYの中に要素を詰めますから

bodyのカラーを#fffを#ffcc99にしてみましょう。

style.css を探してみると「1.全体」に記述がありますね。

background: #ffcc99; /* 全体の背景色 */

ブラウザ依存ですが下記部分の#fffを#ff5d00にしてみましょう。

scrollbar-3dlight-color: #fff;

scrollbar-arrow-color: #000;

scrollbar-base-color: #fff;

scrollbar-darkshadow-color: #fff;

scrollbar-face-color: #fff;

scrollbar-highlight-color: #fff;

scrollbar-shadow-color: #fff;

scrollbar-track-color: #ebebdd;


(2)メイン画像の枠

目立つ部分なので、まず替えてみましょう。

画像は IMGタグ ですから同じく「1.全体」にある img を見てみると

色や太さの指定はありません。

border: 0;

style.cssだけでなく、top.html の中を見てみましょう。

Pタグに囲まれている事に注目してみると mainimg とIDが振られてますので

style.cssを下のほうまで探していくと「8.メイン」に下記記述がありますので

#000 を #ff5d00 に替えてみましょう。

p#mainimg img {

border: 7px #000 solid;

}


(3)見出しのボーダー

H2タグが使われていますので h2 を探すと「2.見出し」にありますから

#000 を #ff5d00 に替えてみましょう。

border-top: 2px #000 solid;

border-bottom: 1px dashed #000;


まだ左半分は黒い部分がありますね。でも、長くなるので割愛させてください。

上記同様に替えたい部分がどのようなタグなのかを調べて

逐一替えながら調整してください。

(#で始まる部分を探して変えながら、どこが変わったかを見るのも手ですが

HTML側で使われていないタグだったりすると理解に苦しむので

今回はお勧めしません。)

id:kotonoha35

スクロールバーが変わるとだいぶ変わりますね。

これも知りたかったところなので、教えていただけて嬉しいです。

CSSのどこを変えたら変わるかとかも、良く分かりました。

分かりやすい回答ありがとうございます!

2009/04/27 22:21:27
id:juner No.3

juner回答回数21ベストアンサー獲得回数02009/04/23 06:19:43

ポイント25pt

とりあえずstyle.cssに全部適用範囲等描いてあるのでそこを見て替えた方がよろしいのでは無いでしょうか?

http://assgs.web.fc2.com/style.css

又、各項目でオレンジ色に変えたいときは

color:orange;

などとして

背景色をオレンジ色に変えたい時は

background-color:orange;

の様に追記もしくは変更していけば良いかと思われます。

id:kotonoha35

どうもありがとうございました!

2009/04/27 22:21:57

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません