テーブルの背景だけを透過したいんですけど、どうすればいいですか?
自分で調べてみて、テーブルタグの中に<style="background-color:#FFFFFF;filter:Alpha(opacity=75);">を入れてみたんですけど、テーブル全体を透過してしまって文字まで薄くなってしまったんです。
だから、背景を透過した画像を並べてみたんですけど、なんか不自然で、私がイメージしていたのとは違うんです。私は最初にやったように、元の背景の色自体が薄くなるよいうにしたいんです。
でも、それって不可能なことなんですか?

A 回答 (1件)

文字を透過したくないセルに次のようなスタイルを。


<td style="position:relative;">

または、
セルがたくさんあるなら<head>~</head>間に以下を追加。

<style type="text/css">
<!--
th,td{position:relative;}
-->
</style>
    • good
    • 0

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

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

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

Q折りたたみテーブル(バタフライテーブル)

折りたたみテーブル、バタフライテーブルなどと呼ばれるテーブルの購入を考えています。

↓↓こんなのです↓↓
http://www.akitamokko.jp/item/table/t541.html

【質問1】
なんとなく危なそうにも見えますが、使っているときに折りたたみ部分が落ちてしまったり、折れる部分の汚れが掃除しにくかったり、などの不都合はありませんか?
実際にお使いしている方にご感想をお聞きしたいです。

【質問2】
希望してるのは、↑URLのより大きいサイズなので、探しているところのですが、サイトがありましたら紹介して下さい。

Aベストアンサー

以前使っていましたが現在は処分してしまいました。

写真の物とは少々違うので参考程度ですみません。大き目の4人掛けの四角いテーブルでした。椅子も収納できないと意味がないと思い、テーブル真ん中に4脚の付属の折りたたみ椅子が収納できる物です。

質問2に先にお答えしますが、ネットショップではなく通販のニッセンで購入しました。

質問1.折りたたみ部分が使用中に落ちてくる事はありません。広げた際、足となる支柱(?)も広げてテーブル下に固定しますが、小さな金具が付いていてロックできました。掃除しにくいこともなかったです。

私が処分した理由は、
・(商品にもよりますが)広げて使用中の足のガタツキが直らなかった事。全ての足が接地する様に調節するネジ式の調整金具が付いていましたが、最大限に伸ばしても直りませんでした。購入後すぐは良かったのですが、使っていくうちにガタツキが出たようです。

・リビングの狭さを有効に利用するために購入しましたが、いちいちしまう事が毎日のことなので面倒になってきた。

・付属の折りたたみ椅子の座り心地の悪さ。

以上の理由です。

毎日これで食事をし、毎日折りたたんで収納しようとしたのでダメだったかもしれません。目的が普段はそのまま使用していて、来客がある時だけコンパクトにしまうつもりなら便利なアイテムかなぁと言うのが感想です。

以前使っていましたが現在は処分してしまいました。

写真の物とは少々違うので参考程度ですみません。大き目の4人掛けの四角いテーブルでした。椅子も収納できないと意味がないと思い、テーブル真ん中に4脚の付属の折りたたみ椅子が収納できる物です。

質問2に先にお答えしますが、ネットショップではなく通販のニッセンで購入しました。

質問1.折りたたみ部分が使用中に落ちてくる事はありません。広げた際、足となる支柱(?)も広げてテーブル下に固定しますが、小さな金具が付いていてロックで...続きを読む

Qフレームの背景を透過したいんですけど、、、

インランフレームの背景を透過したいんですけど、どうやればいいですか?
自力で調べたんですけど、力尽きました・・・

Aベストアンサー

インランフレームというのはちょっと危険な感じですが…。

インラインフレームを置いているページのソースで
<iframe src="content.html" allowtransparency="true">
と指定し、

インラインフレームに表示されるページ(content.html)のソースで
<body style="background-color:transparent">
と指定すれば、

インラインフレームの中に表示されるページの背景が透過され、インラインフレームを表示しているページの背景が引き継がれます。
しかし対応しているブラウザはIE5.5以上の他にあまりないようです。

