ベストアンサー DIVを選択すると一部のDIVを僅かに大きくする? 2012/11/28 19:11 画像のようにDIVで要素を構成しているとします。 DIV(B)の中にあるDIV(C)~(G)の要素に触れた場合、DIV(A)が僅かに大きくなるようにしたいのですが、jQueryとかでどのようなメソッドを使ったりすればいいでしょうか? 画像を拡大する みんなの回答 (2) 専門家の回答 質問者が選んだベストアンサー ベストアンサー fujillin ベストアンサー率61% (1594/2576) 2012/11/28 20:11 回答No.1 要素のサイズを変更するだけなら、CSSの値を変えればすむでしょう。 element.css("width", ○○); とか ある要素のサイズを変更すると、もともとの配置(styleシート)の指定によっては全体のレイアウトが変わってしまう可能性がありますので、変更した際の状態も考慮したCSSを作成しておく必要がありそうです。 例えばabsoluteで配置しておくとか、サイズを大きくしたら同時に隙間(余白)部分を縮めるなど。 広告を見て全文表示する ログインすると、全ての回答が全文表示されます。 通報する ありがとう 0 その他の回答 (1) b0a0a ベストアンサー率49% (156/313) 2012/11/28 22:57 回答No.2 ボーダーのスタイルを変えればいいと思います 広告を見て全文表示する ログインすると、全ての回答が全文表示されます。 通報する ありがとう 0 カテゴリ [技術者向] コンピュータープログラミング・開発JavaScript 関連するQ&A divの中にspanを右寄せにするには? 画像のような要素構成をしたいと思うのですがうまくできません・・・ 詳しい方教えていただけませんでしょうか? divの中にspanを何個か右寄せで配置したいと考えています。 最近のマイクロソフトのサイトのようにボタンをspanで作りたいと思っています。 divで右寄せをしようとするとdivの中にa hrefを含めることは出来ないといったエラーが出てしまい困っております・・・ floatで並べた2つのdivの高さを揃えるには? コーディング初心者です。 以下の内容のcssがかけなくて困っています。 内容は <p id="a">A</p> <div id="b">B</div> <p id="c">C</p> 今はこの3つをfloatで横並びにします。 #a {float: left;} #b {float: right;} #c {float: right;} ここで、BとCに入る内容が変わる場合でも2つの高さが揃うようにしたいのですが、 MTを使用し、Bを表示させないこともあるので、 BとCを<div>で囲み幅を指定することができません。 何か方法はありますでしょうか? 参考のURL等を教えていただけるだけでもたすかります。 よろしくお願いします。 div要素の入れ替え。半透明イメージ作成 javascriptでdiv要素の入れ替えを行いたいのですが、ドラッグした際にドラッグしたdiv要素を半透明にし、かつ元のdiv要素は入れ替えが行われるタイミング移動させないようにしたいです。 イメージとしては、ブラウザに表示されている画像をドラッグした時に出てくる半透明のイメージが出てくるのと同じ感じです。 どのような形で作れるのでしょうか?JQueryかライブラリなしで作りたいのですが、アドバイスよろしくお願いします。 ネットワークエンジニアとは?技術職の未来を考える OKWAVE コラム DIVの崩れを防ぐには 図のように<div>で段組を作った場合、このままだとウィンドウの幅を狭めた時に、 CのブロックがBの下に回りこんでしまうと思うのですが、 これを防ぎたい場合はやはりA・B・CもしくはB・Cをさらにブロックで囲うしか 方法はないでしょうか? xhtml+cssでdivをdivで内包する xhtml+cssでウェブサイトを作成しています。 その際、 <div id="a"> <p>題名</p> <div class="b">内容</div> <div class="b">内容</div> </div> のようにdiv要素内にdiv要素を内包したいと思っています。 しかしこのままだと親であるdiv id="a"を、子であるdiv class="b"がはみ出してしまいます。 cssハックを使用する方法が http://www.alink.co.jp/tech/blog/2009/04/13/css-clearfix%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fdiv%E3%81%AE%E6%AE%B5%E7%B5%84%E3%81%BF%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF/ に掲載されていましたが、IE7とIE-MACが対象のようです。 これと同じような効果が得られるもので、IE6以降、Firefox2以降、Fodoraそれぞれに対応している方法はありますでしょうか? 私がどうしたいのか少しわかりにくいかもしれませんが、上記URLでどうしたいのかはわかると思います。 アドバイスお願い致します。 HTMLのdivについて HTMLで質問です。 DIVについて質問です 下の図で <body> <div="c"> <div id="a"> --------------- </div> <div id="b> ああああああああ いいいいいいい </div> </div> </body> という場合 <div=”c”> は全体のbody範囲でありますが divそのものを idで指定しなくても divだけでも全体を範囲しいた事にはならないのでしょうか? ホームページ全体が範囲であり セレクタ範囲を後にCSSで装飾する場合 やはりIDで指定するのでしょうか? DIVでの段組でhight属性の設定方法 DIVでの段組でhight属性の設定方法 添付画像のような段組を外部CSSをつかってしています。 ●BとCにhightを設定しなかった場合 Cに色々コンテンツを入れていき、BよりCの縦の長さが長くなった場合、 BとDの間に隙間ができてしまいます。 ●BとCにhight[100%]を設定した場合 この場合もCの長さがBより長くなった時点で、BとDの間に隙間が発生します。 ●BにCよりも明らかに長い数値を入れた場合 Bのhightを[1000px]とかにしてCよりBを長くした場合、 BとDの間はきっちりとつながります。 ★質問 Cの縦の長さに関係なく、Bの縦の長さを連動させてBとDの間をあけないようにするにはどのようにしたら良いでしょうか? ちなみに、BとCはEの中に入れています。 ------------------------- <div class="E"> <div class="B"></div> <div class="C"></div> </div> ------------------------- よろしくお願い致します。 divを追加すると下に隠れてしまう <div id="a"> <div id="c">もともとある枠</div> <div id="d">タグ</div> </div> <div id="b"> 公開 </div> 上記のような縦に並んだdiv要素があり id="d"のdivはjavascriptであとから追加されるページがあるのですが dが追加されるとbの下に隠れてしまいます。 z-indexが指定されているわけでもなく、 bにclear:both;を指定してみても隠れてしまいます。 どなたか解決の方法ご存知の方いらっしゃいませんでしょうか。 些細なことでもお心当たりがあれば教えていただきたいです。 ちなみに環境はiphone4 ios6.2 safariです。 よろしくお願いいたします。 floatさせたdivタグを折り返させたくない Javascriptで開いた子ウィンドウ内のページについて レイアウトで困っております。 以下のようなブロック要素の配置について <div> <div style="float; left"> コンテンツA </div> <div style="float; left"> <div> コンテンツB </div> <div> コンテンツC </div> </div> <div style="clear: both"> </div> 以上のような配置になっており、 コンテンツ3の中身をJavascriptで書き換えています。 その際、コンテンツCの横幅が変動し右に大きく広がる場合があります。 それにより、ウィンドウサイズによってはコンテンツBCがコンテンツAに回りこんでしまいます。 何故こうなるかは理解出来るのですが、対策が思い浮かびません。 ●思いついたが避けたい対応策 ・親のdivタグに想定出来る最大値のwidthを設定する ・tableタグによるレイアウト 良い対応策はございませんでしょうか? よろしくお願いします。 float divの関係 ブロックdiv(Pとします)の中に、2つのブロックdivがあります。それぞれA、Bとします。 floatでA、Bを左寄せに並べた場合、Pに適用したスタイルシートがA、Bに反映されません。(文字サイズなど) 何が問題でしょうか? よろしくお願いします。 <div id="P-style"> <div id="A-style">aa</div> <div id="B-style">bb</div> </div> pとdivのどちらが良いでしょうか? pタグとspanタグとdivタグの使い分けがよくわからないので http://techmemo.biz/html/p%E8%A6%81%E7%B4%A0%E3%80%81div%E8%A6%81%E7%B4%A0%E3%80%81span %E8%A6%81%E7%B4%A0%E3%81%AE%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AE%E9%81%95%E3%81%84/ を読んだのですが、それでもよくわかりません。 私がやりたい事はindexページにタイトルを表示したいのですが 文字の装飾はしたいです。 でも文字全部に色を付けてサイズを調整したいだけなので spanタグで文字の中の一部の装飾ではないです。 この場合 pとdivのどちらが良いでしょうか? ページの上部に ~サイトの名前~ みたいにしたいです。 ネストされたdiv要素の中のa要素をクリック ネストされたdiv要素の中にa要素があるのですが、クリック出来ませんでした何かいい方法はありませんか? <div id="j,click"> <div> <section id="sample03"> <a class="button99 picture1 radius box_shadow" href="#" onclick="disp(99);return false;">戻る<a> </section> <div class="button99 lineargrad1"></div> <div class="box-area1-128 picture1-area1"></div> <div class="button99 linargrad2"></div> <div class="button99 shadow"></div> <div> <div> このように作成しました。 jQuery.biggerlinkではクリック出来るようになりましたが、javascriptの関数は呼び出すことは出来ませんでした。 AIは使う人の年齢や市場にも影響する?人工知能の可能性 OKWAVE コラム div の改行に関して div の使い方に関して教えてください。 添付した画像1のHTMLの場合、改行されて■の次の段に「Grade」が来てしまいます。 しかし、画像2のHTMLの場合、なぜか「Grade」の次の段落に■がきてしまいます。 改行なしで■の右隣にGradeが来るようにするにはどうすればいいでしょうか? 添付画像の中の画像1のHTML ■<div style="font-family: Arial,sans-serif,Verdana; font-size: 20px;"><b><STRONG>Grade:</STRONG></b> <br> Near Mint: </div> <br> 添付画像の中の画像2のHTML ■<div style="font-family: Arial,sans-serif,Verdana; font-size: 20px; display: inline-block; _display: inline;"><b><STRONG>Grade:</STRONG></b> <br> Near Mint: </div> <br> CSSでdivの縦幅を指定する方法 CSSで、div領域の縦幅を指定する方法を教えてください。 下記のような感じのHTMLで、Aが外枠、中のBとCがfloatを使って横並びになっています。 B、C共に、縦のサイズをAの縦幅いっぱいまで(内容の高さに拘わらず常に)広げる方法がわかりません。 (ブログのテンプレート用なので、内容は一定ではありません) height:100%としてみましたが無理でした。 <div id="A"> <div id="B"> メニュー </div> <div id="C"> 本文 </div> </div> よろしくお願いいたします。 CSSでDIVを複数囲むには CSSでレイアウトをしているのですが、<div>で囲んだ画像Aと画像Bがあります。この2つの<div>を更にもう1つの<div>(以下、大DIV)で囲んでまとめたいのですが、うまくできません。その2枚の画像はそれぞれfloatでleftとrightに寄せているのですが、floatを適用させると大DIVの外に出てしまいます。 2つの画像を左右に寄せることは必須です。その後で、大DIVでまとめておけばあとでレイアウトの変更があったときに作業がスムーズに進むと思ったのですが。 これはどのようにすればよいのでしょうか? DIVブロックを画面をはみ出して配置するには ┌───┐ │A │ ├─┬─┤ │B│C│ └─┴─┘ 上のようなレイアウトです。 A、B、Cとも<DIV>です。 B、C を float=left にしているのですが、 Cの中身が大きくなるとCがBの下に来てしまいます。 ひとまず、table で横並べにしているのですが、 div と css で、Cが下に行かないようにする方法はありますでしょうか。 htmlでdivをなるべく使わないで 書く方法ってありますかね?もちろんゼロとはいいませんが、使うとしても4~5コ程度に抑えたいのです。どうも</div>って書きまくって、見てみたら不備があり無用なdivを見つけるのに苦労しました。別な人からもなるべく多くは使わない方がいいと言われまして、しかし、画像とかを挿入する際に h1,h2,h3,h4・・・・とやるのは上手くないとお聞きしましたので、どうすればよいかなと思いまして回答お願いします。それとセクション要素もたくさん使うのですが、これら一覧が載っているサイトあればお願いします。 CSSでdivのheightを動的に DIV要素を作り、その中にテキストを配置しています。これの高さ(height)をCSSで次のようにしたいのですが。どのようにすれば良いでしょうか。 1.文章量が多く、画面外まではみ出したらDIV要素の高さをそれに追従させる。 2.文章が画面内に収まる場合、余ったスペースをDIV要素ですべて埋める。 DIV要素のheightを動的に変化させたいのでpxによる絶対値指定はしません。パーセント指定で100%にしてもうまくいかず、調べてみたところこれは親要素の値に依存するとのことでした。そこで html, body { height: auto; } #main { height: auto; } としてみたところ、1.の「はみ出した場合のサイズ追従」は実現できましたが、2.の「余ったスペースを埋める」ことはできませんでした。逆に html, body { height: 100%; } #main { height: 100%; } にすると2.の「余ったスペースを埋める」ことはできますが1.の「はみ出した場合のサイズ追従」はできません。この両方を実現することってできませんか? HTML,CSSのみでDIVブロック IEで図のようなDIVブロックを表示させたいと考えています DIVでなく他のHTML要素でもいいです jQueryなどライブラリを使わないで HTMLとCSSのみで図のような表示のサンプルプログラムが見れる サイトを教えてください また、グーグルなどで、これらを検索する際 適当なワードを教えてください よろしく、お願いします jQuery 最初のDIVの前へ、最後のDIVを jQUeryで、 指定した要素の中にある複数のDIVの内、最初のDIVの前に 指定した要素の中の最後のDIVを複写して作成。 そして、 指定した要素の中の最後のDIVを削除する 方法について教えていただけないでしょうか。 <div id="waku"></div> Menu=[{'Cmnt1':'aaaaaaa'},{'Cmnt1':'bbbbbbbbbb'},{'Cmnt1':'ccccccccccc'},{'Cmnt1':'ddddddddd'}]; for(var i=0;i<Menu.length;i++){ $(#waku).append(<div id="eachDiv"'+i+'">'+文字列+'</div>'); $('#eachDiv'+i).append('<br>'+i+' : '+Menu[i].Cmnt1); } として、以下のようなイメージのdivの構造を作成します。 <div id="waku"> <div id="eachDiv0">文字列 <div>0:aaaaaa</div> </div> <div id="eachDiv1">文字列 <div>1:bbbbbbbb</div> </div> <div id="eachDiv2">文字列 <div>2:ccccccc</div> </div> <div id="eachDiv3">文字列 <div>3:ddddddd</div> </div> </div> 上記のような構造を 以下のような構造にしたいのです。 <div id="waku"> <div id="eachDiv3">文字列 <div>3:ddddddd</div> </div> <div id="eachDiv0">文字列 <div>0:aaaaaa</div> </div> <div id="eachDiv1">文字列 <div>1:bbbbbbbb</div> </div> <div id="eachDiv2">文字列 <div>2:ccccccc</div> </div> </div> 次のようにしてみましたが、#eachDiv3の中の要素のみ複写されてしまいます。 つまり、以下のようになってしまいます。 <div id="waku"> <div>3:ddddddd</div> //eachDiv3の中身 <div id="eachDiv0">文字列 <div>0:aaaaaa</div> </div> <div id="eachDiv1">文字列 <div>1:bbbbbbbb</div> </div> <div id="eachDiv2">文字列 <div>2:ccccccc</div> </div> <div id="eachDiv3">文字列 </div> </div> //コード var elem=$('#waku div:last'); $('#waku div:first').before(elem.clone(true)); elem.remove(); #eachDiv3自体を先頭へ複写して、最後の#eachDiv3を削除するにはどのようにしたら良いのでしょうか。 よろしくお願いいたします。 注目のQ&A 「You」や「I」が入った曲といえば? Part2 結婚について考えていない大学生の彼氏について 関東の方に聞きたいです 大阪万博について 駅の清涼飲料水自販機 不倫の慰謝料の請求について 新型コロナウイルスがもたらした功績について教えて 旧姓を使う理由。 回復メディアの保存方法 好きな人を諦める方法 小諸市(長野県)在住でスキーやスノボをする方の用具 カテゴリ [技術者向] コンピューター プログラミング・開発 Microsoft ASPC・C++・C#CGIJavaJavaScriptPerlPHPVisual BasicHTMLXMLCSSFlashAJAXRubySwiftPythonパフォーマンス・チューニングオープンソース開発SEOスマートフォンアプリ開発その他(プログラミング・開発) カテゴリ一覧を見る OKWAVE コラム 突然のトラブル?プリンター・メール・LINE編 携帯料金を賢く見直す!格安SIMと端末選びのポイントは? 友達って必要?友情って何だろう 大震災時の現実とは?私たちができる備え 「結婚相談所は恥ずかしい」は時代遅れ!負け組の誤解と出会いの掴み方 あなたにピッタリな商品が見つかる! OKWAVE セレクト コスメ化粧品 化粧水・クレンジングなど 健康食品・サプリ コンブチャなど バス用品 入浴剤・アミノ酸シャンプーなど スマホアプリ マッチングアプリなど ヘアケア 白髪染めヘアカラーなど インターネット回線 プロバイダ、光回線など