- ベストアンサー
【Javaxcript CSS】擬似フレームサイズをマウスで変更したい
- 擬似フレームのサイズをマウスで変更したいです。
- CSSで指定したwidthをマウスで変更する方法を教えていただけますか？
- マウスが時々くっついてしまう問題があります。解決策はありますか？
- 小林 K太郎（@kingfruits）
- お礼率66% (211/319)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- 【CSS javascript】ブラウザ依存 各ボックスwidthの合計値をoffsetWidthに収めたときの表示
ボックス１、ボックス２、ボックス３と３つのボックスをfloat: left;で左から横に並べて、キッチリブラウザの幅に収めたいです。 ボックス１は、width: 20%;を指定。 ボックス２は、width: 5px;を指定。 ボックス３は、ブラウザ幅に３つが収まる値をjavascriptで計算して指定したいです。 そこで、各ボックスwidthの合計値をoffsetWidth以下なら、各ボックスは折り返さずに表示されると考え、以下htmlを作成しました。 ※行頭スペースは全角です。 <html> <head> <style type="text/css"> #b1 { background-color: ffffff; float: left; height: 100%; width: 20%; overflow: auto; } #b2 { background-color: 000000; float: left; height: 100%; width: 5px; } #b3 { background-color: ffffff; float: left; height: 100%; overflow: auto; } </style> <script> i = function(id){ return document.getElementById(id) }; function init(){ var W = document.body.offsetWidth || document.documentElement.offsetWidth; var b1 = i('b1').offsetWidth; var b2 = i('b2').offsetWidth; var b3= W - b1 - b2; alert(W +' = ' + b1 + ' + ' + b2 + ' + ' + b3); i('b3').style.width = b3 + 'px'; }; </script> </head> <body onLoad = "init();" > <div id="b1">f1</div> <div id="b2" > </div> <div id="b3">f2</div> </body> </html> 上記を実行した結果、IE,Operaは折り返してしまい、FirFox,Google Chromeは折り返さずに表示できました。 IE,Operaは、なぜ折り返してしまうのでしょうか？
- ベストアンサー
- JavaScript
- CSSで指定したwidthをマウスで変更したい
frameはnoresizeを指定しなければ、マウスドラックでサイズの変更ができますが、同じような事をframeを使わずにCSSとjavascriptで出来ないものでしょうか？ 具体的に言うと、以下に示すhtmlの20%,80%のwidthをマウスドラックで変更できないでしょうか？ <html> <head> <style type="text/css"> #f1 { float:left; width:20%; overflow: auto; background-color : #ffd2ff; } #f2 { float:right; width:80%; background-color : #e0fef8; } </style> </head> <body> <div id="f1">f1</div> <div id="f2">f2</div> </body> </html>
- ベストアンサー
- JavaScript
- cssで擬似フレームについて
はじめて質問させていただく、CSS初心者のものです。 下記のdivタグを画面中央寄せにする方法はあるのでしょうか？ HTMLとCSSは下記のように書いています。 HTML <body> <div id="header"> （width="800" height="180" のflashファイルを入れています） </div> <div id="main"> （ width="700"のコンテンツを作りスクロールさせていま） </div> <div id="footer">テキストを一行入れています</div> </body> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ｃｓｓ html{ height:100%; overflow:hidden; } body{ height:100%; width:100%; margin:0px auto; background-color: #000000; } #header{ position: absolute; height: 180px; width: 800px; overflow: hidden; top: 0px; } #main{ overflow: auto; position: absolute; width: 800px; top: 180px; bottom: 20px; background-color: #FFFFFF; } #footer{ position: absolute; width: 800px; bottom: 0px; font-family: "Courier New", Courier, mono; font-size: medium; font-style: italic; color: #00FF33; height: 20px; background-color: #000000; overflow: hidden; } このような感じなのですがなにかいい方法があればご教授お願いいたします。
- ベストアンサー
- HTML
- CSSでメニューバー
初心者の質問ですいません。 CSSでこのようにボックス分けして * { margin : 0 ; padding : 0 ; } body { width : 100% ; } #my_body{margin:0 auto; width:875px;} #my_header { width : 100% ; height : 80px ; } #my_header2{ width : 100% ; background-color: #0080ff;} #my_navigation{float:left; width:150px; background-color: #0080ff; min-height: 1000px;} #my_contents{float:left; width:725px; background-color: #e5f6ff; min-height: 1000px;} #my_footer { width : 100% ; clear : both ; background-color: #0080ff; } HTMLのコード <div id="my_body"> <div id="my_header">一番上のタイトルとグラデーション</div> <div id="my_header2"> グラデーション <style type="text/css"> body { background-image: url("縦長の写真"); background-repeat: repeat-x; } </style> メニューバー <form> <input type="button" value="" class="li01" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li02" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li03" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li04" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li05" onClick="URL'" /> </form> </div> 左のメニューバー <div id="my_navigation"> <div id="mynavi"> </div> </div> 本文 <div id="my_contents"> <div id="mymain"> </div> </div> フッダー <div id="my_footer"></div> </div> これで、my_header2で指定したグラデーションがメニューバーの両側に表示されると思うのですが、グラデーションが表示されません。 初心者なので根本的な間違えを起こしていたらすみません。 なぜ表示されないか教えていただけませんか。 長文失礼しました。
- 締切済み
- HTML
- 擬似フレームを中央に表示したい。
ただいまＨＰ作成に奮闘中の者です。 いつもはネットでちくちくと検索をしながらhtml等について学びながら作成しているのですが、今回検索エンジンでも上手くヒットしなく、しばらく行き詰まってしまったので質問させてください。 現在擬似フレームを使ってHPのTOP画面が6割ほどできたのですが全てが左に寄っています。 それを中央に表示させたいのですが、どうすればよいのでしょうか？ ■■■□□ ■■■□□ これを↓ ■■■□□ ■■■□□ □■■■□ □■■■□ この様にしたい □■■■□ □■■■□ 以下タグです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>タイトル</title> <!-- ------ FLASH ACTIVATION SCRIPT--------> <script src="flash_activate.js" type="text/javascript"></script> <!-- ------ FLASH ACTIVATION SCRIPT--------> <script src="flash_activate.js" type="text/javascript"></script> <style type="text/css"> <!-- body { margin:0px; padding:0px; } #top { width:450px; height:120px; float:left; background-color:#3399ff; } #tops { width:300px; height:120px; float:left; background-color:#ffcc33; } #topss { width:750px; height:280px; crear:both; background-color:pink; } #left { width:250px; height:100px; float:left; background-color:white; } #menu1 { width:250px; height:100px; clear: both; } #menu2 { width:250px; height:100px; clear: both; } #menu3 { width:250px; height:100px; clear: both; } #menu4 { width:250px; height:100px; clear: both; } #menu5 { width:250px; height:100px; clear: both; } #menu6 { width:250px; height:100px; clear: both; } #middle { width:300px; height:600px; float:left; background-color:white; } #right { width:200px; height:600px; float:left; } #under { width:750px; height:10px; clear: both; background-color:#cc66cc; } --> </style> </head> <body> <div id="top">ここにHPロゴ</div> <div id="tops">ここに説明やテーブル</div> <br style="clear:both" /> <div id="topss"></div> <div id="left"> <div id="menu1"><A Href="http://www.yahoo.co.jp/"><Img Src="about_us.png"></A></div> <div id="menu2"><A Href="URL"><Img Src="member.png"></A></div> <div id="menu3"><A Href="URL"><Img Src="movie.png"></A></div> <div id="menu4"><A Href="URL"><Img Src="blog.png"></A></div> <div id="menu5"><A Href="URL"><Img Src="link.png"></A></div> <div id="menu6"><A Href="URL"><Img Src=""></A></div> </div> <div id="middle">更新履歴など</div> <div id="right"> </div> <div id="under"></div> </body> </html> ご回答頂けたら幸いです。 よろしくお願いしますm(_ _)m
- ベストアンサー
- HTML
- CSSでの質問です
初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか？ ソースは以下のとおりです。 <style type="text/css"> <!-- #wrapper { width: 760px; margin: 0px auto; } #header { background-color: #9933FF; height: 50px; top: 0px; } #primary { background-color: #c7d5ed; float: right; width: 550px; margin-top: 10px; margin-bottom: 10px; } #secondary { background-color: #f9cfba; float: left; width: 200px; margin-top: 10px; margin-bottom: 10px; } #footer { clear: both; background-color: #99FFFF; height: 50px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="primary"> </div> <div id="secondary"> </div> <div id="footer"></div> </div> </body> </html> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか？
- 締切済み
- HTML
- Divの幅指定を無視して子テーブルの幅に合わせて全体が伸びてしまいます
はじめて投稿します。 下のHTMLを表示したとき、menuの部分が狭くなった上に画面自体のスクロールバーが出て横に広がってしまいます。 赤色のテーブルをウィンドウいっぱいに広げた状態で、オレンジ色のテーブルを囲むDIVタグを赤色のテーブルの80%にしたいのです。 オレンジ色テーブルのwidthの80%になっているとか？ でも、オレンジ色のテーブルのwidthがウィンドウに収まるような値なら、意図する表示になるのですが・・・。 どう直したらいいのでしょうか。 <html> <script> function hoge(){ document.getElementById("s1").innerText = "t1=" + document.getElementById("t1").offsetWidth + "*" + document.getElementById("t1").offsetHeight + ",d1=" + document.getElementById("d1").offsetWidth + "*" + document.getElementById("d1").offsetHeight + ",t2=" + document.getElementById("t2").offsetWidth + "*" + document.getElementById("t2").offsetHeight + ",d2=" + document.getElementById("d2").offsetWidth + "*" + document.getElementById("d2").offsetHeight + ",t3=" + document.getElementById("t3").offsetWidth + "*" + document.getElementById("t3").offsetHeight; } </script> <body onload="hoge()"> <span id="s1"></span> <table width="100%" height="95%" border="1" style="background-color:red;" id="t1"> <tr> <td valign="top" width="200px">menu</td> <td valign="top"> <div style="background-color:yellow" id="d1"> <table border="1" style="background-color:blue" width="90%" height="100%" id="t2"> <tr><td>hoge1</td></tr> <tr><td>hoge2</td></tr> <tr> <td> <div style="background-color:pink;overflow:auto;height:80%;width:80%" id="d2"> <table id="t3" width="3250" height="500" style="background-color:orange"> <tr> <td>hoge3</td> </tr> </table> </div> </td> </tr> </table> </div> </td> </tr> </table> </body> </html>
- 締切済み
- HTML
- 擬似フレームにて
お世話になっております。 HTML中に以下の様なタグで擬似フレームを作成しています。 overflowでid=headの部分は動かさずそれ以降の部分をスクロールさせるにはどのようにすればいいでしょうか？ご教授願います。 <DIV style="overflow:scroll;height=100px;"> <TABLE border="1"cellspacing="0" align="left"> <TR id="head"> <TD noWrap align="center" style="width:4%">A</TD> <TD noWrap align="center" style="width:11%">B</TD> <TD noWrap align="center" style="width:18%">C</TD> <TD noWrap align="center" style="width:22%">D</TD> <TD noWrap align="center" style="width:34%">E</TD> <TD noWrap align="center" style="width:11%">F</TD> </TR> <TR style="background-color: #FF0000;"> <TD noWrap align="center" style="width:4%">あ</TD> <TD noWrap align="center" style="width:11%">い</TD> <TD noWrap align="center" style="width:18%">う</TD> <TD noWrap align="center" style="width:22%">え</TD> <TD noWrap align="center" style="width:34%">お</TD> <TD noWrap align="center" style="width:11%">か</TD> </TR> <TR style="background-color: #FF0000;"> <TD noWrap align="center" style="width:4%">あ</TD> <TD noWrap align="center" style="width:11%">い</TD> <TD noWrap align="center" style="width:18%">う</TD> <TD noWrap align="center" style="width:22%">え</TD> <TD noWrap align="center" style="width:34%">お</TD> <TD noWrap align="center" style="width:11%">か</TD> </TR> ・ ・ ・ </TABLE> </DIV>
- ベストアンサー
- HTML
- このcssをIEで見ると？
お世話になります。 下記のように書くと、div#bの左からのマージンがIEで見ると、なぜか倍の20pxになってしまいます。FirefoxやOperaはちゃんと表示されるのですが、原因はなぜなんでしょうか？ ご存知の方、よろしくお願いします。 <html> <head> <style type="text/css"> <!-- div#a { width:748; height:200px; background-color:#cccccc; } div#b { margin-left:10px; float:left; width:354px; height:100px; background-color:red; } div#c { float:left; margin-left:20px; width:354px; height:100px; background-color:#0000ff; } --> </style> </head> <body> <div id="a"> <div id="b">b</div> <div id="c">c</div> </div> </body> </html>
- ベストアンサー
- HTML
- CSSの応用がわかりません。
使用目的に合うCSSスタイルをダウンロードしてきました。 これはdivの高さを揃えられるcssです。 しかし、内容を理解していないので自分のホームページに適用できていません。 やりたいことは、col1が155px,col2が14px,col3が382px,col4が14px,col5が190pxにして使用したのですがこのcssを変更して使いたいのですがどのように変更すればよいでしょうか? /* Start of Column CSS */ #container5 { clear:left; float:left; width:100%; overflow:hidden; background:#eee; /* column 5 background colour */ } #container4 { clear:left; float:left; width:100%; position:relative; right:20%; background:#b2f0f9; /* column 4 background colour */ } #container3 { clear:left; float:left; width:100%; position:relative; right:20%; background:#89ffa2; /* column 3 background colour */ } #container2 { clear:left; float:left; width:100%; position:relative; right:20%; background:#ffa7a7; /* column 2 background colour */ } #container1 { float:left; width:100%; position:relative; right:20%; background:#fff689; /* column 1 background colour */ } #col1 { float:left; width:16%; position:relative; left:82%; overflow:hidden; } #col2 { float:left; width:16%; position:relative; left:84%; overflow:hidden; } #col3 { float:left; width:16%; position:relative; left:90%; overflow:hidden; } #col4 { float:left; width:16%; position:relative; left:94%; overflow:hidden; } #col5 { float:left; width:16%; position:relative; left:98%; overflow:hidden; } 以上がCSSです <body> <div id="container5"> <div id="container4"> <div id="container3"> <div id="container2"> <div id="container1"> <div id="col1"> <!-- col1 start --> <p>Each column is 20% percent wide with 2 percent padding on each side.</p> <!-- col1 end --> </div> <div id="col2"> <!-- col2 start --> <h2>No Images</h2> <!-- col2 end --> </div> <div id="col3"> <!-- col3 start --> <p>The HTML in this layout validates as XHTML 1.0 strict.</p> <!-- col3 end --> </div> <div id="col4"> <!-- col4 start --> <h2>This layout is FREE for anyone to use</h2> <!-- col4 end --> </div> <div id="col5"> <!-- col5 start --> <li>Opera 8 & 9</li> <!-- col5 end --> </div> </div> </div> </div> </div> </div> </body>
- 締切済み
- HTML
お礼
yuu_xさん ご回答ありがとうございました。 大変参考になりました。