自力で調べたといわれていますが、検索すれば十分ヒットします。
インランフレームで調べていたのでs(ry

Q折りたたみテーブル

キッチンの作業スペースがとても狭いので、折りたたみのテーブルとかあればいぃだろうな、と思っています。

条件
1、高さが80cm前後
2、折りたたみがすごく楽
3、なるべくコンパクト(まな板が置けるくらい)

こんな感じのテーブルを知っていたら(売っていたお店など)教えてください。(^^)

Aベストアンサー

ホームセンターに行けば、それくらいの小さなテーブルが販売されていますよ。もちろん、店舗によって違うでしょうけれど…。
もともとは読書用とか、そんな用途のものだと思いますけれど、折りたたむことができるものがありますので、根気よくホームセンターを回ってみればいいかと思います。
私が知っているので、大きさは、小学校などに置いてある勉強机を、縦に半分に切ったくらいの大きさでした。

Qopacityなどで背景のみ不透明度にしたいです

閲覧ありがとうございますm(_ _)m


WEB制作に関してご質問させて頂きたいことがございます。
ヘッダー画像部分のHTML+CSSコーディングで下記のことをやりたいと考えています。

(1) ヘッダー画像の右上に角丸画像を貼る
(2) 角丸画像(ホワイト)の中にタイトルを入れたい
(3) ヘッダー画像をもとに角丸画像のみ不透明度を設定したい(タイトル文字は不透明度にしない)


ソースは下記になります。
【HTML】
<div id="header">
<div id="headertext"><h1>タイトル</h1>
<h2>- サブタイトル -</h2>
</div>
</div>


【CSS】
#header {
margin: 0;
width: 1200px;
height: 270px;
overflow: hidden;
padding: 0;
background-image: URL("ヘッダー画像")
}

div#headertext{
position: relative;
top: 20px;
left: 630px;
height: 60px;
width: 550px;
padding-right: 20px;
padding-top: 10px;
text-align: right;
background-image: URL("タイトル用ホワイト画像");

/*opacity:0.5; background-color: #FFFFFF;*/

/* -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;*/
}


h1、h2のCSSは省略いたします。
(1)と(2)に関しては出来ていますが、(3)に関してはホワイト画像とタイトル、サブタイトル共に不透明になってしまって上手くいきませんでした。

よろしければご教示お願い致します。

閲覧ありがとうございますm(_ _)m


WEB制作に関してご質問させて頂きたいことがございます。
ヘッダー画像部分のHTML+CSSコーディングで下記のことをやりたいと考えています。

(1) ヘッダー画像の右上に角丸画像を貼る
(2) 角丸画像(ホワイト)の中にタイトルを入れたい
(3) ヘッダー画像をもとに角丸画像のみ不透明度を設定したい(タイトル文字は不透明度にしない)


ソースは下記になります。
【HTML】
<div id="header">
<div id="headertext"><h1>タイトル</h1>
<h2>- サブタイトル -<...続きを読む

Aベストアンサー

デザインのためにHTML書かない!!--先でデザイン変えるとき困るし、何のために「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」かわからない。

<body>
 <div class="header">
  <h1>ページタイトル</h1>
  <h2>サブ見出し</h2>
  <div class="nav">
    <h3>ナビゲーション</h3>
  </div>
 </div>
とする。
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:1000px;margin:0 auto;padding:5px;}
div.header{min-height: 270px;
background-image: URL(./images/background/sky.jpg);
}
div.header h1{
float:right;
top: 20px;
right: 20px;
height: 60px;
width: 550px;
text-align:center;
line-height:60px;
position:relative;
z-index:10;
}
div.header h1:before{
content:url(./images/background/white550_60.gif);
position:absolute;top:0;left:0;
opacity:0.5;
z-index:-10
}
div.header h2:after{content:"";clear:both;display:block;white-space:pre}
div.header div.nav{background-color:yellow;}

・スマホや狭いディスプレイから幅広まで対応
・ユーザーがフォントサイズを変更してもよい
・border-radiusと、background-color:rgba(255,255,255,0.5)のほうが本来の方法

デザインのためにHTML書かない!!--先でデザイン変えるとき困るし、何のために「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」かわからない。

<body>
 <div class="header">
  <h1>ページタイトル</h1>
  <h2>サブ見出し</h2>
  <div class="nav">
    <h3>ナビゲーション</h3>
  </div>
 </div>
とする。
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,d...続きを読む

Qテーブルの折りたたみ脚の金具

