HTMLを始めたばかりの初心者です。
スタイルシートを使ってメール用のひな形を作っているのですが、わからないところがあるので教えてください。

どの本やサイトを見ても背景色を2種類表示させる指定が載ってないのです。
そういったことは可能ですか?
たとえば上から70ピクセルをAの色で表示させ、その下から全てをBの色で表示させたいのです。さらにAの色の上に背景透過性の画像を横並びで表示させたい・・(画像の背景色は使いたくないので)。
メールのひな形ですのでテキストは一切入力しません。画像のみです。

稚拙な質問ですみません。よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

ひとつの要素に二つの背景色を与えることはできません。



ですから、BODY要素に背景色Bを与え、上から高さ70pxのDIV要素(スタイルコンテナ)を用意して、そこに背景色Aと背景画像(透過指定したGIFになるでしょうね)を与えてください。

<BODY style="background-color:#000000;color:#FFFFFF">
<DIV style="height:70px;background-color:#FFFF00;color:#000000">
<P>背景色A</P>
</DIV>
<P>背景色B</P>
</BODY>

#例では背景画像入れてません。書くの面倒だったので(^_^;)
    • good
    • 0
この回答へのお礼

ありがとうございました。
なにせ初心者なので書いてあることはわかっても、いざ自分で画像入れて入力文字位置をいれて~となると、なかなかうまくいかなくて時間がかかってしまいました。
でも、なんとか完成できました。ありがとうございました。

お礼日時:2001/11/19 21:51

 


  それは、テーブルで可能です。
  ただ、テーブルだと、左右上下が、4ピクセルだったかデフォルトで開きますから、これを詰めるため、スタイル・シートで、マージンをゼロ・ピクセル指定してください。指定法は、スタイルシートの本に載っていると思います。
 
  こうして、四隅のマージンをゼロにしたあと、次のスクリプトでテーブルを造ります。

=====================================
 
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr width="100%" height="70" bgcolor="#0000ff" background="back1.gif">
<td width="100%" height="70"> </td>
</tr>
<tr width="100%" height="1000" bgcolor="#00aa00" background="back2.gif">
<td width="100%" height="1000"> </td>
</tr></table>

</body>
</html>

=====================================
 
  back1.gif と back2.gif は、最初から「透過GIFファイル」でなければなりません。htmlを使っても、CSSを使っても、javascriptを使っても、画像の背景を透明にすることはできません。(なお、テーブルの幅指定は間違いないですが、高さ指定は、テーブルについての解説を見て、確認してください。二重に指定しているのですが、うまく行かない可能性があります(わたしはスペーサか透明画像をサイズ指定して普通入れます)。
 
  これは、画像を背景として並べています。(第一の高さ70ピクセルのセルは、背景の色が青です。第二の高さ1000ピクセルのセルは、背景が緑です)。
 
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

QHTML/CSS 背景

下記のように背景の色を3色にしたいのですが、どのようにすればよいのでしょうか?
BODとDIVを二つ作り、いろいろやったのですがうまく行きません。

初歩的な質問だとは思いますが、よろしくお願いします。

Aベストアンサー

1例です(あらゆるブラウザーでは試してませんが)
<meta charset="UTF-8">
<title>HTML 5 complete</title>
<style type="text/css">
#piyo {background-color:gray;
position:absolute;
top:30%;
left:0px;
width:100%;
height:100%;
}
#hoge {background-color:green;
position:absolute;
top:0px;
left:0px;
width:100%;
height:30%;
}
#fuga {background-color:yellow;
position:absolute;
top:25%;
left:33%;
width:33%;
height:100%;
}
</style>
</head>
<body>
<div id="hoge">緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色緑色</div>
<div id="piyo">灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色</div>
<div id="fuga">黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄色黄</div>
</body>
</html>

1例です(あらゆるブラウザーでは試してませんが)
<meta charset="UTF-8">
<title>HTML 5 complete</title>
<style type="text/css">
#piyo {background-color:gray;
position:absolute;
top:30%;
left:0px;
width:100%;
height:100%;
}
#hoge {background-color:green;
position:absolute;
top:0px;
left:0px;
width:100%;
height:30%;
}
#fuga {background-color:yellow;
position:absolute;
top:25%;
left:33%;
width:33%;
height:100%;
}
</style>
</head>
<body>
<div id="hoge">緑色緑色緑色緑色緑色緑色緑...続きを読む

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qボタンを横に並べて表示させる方法

<input type="button"> ←このボタンを、並べて表示させるにはどうしたら良いでしょうか? (tableは使わない方法で) よろしくお願いいたします

Aベストアンサー

ソースをください。

inputはインライン要素なので改行は入らないです。

Q訪問済のリンク色を変えない方法

テキストリンクをクリックすると、次から色が変わりますよね?クリック前とクリック後と一緒の色にしたいんです。前に教えてもらったんですが、ページ内の全てのリンクの色が同じ色になってしまったんですが、そういうものなんですか?文字別に色を変えて指定することはできますか?どういうタグを入れたら良いか教えて下さい。

Aベストアンサー

BODYタグをいじります。
<body link="クリック前の色" vlink="クリック後の色">
のようにします。色の部分は#3333FFとか#FFFFFFのように
お好みの色をいれます。

文字別に色を指定するときも
<a href="link_saki.htm"><font color="#FF0066">リンク</font></a>
のように<a>の中に<font color>で指定すれば可能です。

Q(タグ)一部の背景色だけ変更できますか

携帯向けのサイトなのですが、背景色を一部だけ変更するタグ分かりますか?
分かる方がいましたらお願いします。

ネットで色々探したのですがなかなか見つからないもので、ここで質問させていただきました。
よろしくお願いします。

Aベストアンサー

一部だけって意味ではテーブルを使用して背景を指定してあげればいいのではないでしょうか?

<TABLE bgcolor="#EE1111" border="0" width="200" height="20">
<TR><TD></TD></TR>
</TABLE>

って感じでどうでしょう?

Q画像を複数横に並べ、かつそれぞれの画像の下に文字を表示する

はじめまして!!質問のとおりです。

画像を横に複数表示しつつ、さらにそれぞれの画像の下に文字を表示(それそれの画像の横幅の範囲内に)するには、どうすればいいのでしょうか??

回答よろしくお願いしますm(_ _)m

Aベストアンサー

TABLEタグで横並びの1画像ずつ区切ってみてはいかがでしょう?
最小の画像横幅より狭くTD の幅指定をして画像の下に回り込みで
テキストを入れる形を取りborder=0に指定すれば罫線は表示されません。

http://www.geocities.co.jp/SiliconValley-Bay/7770/file/hf.html
http://www.tagindex.com/hp_guide/menu/02.html


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング