• 締切済み

(修正)DIV要素の重なっている部分を別色で表示したいのですが。

現在、WEB画面の開発を行っているのですが、以下のような要件があり、それをCSSでクリアできるのか調査を行っています。 ・ボックス要素とボックス要素の重なっている部分を別背景色で表示したい。 ・ボックス要素の数は不定(最大で数百になる)。 ・ボックス要素の大きさ(重なるポジション)はマウスのD&Dで変更可能。 ボックス要素の背景色を半透明にした場合は、色の要件が合わず(重なっている部分は緑、重なっていない部分は赤で表示)、重なっている部分を別のボックス要素で塗りつぶすことは、ボックス要素の数が多いのとマウスでの動的変更に処理負荷が耐えられませんでした。 何かいい解決方法を思いつく方がいられたら、ご教授お願いいたします。 ※TAG<index>にもポストしています。  http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=1250

みんなの回答

回答No.1

・ボックス要素1の背景色をtransparentにする。 ・ボックス要素1の後ろに<div>を置いて赤に塗りつぶし、width、heightはボックス用1と連動させる。(ドラッグなどでサイズを変更すると<div>もサイズ変更する) ・ボックス要素2と同じ位置に<div>を置いて、それを緑色に塗りつぶし、ボックス要素1のbottom, rightの位置に合わせてサイズ変更する というのを考えましたが。 場合によってはスタイルシートのz-Indexも調整する必要がでてくるかもしれません。

straycat13
質問者

お礼