子供のままごと用のテーブルを木材で作成します(テーブル寸法 400×300mm、高さ300mm)。
折りたたみの脚にしたいと思っていますが、大きなテーブル用の金具はあるのですが、
このような小さいテープルに合う金具をご存じの方はおられませんか??

Aベストアンサー

ままごと用とのことで、その足を広げたりたたんだりの操作もお子さんがされる場合もあるとの前提でのアドバイスです。

専用の折りたたみ用の金具は足を広げた際の固定の堅牢さも求められるがために、言い換えると足を広げた段階で何らかの形で固定され、足をたたむ際にはその固定・ロックを解除する操作が必要な物が多く、小さなお子さんには力や手順などから操作もむずかしいかと思います。

簡単に図面を書いてみましたが、足の根元に別な三角、四角の板を蝶番で取り付けることで簡易的なストッパーとして機能させられます。

図のように左側の2本組み足から反対側の2本組み足まで細長い板を一本取り付けてあげればワンモーションで両足ともロック・解除ができますし、片方ずつ別々に2カ所の板でのストッパーでも良いわけです。
天板を上、足を下にしたまま足を開けばストパーが下がり自動的にロックが掛かりますし、たたむときだけ図でいう真ん中に横方向に渡してあるストッパーを倒してから(あるいはテーブルそのものを起こせばストパーが倒れますので)足をたためばいいわけです。

わかりますかね?

QCSSでbackground-colorがうまく設定できない。

初心者すぎてどうやってもわからなかったので質問させて頂きました。

以下のHTMLのタグ?(テキストナビ?のつもり)に背景色を付けたいのですが、CSSでバックグラウンドカラーを設定すると、背景色の高さが、ページの一番上まで伸びてしまいます。背景色の高さを調節したいのですがどうすればよいのでしょうか?

<div id="navi">
<a href="index.html">Home</a>
>
<a href="inside.html">Inside</a>
</div>

この下のタグには文字に背景色が文字の高さ分、普通に表示されました。(上のタグの下にあります。)
<div id="pagetitle">
<a class="midasi">Inside </a>
<a class="komidasi"> - サイト概要 -</a>
</div>

原因が分からないので関係あるのかわかりませんが、ページの一番上には、リストで作ったメニューバーがあります。このリストはmargin-topで下に下げてあります。その下に最初のタグが並んでいます。単独では問題ないと思うのですが、リストで作ったメニューバーの影響のような気がするのですが、よくわかりません。

どうやって質問したらよいのかわからなかったので、このようになりましたが、情報不足でしたら補足しますので、よろしくお願いします。

初心者すぎてどうやってもわからなかったので質問させて頂きました。

以下のHTMLのタグ?(テキストナビ?のつもり)に背景色を付けたいのですが、CSSでバックグラウンドカラーを設定すると、背景色の高さが、ページの一番上まで伸びてしまいます。背景色の高さを調節したいのですがどうすればよいのでしょうか?

<div id="navi">
<a href="index.html">Home</a>
>
<a href="inside.html">Inside</a>
</div>

この下のタグには文字に背景色が文字の高さ分、普通に表示されました。(上のタグの下にあり...続きを読む

Aベストアンサー

Opera 対応, IE 対応が、どうにか出来たと思う
改良版をご提示致します。


=== CSS ===

body{
margin-top:0px;
}
.sdvDummy1{
margin-top:125px;
margin-left:0;
padding:0;
background:#cccc00;
float:left;
clear:both;
line-height:1px;
}
.sdvDummy2{
clear:both;
line-height:9px;
}
.contents{
color:#330000;
background:#ffffcc url("image/title.jpg") no-repeat top;
margin-right:auto;
margin-left:auto;
border-top:solid 0px #330000;
border-right:solid 25px #330000;
border-bottom:solid 25px #330000;
border-left:solid 25px #330000;
width:606px;
}
ul#menu{
clear:both;
margin:0;
padding:0;
}
ul#menu li{
background:#cccc00;
float:left;
white-space:nowrap;
list-style-type:none;
}
ul#menu a{
display:block;
color:#cccc00;
background-color:#330000;
margin:0 0 0 1px;
width:120px;
height:30px;
font:12px/30px normal;
text-decoration:none;
text-align:center;
}
#menu a:hover{
color:#ffcc00;
background:#cccc00;
}
#menu a:active{
color:#ffffcc;
background:#cccc00;
}
#menu span{
color:#ffffff
display:none;
}
#menu .current{
color:#ffcc00;
}
#menu .line{
border-right:1px solid #cccc00;
}
#navi{
color:#ffffcc;
background-color:#cccc00;
padding-right:20px;
clear: both;
font-size:11px;
text-align:right;
}
#navi a{
color:#330000;
margin-top:0;
margin-left:0;
font-size:11px;
text-decoration:none;
}
#navi a:hover{
color:#ffcc00;
}
#navi a:active{
color:#ffffcc;
}
#pagetitle{
padding:10px 0 0 20px;
}
.midasi{
color:#330000;
font-size:18px;
font-weight:bold;
margin:0;
}
.komidasi{
color:#cccc00;
font-size:14px;
font-weight:bold;
}


