- ベストアンサー
div要素について。
div要素について。 <div id="style"> <?php if(function_exists('○○○')) { ○○○(); } ?> </div> <?php ?>の部分に任意の文字が呼び出されるのですが、 その文字量にしたがってdiv#styleの横幅を可変させたいのですが可能でしょうか？ 文字が５文字の場合は５文字幅。 １０文字の場合は１０文字幅といったように可変させたいです。 何らかの方法がありましたらご教授いただきたいです。 よろしくお願いします。
- HTML
- 回答数3
- ありがとう数21
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- magicalpass
- ベストアンサー率58% (378/648)
それはどこでstyleの定義をしてあるかに依るでしょう。 同じソースの中にあるのなら、その定義部分を同じようにPHPで文字数に応じて横幅を変える処理を記述すれば良いだけです。 外部から共通定義を読み込んでいるのなら難しいでしょうが。
お礼
無事解決致しました。 回答ありがとうございました。
こんばんは。 10文字の幅を指定する場合、width:10em とすればいいかと思います。これをタグの中にStyleを使って直接指定するように書きます。次のようになります。 <div id="style" style="width:10em"> これ自体をPHPで10の部分を変数にして出力するようにすればできると思います。
お礼
無事解決致しました。 回答ありがとうございました。
関連するQ&A
- div要素を滑らかに動かしたい
<div id="div1" class="div1" onclick="init();">move box</div> 上記のようなdiv要素を、画面右方向へ滑らかに 動かしたいのですが、どのようなscriptを記述すればよいでしょうか？ setIntervalを使って0.5秒毎に1ピクセル右に移動、 というのを期待して以下のようなscriptを書いてみたのですが、 うまく動作しませんでした。 function init(){ setInterval(moveY, 500); } function moveY(){ var obj = document.getElementById("div1"); obj.style.left = obj.style.left+1 + "px"; }
- ベストアンサー
- JavaScript
- クリックで特定のdiv要素が表示されるJavascriptに追加機能を
クリックで特定のdiv要素が表示されるJavascriptに追加機能を持たせたい よろしくお願い致します。 下記のようなコードで、HTML部分の「リンクテキスト」をクリックすると「クリックで開く内容」が表示され、かつ、リンクテキスト（id="link-1"）の文字色が変わるJavascriptを使用しています。 ■Javascript部分 function showHide(targetID) { if( document.getElementById(targetID)) { if( document.getElementById(targetID).style.display == "none") { document.getElementById(targetID).style.display = "block"; document.getElementById('link-1').style.color = "#cc0000"; } else { document.getElementById(targetID).style.display = "none"; document.getElementById('link-1').style.color = "#000000"; } } } ■HTML部分 <a href="#" id="link-1" onClick="showHide('hoge1');return false;">リンクテキスト</a> <div id="hoge1" style="display:none;">クリックで開く内容</div> リンクテキストの文字色が変わる部分は見よう見まねで追加したのですが、文字色が変わる部分を、link-2、link-3・・というように同ページに複数配置したい場合、どのようなコードに変更すればよいのでしょうか。 できればid="link-1"などという記述はせずに、showHide('hoge1');をshowHide('hoge2');に変えて、<div id="hoge1" style="display:none;">を<div id="hogge2" style="display:none;">に変えるだけで、文字色も変わるようにできれば一番良いのですが、そのような方法はあるのでしょうか？ 分かりにくい箇所は補足説明致しますので、どうぞご教授下さいますようお願い致します。
- ベストアンサー
- JavaScript
- div要素をランダムに表示させたい
お世話になります。Javascriptについて質問させていただきます。 拙い説明で分かりにくいかと思いますが、ご教授いただけたらと思います。 javascriptとcssを使用して、ページをリロードする度に、divの要素をランダムに表示させるようにしたいと考えています。 ランダムで表示させるにはfunction test(no)関数のどこかにランダムで値を取得できるようにする必要があると思っているのですが、上手く設定ができずに悩んでいます。 ご回答頂けたら幸いです。 ■ html <body onLoad="test(no)"> <div id="link"> <div class="link01"> <p>文章1</p> </div> <div class="link02"> <p>文章2</p> </div> <div class="link03"> <p>文章3</p> </div> </div> <ul> <li><a href="#" onclick="showChanger(1);">リンク1</a></li> <li><a href="#" onclick="showChanger(2);">リンク2</a></li> <li><a href="#" onclick="showChanger(3);">リンク3</a></li> </ul> ■javascript function test(no){ var parenObj=document.getElementById("link"); for(var i in parenObj.childNodes){ var childObj=parenObj.childNodes[i]; if(childObj.tagName=="DIV"){ if(no == 1){ if(childObj.className=="link01"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 2){ if(childObj.className=="link02"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 3){ if(childObj.className=="link03"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } } } } ■css .link01 { display:block; margin-bottom:10px; } .link02 { display:none; margin-bottom:10px; } .link03 { display:none; margin-bottom:10px; }
- ベストアンサー
- JavaScript
- DIVの幅を常に100％にしたい
以下の構成でページを作っています。 <body> <div id="div1"> </div> <div id="div2"> <table id="table1">...</table> </div> </body> 「div1」には背景色を設定し、横幅100％で表示しています。 「div2」内のテーブル「table1」の内容はPHPで出力しているのですが、 iPhoneで表示したときに、テーブルの幅が大きくなる(画面の幅を超える)と、 「div1」の幅が元々の画面サイズまでしか描画されません。 テーブルの幅が大きくなった時に、「div1」も一緒に大きくなるようにするにはどうすればいいでしょうか。 外枠用のテーブルを使えばできるのでしょうが、できれば構成を変えずにやりたいです。
- ベストアンサー
- HTML
- firefoxでdivタグ要素が突き抜ける
お世話になります。 firefoxですとdivタグで指定した高さ・幅を要素が超えると 突き抜けて表示されます。IEだと、指定した幅・高さが大きくなってくれる。 以下のソースで子の要素が親のボックス、子のボックスを突き抜けなくできないでしょうか？ もしかしたら簡単なことなのかもしれませんが、 ご教授よろしくお願いいたします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #oya { border-right:orange 1px solid; border-top:orange 1px solid; border-left:orange 1px solid; border-bottom:orange 1px solid; } #ko { border-right:green 1px solid; border-top:green 1px solid; border-left:green 1px solid; border-bottom:green 1px solid; } </style> </head> <body> <div id="oya" style="width:200px;height:200px;"> <div id="ko" style="width:100px;height:100px;">ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ</div> </div> </body> </html>
- ベストアンサー
- HTML
- cssでのdiv要素内div要素の上部marginについて
毎回コーディング中に起きる問題で、 独学でcssを学んだために一番スマートなやり方がわからずその場しのぎで対応していたのですが、 毎回モヤモヤしてしまっていたので綺麗なやり方を知りたく思い質問させて頂きました。 まずはこの画像を見て下さい。 http://pajt.paq.jp/t/a/p/test.html 赤のボックスを緑のボックス内で上部からmarginをとりたいのですが、 緑の要素ごと黄色の要素からmarginとってしまいます。 横はきれいにmarginをとれるのに上のmarginがうまくいきません。 簡易的に書くとこのようなものです。 ↓ http://pajt.paq.jp/t/a/p/test2.html <html> <head> <title>画像</title> <style type="text/css"> <!-- #yellow { width:300px; height: 10px; background: #00FFFF} #green { width:200px; height: 400px; background: #00FF00} #green #red { width: 50px; height: 50px; margin: 50px; background: #FF0000} --> </style> </head> <body> <div id="yellow"></div> <div id="green"> <div id="red"> </div> </div> </body> </html> こういったコーディングをする際に、なるべくスマートな記述の方法を教えて頂きたいです。 宜しくお願いします。
- 締切済み
- HTML
- divの横幅 自動調整
PHP + MySQL +html + CSS で動的テーブルを表示するサイトを制作しています。 <div id="○○○"> <table></table> </div> といったように、中のテーブルをdivで囲ってコーディングしています。 外側をdivで囲い横幅を指定してあげて、テーブルに横スクロールバーを表示させているのですが、divで指定した横幅よりもテーブルの横幅が短くなった場合、外のdivの幅がテーブルに合わせて短くならないのですが、このような場合、何か対処法はございますでしょうか。 superTable.jsを使用しており、このjsの使用がテーブルの外側にdivをおき、cssを使ってdiv側にスクロールバーを表示される仕様になっております。 以上、よろしくお願い致します。
- ベストアンサー
- CSS
- div要素を半透明にして且つ外枠をつけたい
div要素を半透明にして且つ外枠をつけたいです。 下記のように書いたのですが、borderも一緒に半透明になってしまいます。添付画像の様にするにはどうしたらよいでしょうか？ 教えてください。 <html> <head> <style> div{ background: green; opacity:0.2; filter: alpha(opacity=20); border: 1px solid green; } #hoge{ position: absolute; top: 0; left: 50; width :50; height :50; } </style> </head> <body> あいうえお <div id='hoge' ></div> </body>
- ベストアンサー
- HTML
- 【jQuery】要素を合わせた横幅の取得について
現在、要素が横並びになった横スクロールのサイトを作成中です。 各コンテンツ要素のsectionの横幅は固定ではなく、 縦幅に合わせて可変するようにしています。 htmlは以下のようにしています。 <div id="wrap"> <div id="header"> <ul><li></li></ul> </div> <div id="secWrap"> <div class="section"> ここに内容 </div> <div class="section"> ここに内容 </div> </div> </div> wrapにsectionの幅を足した合計の横幅（px）を加えたいのですが、 正しいサイズを取得できず、sectionがカラム落ちしてしまいます。 以下のjsの何かが間違っているのでしょうか？ それともCSSなどで何かしらの指定が必要なのでしょうか。 お分かりの方がおられましたらご教授頂けたら幸いです。 ■javascript $(function(){ function adjust(){ var h = $(window).height(); var h1= $('#header').height(); $('.section').css('height', h-h1); var cont = $('.wrap');//コンテンツの横サイズ var contW = $('.section').outerWidth(true) * $('div',cont ).length; cont.css('width', contW); var speed = 50; $('html').mousewheel(function(event, mov) { $(this).scrollLeft($(this).scrollLeft() - mov * speed); $('body').scrollLeft($('body').scrollLeft() - mov * speed); return false; }); } adjust(); $(window).on('resize', function(){ adjust(); }) }); ■CSS body { height: 100%; overflow-y: hidden;} html{height: 100%; } #header{ position: fixed; height: 50px; left: 0px; top: 0px;} .wrap{ top: 50px; position:absolute; height:100%; } .section { float:left; }
- ベストアンサー
- JavaScript
- <div style="***"> が <div style=\"***\">になってしまう
お世話になります。 <form method="POST" action="wp.php" id="InputFrm"> <textarea> $Contents </textarea> というようにして、 でhtml文書を作成し、$Contentsへその文字列を格納しPOSTで書き込み読み込みおよび表示用のwp.phpへ送っています。 wp.phpでは、テキストファイルへ$Contentsの内容を書き込んでいます。 すると、 <div style="***"> が <div style=\"***\">のようになってしまいます。 つまり、「"」が「\"」と変わってしまいます。 $ContentsDsp=str_replace("\\\"","\"", $Contents); で、対応はしていますが、「"」が「\"」となるのは何故でしょうか。 基本的なところがわかっていないようで、基本がよくわかっていないだけに調べても解決できません。 おわかりになる方見えましたら教えていただけないでしょうか。
- ベストアンサー
- PHP
お礼
無事解決致しました。 回答ありがとうございました。