人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: kotonoha35
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:オレンジ サイト スタイルシート 見出し
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● pahoo
●25ポイント

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

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

color: #FF6600;

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

border-color: #FF6600;

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

参考サイト

◎質問者からの返答

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

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


2 ● kn1967
●30ポイント ベストアンサー

(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側で使われていないタグだったりすると理解に苦しむので

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

◎質問者からの返答

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

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

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

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


3 ● juner
●25ポイント

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

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

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

color:orange;

などとして

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

background-color:orange;

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