=== HTML ===

<body>
<div class="contents">
<div class="sdvDummy1"></div>
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a class="current" href="inside.html">Inside</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="request.html">Request</a></li>
<li><a class="line" href="contact.html">Contact</a></li>
</ul>
<div class="sdvDummy2"></div>
<div id="navi" style="clear: both;">
<a href="index.html">Home</a>
>
<a href="inside.html">Inside</a>
</div>
<div id="pagetitle">
<a class="midasi">Inside </a>
<a class="komidasi"> - サイト概要 -</a>
</div>
<!--罫線-->
<hr color="#cccc00" size="1px">
</div>
</body>


=== ポイント ===

背景は、既定値は継承でなく透過だったと思うのですが・・・。
OL や UL のリスト要素に指定してもその指定がうまくいかない様で
LI 要素に指定すると期待する結果が得られる様で。

リストを横に Opera でも表示するには、
OL や UL のリスト要素に float:left; を指定しない方法を探さないといけない様で
かといって今回は、 float:left; 含みで margin-top を指定して上からの位置を指定したい物がある。
という事で、位置指定を別要素で行う様に分離しました。
HTML の記述上ではあまり綺麗な記述ではありませんが、
とりあえず、文法はクリアしている上に
各ブラウザに対応しているという実用の上からは
適切な記述になっていると思います。


以上でなんとか、実用的にも知識的にもクリアできたと思います。
また何かございましたら、ご質問下さい。

Opera 対応, IE 対応が、どうにか出来たと思う
改良版をご提示致します。


=== CSS ===

body{
margin-top:0px;
}
.sdvDummy1{
margin-top:125px;
margin-left:0;
padding:0;
background:#cccc00;
float:left;
clear:both;
line-height:1px;
}
.sdvDummy2{
clear:both;
line-height:9px;
}
.contents{
color:#330000;
background:#ffffcc url("image/title.jpg") no-repeat top;
margin-right:auto;
margin-left:auto;
border-top:solid 0px #330000;
border-right...続きを読む

Q折りたたみテーブルの脚はどこで買えば?

キャンプをする時にテントの中で使用する小さな折りたたみテーブルを自作しようと考えていますが、折りたたみの脚をどこで買えばいいかわかりません。ご存知の方、教えていただけると助かります。
よろしくお願いします。

Aベストアンサー

たぶん、ホームセンターに売っているはずです。
ウチの近くのところは売っています、そこに限って言えば。
高さ(長さ)も種類がありますが、ちゃぶ台程度の高さが主流で、イス用テーブルの高さはあまり無いようです。
あまり、カッコイイ感じのは無いようです。
わたしは、テーブル天板用として売っている板(集成材で角も丸くできている)に足をつけて作りました。

Q背景に透過画像を重ねて、背景が透けて見える状態にしたい

http://www.iris-interactive.fr/accueil/ACC_index.asp
こちらのサイトのメインコンテンツ部分で背景が透けて見えます
これはどうやるんでしょうか?教えてください

Aベストアンサー

<div id="page">について、
透明なpngを背景にしてあるだけですが??pngでなくてgifでもできるようですね。
サイトのソースと、スタイルシートをご確認ください。

QDIYテーブルの折りたたみ脚について

天版を蝶番で付けて真ん中を繰り抜き、七輪テーブルを作成しました。
現状は、余っているキャンプ用テーブルの脚をガムテープで固定しています。
ユニフレームの焚き火テーブルと同じ高さの折りたたみ脚を付けたいと思ってますが良いアイデアもしくは脚の販売先はありますでしょうか?
焚き火テーブルの高さは37cm、七輪テーブルの天版の厚さは約1.5cmなので、最低でも35cmの脚が必要になるかと思います。30cmの脚は結構見かけるのですが・・・。

Aベストアンサー

市販品にこだわらず、木などで作れば高さ自由ですよ。

1)別板を2枚クロスさせて天板を置く
2)蝶番つけて折りたたみ足にする
3)ナット埋めてねじ込みにする
4)テーブルを箱型にして、七輪+火種のケースとしてもそのまま使う

