左側のバナーの背景色を、任意の色に変更したいです。

質問

再度の質問となります。　ご指南いただければ幸いです。
http://web-zen.sakura.ne.jp/index.html
現在、無料cssを使用してホームページの作成を命令（笑）されています。

先の質問で左側のバナーの高さを調節したいと質問しましたが、
それに加えて　バナーそのものの背景色を薄い青色に
変更したいです。　cssファイルをいろいろいじってみましたが、
背景の色を変更することはできませんでした。
何か画像ファイルを、希望の色に差し替える必要があるのでしょうか？
※バナーの背景を薄い青色の背景に変更すると、現在書いてある文字が白色となり
大変見づらくなってしまうので、できればこちらの文字色を黒色に変更
する方法もご指南いただければ幸いです。
駄文失礼しましたm(_ _)m
（できれければ、<font color="black"></font>で対応予定です。）

回答No.4

noname#206842 · ベストアンサー

昨日の回答の追加
参考URLのようにすればいいのでは？・・・

ＨＴＭＬは、HTML5で記述、ＣＳＳは、３．０、レイアウトには、SkeltonＦｒｅｍｅｗorkを使用しています。

あとは画像と、ＣＳＳを、変更すれば、思い通りの画像、デザインに変更できると思います。
なおリンクは、省略していますので、ファイル場ないという表示がされます。

ダウンロードは、http://www.nanden.asia/test/test.zip
から行えるように設定しておきました。

参考になれば幸いです。

参考URL：

http://www.nanden.asia/test/temp.html

お礼

言葉だけではなく、心の底からお礼を申し上げます。
ありがとうございます！

早速、現在のデータベースをいったんFFFTPで全てダウンロードしてバックアップを作成した後、上記のファイルに差し替えてみます。

私もnanden1548様のようにこの分野を勉強して誰かにアドゥヴァイスできるよう努力して行きます。しばらくは他のホームページ作成者様の質問を見つつ、編集・勉強していきたいと思います。

"ありがとうございました！"
語彙力が無くこれに変わる言葉が出てきません。

現段階で、上司の鉄拳が飛ぶことがなくなりました。
皆様のおかげで今日は久しぶりに眠れそうです(笑)

回答No.3

noname#206842

CSSで記述するのであれば、バナーに、idか、class名を付けることになります。

banner #saccess{color:#000000;background-color:#a8c1da;background image:url("images/***.jpg");}
といったようになります。

<font coler="">というような記述は、HTML4.01、xhtml1.1では、ありません!
ＨＴＭＬ3.0時代の記述方法です。
<b>も、HTML4.01、xhtml1.1では、<strong>タグを使ったほうがいいのでは？・・・
ＨＴＭＬ５．０ではＯＫですが、ＨＴＭＬ４．０１およびxhtml1.1では、推奨されていません。

文字色：黒は、color:#000000;あるいは、color:#000;と記述します。

ソースを読むとxhtml1.1で記述されているのだと思いますが、タグのおかしい部分が多くあります。

いらない、おせっかい、かもしれませんが、
見た目ではなく、正しい文章構造を記述する勉強をされたほうがよろしいのでは？・・・

お礼

ご回答ありがとうございます。
最初にどう勉強すれば良いのかさっぱりな状態でした。
貴重な意見として真摯に受け止め、参考書なども買って勉強してみます。（OKWaveで類似した質問が多々ありますので、そちらを見て試行錯誤しております。）
また壁にぶつかったときに、ご指南いただけますと幸いです。
ご回答ありがとうございました！

回答No.2

ORUKA1951

先ほどの
　⇒左側に設置したバナーの縦の長さを小さくしたいです - HTML - 教えて！goo( http://okwave.jp/qa/q7953410.html )
へのスタイルシートです。
　適用させるHTMLを見なくても、スタイルシートが弄れると思います。
　divをidやclass名を併用して文書構造をマークアップするという本来の使い方にしてあるから、こんなに簡単になるのです。
★ウィンドウ幅640px以上に対応、幅広ディスプレイでは中央
　使用している画像はすべて追随して伸縮します。
　背景画像のみCSS3のbackground-size:プロパティを使用しています。それ以外はCSS2.1の範囲内です。
★W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )でチェック済み
★スマホの640pxに対応
　　製品リストが２列になる
★外形は30行程度に抑えてあるのでメンテナンスも楽でしょう。
★タブは＿に置換してあります。
<!--
html,body{margin:0;padding:0;}
div.header,div.section,div.footer{
＿width:100%;min-width:640px;max-width:960px;margin:0 auto;
}
div.header{min-height:100px;}
div.section{position:relative;min-height:600px;background-size:cover;}
div.section div.section,
div.section h2{margin:0 15%;min-height:0;width:auto;min-width:0;}
div.section div.nav,
div.section div.aside{position:absolute;top:0;width:15%;height:100%;}
div.section div.nav{left:0;}
div.section div.nav h3{display:none;}
div.section div.nav ol li img{display:block;width:90%;height:auto;}
div.section ol,div.section ol li{
＿list-style:none;margin:0;padding:0;
＿text-align:center;font-size:0.9em;
}
div.section div.aside{right:0;}
div.section ol.products li{
＿font-size:0.98em;width:30%;position:relative;
＿float:left;min-width:160px;margin:5px;
}
div.section ol.products li img{display:block;width:90%;height:auto;}
div.section ol.products li ol li{text-align:right;}
div.section ol.products li ol li:before{
＿position:absolute;left:0;font-weight:bold;
}
div.section ol.products li ol li.name:before{content:"品名";}
div.section ol.products li ol li.price:before{content:"価格";}
div.section ol.products li ol li.specification:before{content:"仕様";}

/* 分かりやすいように色分け */
body{background-color:silver;}
h1,h2,h3,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header{background-color:aqua;}
div.section{background:white url(./images/background/sky.jpg);}
div.section div.section{background-color:lime;}
div.section div.nav{background-color:rgb(255,200,200);}
div.section div.aside{background-color:rgb(200,200,255);}
div.footer{background-color:yellow;}
-->

回答No.1

outbrave

背景色を変えたいと思われる場所は、３つあります。

#side , #menu , #menu li a
これのどれを変えるかは自由で、若干背景色部分が異なります。

#side の背景色と文字色
#side {
float:left;
width:220px;
/*background:#181818;*/
background:#99ffff;
color: #000000;
padding:10px 0;
}

#menu は新たに作成
#menu {
background:#99ffff;
color: #000000;
}

#menu li a の場合、これ以外での場合もここでリンクの文字色と背景色の指定が必要
#menu li a {
display:block;
width:220px;
/*color:#f1f1f1;*/
background:#99ffff;
color: #000;
line-height:60px;
}

ちなみに“バナー”ではないと思います、サイドメニューでいいんじゃないでしょうか。