再度の質問となります。 ご指南いただければ幸いです。
http://web-zen.sakura.ne.jp/index.html
現在、無料cssを使用してホームページの作成を命令(笑)されています。
先の質問で左側のバナーの高さを調節したいと質問しましたが、
それに加えて バナーそのものの背景色を薄い青色に
変更したいです。 cssファイルをいろいろいじってみましたが、
背景の色を変更することはできませんでした。
何か画像ファイルを、希望の色に差し替える必要があるのでしょうか?
※バナーの背景を薄い青色の背景に変更すると、現在書いてある文字が白色となり
大変見づらくなってしまうので、できればこちらの文字色を黒色に変更
する方法もご指南いただければ幸いです。
駄文失礼しましたm(_ _)m
(できれければ、<font color="black"></font>で対応予定です。)
No.4ベストアンサー
- 回答日時:
昨日の回答の追加
参考URLのようにすればいいのでは?・・・
HTMLは、HTML5で記述、CSSは、3.0、レイアウトには、SkeltonFremeworkを使用しています。
あとは画像と、CSSを、変更すれば、思い通りの画像、デザインに変更できると思います。
なおリンクは、省略していますので、ファイル場ないという表示がされます。
ダウンロードは、http://www.nanden.asia/test/test.zip
から行えるように設定しておきました。
参考になれば幸いです。
参考URL:http://www.nanden.asia/test/temp.html
言葉だけではなく、心の底からお礼を申し上げます。
ありがとうございます!
早速、現在のデータベースをいったんFFFTPで全てダウンロードしてバックアップを作成した後、上記のファイルに差し替えてみます。
私もnanden1548様のようにこの分野を勉強して誰かにアドゥヴァイスできるよう努力して行きます。しばらくは他のホームページ作成者様の質問を見つつ、編集・勉強していきたいと思います。
"ありがとうございました!"
語彙力が無くこれに変わる言葉が出てきません。
現段階で、上司の鉄拳が飛ぶことがなくなりました。
皆様のおかげで今日は久しぶりに眠れそうです(笑)
No.3
- 回答日時:
CSSで記述するのであれば、バナーに、idか、class名を付けることになります。
banner #saccess{color:#000000;background-color:#a8c1da;background image:url("images/***.jpg");}
といったようになります。
<font coler="">というような記述は、HTML4.01、xhtml1.1では、ありません!
HTML3.0時代の記述方法です。
<b>も、HTML4.01、xhtml1.1では、<strong>タグを使ったほうがいいのでは?・・・
HTML5.0ではOKですが、HTML4.01およびxhtml1.1では、推奨されていません。
文字色:黒は、color:#000000;あるいは、color:#000;と記述します。
ソースを読むとxhtml1.1で記述されているのだと思いますが、タグのおかしい部分が多くあります。
いらない、おせっかい、かもしれませんが、
見た目ではなく、正しい文章構造を記述する勉強をされたほうがよろしいのでは?・・・
ご回答ありがとうございます。
最初にどう勉強すれば良いのかさっぱりな状態でした。
貴重な意見として真摯に受け止め、参考書なども買って勉強してみます。(OKWaveで類似した質問が多々ありますので、そちらを見て試行錯誤しております。)
また壁にぶつかったときに、ご指南いただけますと幸いです。
ご回答ありがとうございました!
No.2
- 回答日時:
先ほどの
⇒左側に設置したバナーの縦の長さを小さくしたいです - HTML - 教えて!goo( http://oshiete.goo.ne.jp/qa/7953410.html )
へのスタイルシートです。
適用させるHTMLを見なくても、スタイルシートが弄れると思います。
divをidやclass名を併用して文書構造をマークアップするという本来の使い方にしてあるから、こんなに簡単になるのです。
★ウィンドウ幅640px以上に対応、幅広ディスプレイでは中央
使用している画像はすべて追随して伸縮します。
背景画像のみCSS3のbackground-size:プロパティを使用しています。それ以外はCSS2.1の範囲内です。
★W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_ … )でチェック済み
★スマホの640pxに対応
製品リストが2列になる
★外形は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
- 回答日時:
背景色を変えたいと思われる場所は、3つあります。
#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;
}
ちなみに“バナー”ではないと思います、サイドメニューでいいんじゃないでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
画像イメージの上下左右、欲し...
-
Media Queries 4 で 非推奨とな...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSSで画像を同じ位置に重なり合...
-
<div>と<div>の間の10px程の...
-
tableタグで作るような表をCSS...
-
font-sizeが効かない
-
ブラウザの文字サイズを変更す...
-
ホームページのメニュー
-
widthやheightの数値に単位(px...
-
float: leftで横に並べたら、サ...
-
スクロールボックスを中央に配...
-
画像の上に、背景を表示させテ...
-
CSSで指定した背景画像にリンク...
-
Internet Explorer 6による不具合
-
CSSについて
-
W3Cのソースコードの検証サービ...
-
インラインスタイルシートで見...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報