↑これらは高さの微調整にはアジャスタフットなりが必要ですが、
こういうの↓はアジャスタ機能もってますね

5)パイプの入れ子構造にして、内パイプは外パイプとねじ止めする。
 または外側の先端に割りをいれておいてクランプやホースバンドなどで締めて内パイプを固定する
6)天板の下にハの字形に広がるように左右脚をつけて、間をロープでつないで開き具合を調節する


ま、私なら4か6にしますね。
6のみ、簡単に絵にしておきます。

Qbackground-colorの塗りつぶし

footer部分の「background-color」と「border」の調整がうまくいきません…。
ページ全体の幅は、960pxあります。


CSSのフッター部分に
#footer {
clear: both;
width: 954px;
background-color: #BFCFFF;
padding: 3px;
}

IE9、Firefox11、Chrome18で確認しました。
結果は、添付ファイルのようになりました。

・Firefox11、Chrome18 …上記CSSのwidthを954、padding: 3px; を実行すれば、
                Firefox11、Chrome18で確認した所、添付ファイル(1)の結果になり、
                正しく表示されます。

・IE9            …上記CSSのwidthを954、padding: 3px; を実行すれば、
                IEでは、添付ファイル(2)の結果になり、borderとbackgroundcolorの間に
                隙間(濃い青色)が残ってしまいます。

質問
 IE9、Firefox11、Chrome18全てで、濃い青色背景を出さずに、
全てを正しく塗りつぶす((1)の結果)にはどうしたらいいでしょうか?

よろしくお願いします。

footer部分の「background-color」と「border」の調整がうまくいきません…。
ページ全体の幅は、960pxあります。


CSSのフッター部分に
#footer {
clear: both;
width: 954px;
background-color: #BFCFFF;
padding: 3px;
}

IE9、Firefox11、Chrome18で確認しました。
結果は、添付ファイルのようになりました。

・Firefox11、Chrome18 …上記CSSのwidthを954、padding: 3px; を実行すれば、
                Firefox11、Chrome18で確認した所、添付ファイル(1)の結果になり、
        ...続きを読む

Aベストアンサー

古いIEは、borderやpaddingを含めてwidthとして処理します。
新しいブラウザのデフォルトでは、borer,padding,widthそれぞれが独立して計算されます。

つまり、
{
border:3px;
padding:3px;
width:100px
}
だった時、
古いIEでは、width:100pxなのに対し、新しいブラウザではwidth:112pxとして処理されます。

ここまでが基本ですが、IEには互換モードというものがあり、最新のIE9でも、古いIEと同じように処理するモードがあります。おそらく互換モードでHTMLを記述されているのでしょう。詳しくは「IE互換モード」で検索してみてください。
解決策としては、新しいブラウザでも古いIEと同じように処理させるか、古いブラウザに向けて別途異なる措置をとるか、のどちらかだと思います。
ちなみに、CSS3のbox-sizingを解釈できるブラウザであれば、以下のように古いIEと同じような計算方法で処理できます。

div{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}

古いIEは、borderやpaddingを含めてwidthとして処理します。
新しいブラウザのデフォルトでは、borer,padding,widthそれぞれが独立して計算されます。

つまり、
{
border:3px;
padding:3px;
width:100px
}
だった時、
古いIEでは、width:100pxなのに対し、新しいブラウザではwidth:112pxとして処理されます。

ここまでが基本ですが、IEには互換モードというものがあり、最新のIE9でも、古いIEと同じように処理するモードがあります。おそらく互換モードでHTMLを記述されているのでしょう。詳しくは「IE互換モー...続きを読む


人気Q&Aランキング