再度の質問となります。 ご指南いただければ幸いです。
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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTML <input type=password>の黒丸の色を変える方法 3 2022/11/23 13:56
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- Excel(エクセル) こんなことできますか?例えば、sheetに貼り付けた図形のタイトルを、セルA1の文字で表示する。 5 2022/04/22 15:25
- Windows 95・98 タスクバーの背景の色だけを変えたい。 2 2022/07/13 14:44
- Photoshop(フォトショップ) MacでPhotoshopに使い方 教えて! 2 2023/07/08 08:24
- Visual Basic(VBA) マクロ実行時、自動で背景色を変えたい。 C列にあるチェックボックスをチェックするとB列に「TRUE」 4 2022/11/08 11:14
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- Visual Basic(VBA) エクセルから、パワーポイントのスライドを複数作成する。 1 2022/07/08 09:40
- モニター・ディスプレイ ASUS ノートパソコン有機EL AMDディスプレイ 白 1 2023/07/22 13:36
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
中点「・」の改行について
-
書籍を見つつサイト造りの練習...
-
cssが効かなくて困ってます
-
入力フォームとセレクトボック...
-
css初心者 フレックスボックス...
-
HTMLで文字が重なって表示されます
-
画像の位置指定
-
CSSでボックスのheightが0になる
-
CSS:animation開始位置の設定
-
吹き出し 下記の吹き出しのスタ...
-
CSS(0の単位)について
-
CSSでの段組で、下辺を揃える方法
-
投稿フォームの整列
-
cssでの幅の分割(固定・可変混...
-
スクロールボックスを中央に配...
-
Flexslider2のカーセルスライダ...
-
インラインフレーム内の表示位...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
余分な縦スクロールバーが出て...
-
<div>と<div>の間の10px程の...
-
【CSS】ヘッダーの高さが不明の...
-
CSSでボックスのheightが0になる
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
Media Queries 4 で 非推奨とな...
-
【HTML&CSS】フッター下部の余...
-
初心者html・CSS ウィンドウを...
おすすめ情報