回答ありがとうございます。 単純な例では、簡単なコードでできたのですが、ボックス要素数が不定(1、2ともに)であり、また、ボックス要素1が完全にボックス要素2の中に入ってしまうパターン等、処理が複雑で重くなりすぎてしまうため、残念ながら現実的ではありませんでした。 # 組むのに時間がかかりそうなのでサンプルコードは組んでいませんが。。。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • DIV要素の重なっている部分を別色で表示したいのですが。

    現在、WEB画面の開発を行っているのですが、以下のような要件があり、それをCSSでクリアできるのか調査を行っています。 ・ボックス要素とボックス要素の重なっている部分を別背景色で表示したい。 ・ボックス要素の数は不定(最大で数百になる)。 ・ボックス要素の大きさ(重なるポジション)はマウスのD&Dで変更可能。 ボックス要素の背景色を半透明にした場合は、色の要件が合わず(重なっている部分は緑、重なっていない部分は赤で表示)、重なっている部分を別のボックス要素で塗りつぶすことは、ボックス要素の数が多いのとマウスでの動的変更に処理負荷が耐えられませんでした。 何かいい解決方法を思いつく方がいられたら、ご教授お願いいたします。

  • img要素の属性のaltには何を書けばいいのでしょうか。

    img要素の属性のaltには何を書けばいいのでしょうか。 現在記事の補足要素として画像を表示していて、基本的にalt="画像"と書いています。 実際はその画像の説明を詳しく書かなければいけないようですね。 しかし詳しく書こうとすると本文の内容と重複する事になります。 http://www.tagindex.com/cgi-lib/q1bbs/patio.cgi?mode=view&no=4374 上のURLによると 「・本文の補足としての img 要素は、重複を避けるために alt 属性を空にしなければならない。」 とあるので、alt=""にしておくべきなのでしょうか。

    • ベストアンサー
    • HTML
  • CSSのrollOverで

    http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi 上記リンクHPの投稿一覧部分のように、マウスを重ねるとその列の色が変わるようにしたいのですが、上手く出来ずにおります。 htmlにテーブルを作りcssでテーブルに色をつけて tr:hover{ としてみたりとやってみたのですが、出来ませんでした(テーブルに色をつけなければ出来るのですが)。 リンクHPの投稿一覧部分のように、マウスを重ねるとその列の色が変わるようにするにはどのように行えばよいのでしょうか? ご指導をいただきたく思います。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • div要素を綺麗に並べたいのですが困っています。

    CSSのレイアウトで困っています。 現在ショッピングサイトを作っているのですがCSSの表示で困っています。 item_boxというdiv要素の中に更にitem_aというdivタグで包んだ商品写真とテキストのBOXをfloatで左に回りこみ させ横3列に並べています。 1段目だけなら表示に問題ないのですが2段目以降になると1段目の商品BOXの高さによっては横一列に綺麗に並びません。 何か良い解決策は無いでしょうか? item_aにheightを指定すればいいのですが文字数によってはテキストが切れたり、または下に空洞が空きすぎたりするのでheight指定は避けたいです。

    • 締切済み
    • CSS
  • div要素を綺麗に並べたいのですが困っています。

    CSSのレイアウトで困っています。 現在ショッピングサイトを作っているのですがCSSの表示で困っています。 item_boxというdiv要素の中に更にitem_aというdivタグで包んだ商品写真とテキストのBOXをfloatで左に回りこみ させ横3列に並べています。 1段目だけなら表示に問題ないのですが2段目以降になると1段目の商品BOXの高さによっては横一列に綺麗に並びません。 何か良い解決策は無いでしょうか? item_aにheightを指定すればいいのですが文字数によってはテキストが切れたり、または下に空洞が空きすぎたりするのでheight指定は避けたいです。

    • 締切済み
    • CSS
  • p要素を入れたボックスの高さ。

    div要素に下のCSSを適用して、そのなかに<p>で囲ったテキストを入れています。 padding: 0 25px; background: transparent url(../image/web/bm_narrow.gif) repeat-y; p要素には、デフォルトで上下にマージンがついていると思うのですが ボックスの高さがp要素のマージン部分を反映せず、背景画像が p要素のマージン部分には表示されないという状況です。 ボックス部分のpaddingをpadding: 1px 25px;とすると きちんと表示されるようになったので、ほぼ解決しているのですが このような現象は正常なのか、バグなのか、知りたいです。よろしくお願いします。

    • ベストアンサー
    • HTML
  • CGI掲示板の作り方について

    CGIの掲示板の作り方が分かりません。 CGI掲示板は「Kent Web」で、スレッド式掲示板(Web Patio)をDLしました。 それで、patio.zipをDLしたのはいいのですが、作り方が全く分からず、作成が止まっている状態です。 レンタルチャットでは出来ない、アイコン追加や「標準スレッド」「添付あり」の横に表示されているアイコン変更等をしたいです。 他には色変更、背景を変更(画像)等したいです。 あと、どのフォルダをネット上に上げるかも不明です。 何方か教えて頂けませんか? また、そう言った事を分かり易く説明しているサイト等ございましたら、ご紹介下さい。 宜しくお願い致します。

    • ベストアンサー
    • CGI
  • 別ウィンドウへの要素の追加(javascript)

    javascriptで下記の内容で要素を追加した場合、同一ウィンドウに表示した場合に比べて表示速度が非常に遅くなります。速く表示する方法はありませんでしょうか? **************************************************************************************** sample1.html(一部) **************************************************************************************** <script type="text/javascript"> var win1 = window.open("aaaa.html", "", "width=400,height=200"); var ele = win1.document.createElement("div"); // 新規に要素(タグ)を生成 var str = win1.document.createTextNode("あいうえお"); // 生成する要素の値(文字列) ele.appendChild(str); // 生成する要素の作成(要素に値を追加) win1.document.body.insertBefore(ele,null); // ページ (aaaa.html) の最後に生成した要素を追加 </script> ***************************************************************************************** aaaa.htmlの内容 ***************************************************************************************** <html> <head> </head> <body> </body> </html> ***************************************************************************************** sample1.htmlを実行するとaaaa.htmlにあいうえおと表示されます。 別ウィンドウへの要素を追加するタグの数が一つですとよく分かりませんが、追加するタグの数が10個以上にもなると表示に時間がかかります。表示させるするウィンドウが同ウィンドウ(sample1.html)ですと一瞬で表示されます。別ウィンドウへの表示速度を速くする方法はありませんでしょうか? また、別ウィンドウへ表示する場合は、なぜ時間がかかるのかが分かりません。 よろしくお願いします。

  • ブログの月別表示、カテゴリー別表示の不具合

    ライブドアのブログ初心者です。 月別表示、カテゴリー別表示をしようとすると、 記事ごとに表示されるはずの背景のみどり色が 記事ごとに表示されなくなってしまいます。 一番上にくる記事はちゃんと表示されるのですが、 二番目以降は背景の中間が欠けるようです。 「ようです」というのは、背景の欠け方が一定しないからです。 また、カテゴリ別表示をしたとき、記事の頭にカテゴリ名が 表示されますが、背景の緑色がカテゴリ名に若干かぶさってしまうこともあります。 とにかく記事の背景色の表示が安定しません。 カテゴリ別表示させた後、他のウインドウをクリックし、 他のウインドウを前面に出した後 ブログに戻ると、ちゃんと表示されることもあります。 が、マウスで画面をスクロールさせると またきちんと表示されなくなります。 どうもマウスをスクロールすることで、背景の欠け方が変わるようです。 環境は、WinXPでIE6です。 もしかして、自分のPCだけで起きている現象なのでしょうか。 よろしくお願いします。 以下のアドレスに不具合が起きている画像を載せています。 月別(7月)で表示させたときの表示で、緑色が途中で欠けているのがわかると思います。 http://knowledge.livedoor.com/11581

  • iframe内からjQueryで指定したい

    jQueryのparentで親要素のIDを収得したいのですが、iframe内から、 読み込み元のHTMLを.parent()で追っていくと、取得できません。 jQuery("div#main iframe").contents().find('body').click(function(){ var hoge = jQuery(this).parent().parent().attr("id"); alert(hoge); }); .parent()では読み込み元のHTMLをまでいけないようなんですが、jQueryでは取得できないのでしょうか。 他にiframeから親を取得する記述があるのでしょうか。 アドバイスいただけると助かります。 拙い説明で恐縮ですが、どうぞよろしくお願いします。 こちら↓の板が閉鎖されるのを知らずにポストしていまい、 http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi 解決の見込みがなさそうですで、改めてこちらでお尋ねしています。 ややマルチ気味で恐縮ですが、ご容赦ください。

このQ&Aのポイント
  • MFC-J6770CDWを使用していますが、パソコンからの印刷もコピーも白紙で出てきます。
  • テストプリントでは印刷品質も問題なく、カラーで出てきます。
  • なにが原因なんでしょうか・・
回答を見る