clip:rect(px,px,px,px)について

2023/08/07 17:22

このQ&Aのポイント

clip:rect(*px,*px,*px,*px)について疑問があるので教えていただきたいです
clip:rect(*px,*px,*px,*px)はFirefoxとOperaでは表示されるが、IE6では表示されない現象について
clip:rectを動的に変更する方法について教えてください

ベストアンサー

clip:rect(px,px,px,px)について

2007/09/23 21:42

お世話になります clip:rectを試しているのですが疑問があるので教えていただきたいのですが <style type="text/css"></style> <div id="clip"> あいうえお<br> かきくけこ<br> さしすせそ<br> </div> Firefox、Operaでは表示されているのですがIE6ではclipされずに全表示されていますサイト検索してもIE6は対応しているように書かれているのですが・・・(例文は大抵imgでしたけど) そしてclipを動的にするとIE6でもちゃんとなるのですが何故でしょう？ <script language="javascript"></script> <style type="text/css"></style> <body onload="move(150,250,150,250)"> <div id="game"> </div>

leap_day
お礼率94% (142/151)

HTML
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

himajin100000
ベストアンサー率54% (1660/3060)

2007/09/24 12:21 回答No.2

訂正です。スレ読んだだけで仕様をしっかり読んでませんでした。 Authors should separate offset values with commas. CSS記述者はオフセット値をカンマで区切るべきである。 User agents must support separation with commas, User Agentsはカンマ区切りをサポート【しなければならない】が but may also support separation without commas, because a previous revision of this specification was ambiguous in this respect. この仕様の前回の版ではこの点について曖昧な記述だったため，カンマなし区切りをサポートしても良い。 #おそらくIEの開発は，この前版までの情報を頼りに製作されていたんじゃないかなあ

質問者

お礼 2007/09/24 19:40

回答ありがとうございます ckip:rectで検索したときにコンマ区切りのものとスペース区切りのものがあったのでどっちが本当なのかな～とは思っていたのですが回答を得てすっきりしました自分の作ったソースを見直してみたら確かに静的なほうはコンマ区切り、動的なほうはスペース区切りで作っていましたね（－－；）スペース区切りでやるときちんと表示されましたありがとうございました

その他の回答 (1)

himajin100000
ベストアンサー率54% (1660/3060)

2007/09/24 11:54 回答No.1

http://www.velocityreviews.com/forums/t156626-ie6-quotstandardsquot-mode-and-css-clip.html によると CSS 2.1の仕様では http://www.w3.org/TR/CSS21/visufx.html#propdef-clip clip:rect(5px,40px,40px,5px); というようにカンマ区切りにするのが正しいがこれではIE6では動作しない。【CSSとして正しくない】が， clip:rect(5px 40px 40px 5px); のようにスペース区切りだとIE6で動作するらしい。実際記述されたjavascript/JScriptソースはスペース区切りになっている。 (俺はIE7でしか検証してないが，確認できた)

関連するQ&A

スタイルシート a:activeで画像を変える
スタイルシートの設定で画像メニューの切替を行おうとしていたんですが a.activeの設定の時のみ画像切替の反応が見られません。どうしたらいいでしょうか？切替はclip:rect(top right bottom left)を使って一枚の画像の表示範囲で切り換えています。【htmlメニュー部分】 <div class="MENU"> 　<a href="./"><img src="btn001.png"></a> </div> <div class="MENU"> 　<a href="./"><img src="btn002.png"></a> </div> 【スタイルシート部分】 IMG.MENU{ position:absolute; } DIV.MENU{ border:none; position:relative; float:left; } DIV.MENU A:link IMG{ clip:rect(0px 133px 25px 0px); top:0px; } DIV.MENU A:visited IMG{ clip:rect(0px 133px 25px 0px); top:0px; } DIV.MENU A:hover IMG{ clip:rect(50px 133px 75px 0px); top:-50px; } DIV.MENU A:active IMG{ clip:rect(25px 133px 50px 0px); top:-25px; } よろしくお願いします。
- ベストアンサー
- CSS
見出しや左メニューのhtmlを後ろに置く時のスタイルシートの指定方法に
見出しや左メニューのhtmlを後ろに置く時のスタイルシートの指定方法について見出しや左メニューの部分のhtmlをページ全体の後ろのほうに配置したいと考えています。添付の画像のソースが以下のとおりです ----------------------------------------------------------------------- <div style="position:relative;margin:auto;width:800px;"> <div style="height:20px;width:100%;background-color:#ff0000;"> </div> <div style="margin:0px 0px 0px 150px;width:650px;background-color:#00ff00;"> ああああああ<br /> ああああああ<br /> ああああああ<br /> ああああああ<br /> </div> <div style="position:absolute;top:20px;left:0px;width:150px;background-color:#0000ff;"> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> </div> <div style="height:20px;width:100%;background-color:#ffff00;"> </div> </div> ----------------------------------------------------------------------- 一応、左メニューについて実現できていて、見出しも同様にやれるのですが、この方法では、absoluteで配置しているため、フッターの部分を重ならないようにするためには、見出しとフッターの間のブロックについて高さを指定するしか方法を思いつきません。・absoluteで配置する以外の方法があるでしょうか。・absoluteで配置したとしても、高さを指定しない方法があるでしょうか。よろしくお願いします。
- ベストアンサー
- HTML
z-indexを指定したボックスの下に表示させる
z-indexとjavascriptを組み合わせて下記のようなページを作っています。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ああああ</title> <meta http-equiv="Content-Script-Type" content="text/JavaScript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript">  </script> <style type="text/css"> div#aaa { z-index: 2; position:absolute; width: 300px; } div#bbb { z-index: 1; position:absolute; width: 300px; } </style> </head> <body> <h1>あああ</h1> <p><a onclick="MM_showHideLayers('aaa','','show','bbb','','hide')">ううう</a> / <a onclick="MM_showHideLayers('aaa','','hide','bbb','','show')">えええ</a></p> <div id="aaa" style="visibility:visible"> <h2>ううう</h2> <p>うううううううう<br /> うううううううう</p> </div> <div id="bbb" style="visibility:hidden"> <h2>えええ</h2> <p>えええええええええ<br /> えええええええええ<br /> えええええええええ<br /> えええええええええ<br /> えええええええええ</p> </div> <p>いいいいいいいいい<br /> いいいいいいいいい</p> </body> </html> 切り替わるdivの下に<p>いいいい</p>を表示させたいのですが、後ろに回って表示されません。これを表示させる方法をご存じでしたら教えてください。
- ベストアンサー
- HTML
innerTextで文字を変えたいのですが
配列imに入っている数値が1なら"ok"と表示、0なら"-----"と表示したいのです。以下のソースなのですが <html> <head> <style type=text/css> .im{ font-size:1.5em; font-weight:500; color:#ffffff; text-dacoration:none; text-decoration:blink; z-index:3; } </style> <script langage="JScript"> var im=new Array(30); var haba=0; //初期設定 function Preferences(){ for(i=1;i<=30;i++){ obj=document.getElementById("num"+i); obj.style.posTop+=haba; haba+=25; } for(f=1;f<=30;f++){ im[f]=0; im[2]=1; im[5]=1; if(im[f]==0){ num="num"+f; num.innerText="----------"; }else{num.innerText="ok";} } } </script> </head> <body bgcolor="#0000000" onLoad="Preferences()"> <div id="num1" class="im" style="position:absolute;top:25px;left:240px;">A1</div> <div id="num2" class="im" style="position:absolute;top:25px;left:240px;">A2</div> <div id="num3" class="im" style="position:absolute;top:25px;left:240px;">A3</div> <div id="num4" class="im" style="position:absolute;top:25px;left:240px;">A4</div> <div id="num5" class="im" style="position:absolute;top:25px;left:240px;">A5</div> <div id="num6" class="im" style="position:absolute;top:25px;left:240px;">A6</div> <div id="num7" class="im" style="position:absolute;top:25px;left:240px;">A7</div> <div id="num8" class="im" style="position:absolute;top:25px;left:240px;">A8</div> <div id="num9" class="im" style="position:absolute;top:25px;left:240px;">A9</div> <div id="num10" class="im" style="position:absolute;top:25px;left:240px;">A10</div> <div id="num11" class="im" style="position:absolute;top:25px;left:240px;">A11</div> <div id="num12" class="im" style="position:absolute;top:25px;left:240px;">A12</div> <div id="num13" class="im" style="position:absolute;top:25px;left:240px;">A13</div> <div id="num14" class="im" style="position:absolute;top:25px;left:240px;">A14</div> <div id="num15" class="im" style="position:absolute;top:25px;left:240px;">A15</div> <div id="num16" class="im" style="position:absolute;top:25px;left:240px;">A16</div> <div id="num17" class="im" style="position:absolute;top:25px;left:240px;">A17</div> <div id="num18" class="im" style="position:absolute;top:25px;left:240px;">A18</div> <div id="num19" class="im" style="position:absolute;top:25px;left:240px;">A19</div> <div id="num20" class="im" style="position:absolute;top:25px;left:240px;">A20</div> <div id="num21" class="im" style="position:absolute;top:25px;left:240px;">A21</div> <div id="num22" class="im" style="position:absolute;top:25px;left:240px;">A22</div> <div id="num23" class="im" style="position:absolute;top:25px;left:240px;">A23</div> <div id="num24" class="im" style="position:absolute;top:25px;left:240px;">A24</div> <div id="num25" class="im" style="position:absolute;top:25px;left:240px;">A25</div> <div id="num26" class="im" style="position:absolute;top:25px;left:240px;">A26</div> <div id="num27" class="im" style="position:absolute;top:25px;left:240px;">A27</div> <div id="num28" class="im" style="position:absolute;top:25px;left:240px;">A28</div> <div id="num29" class="im" style="position:absolute;top:25px;left:240px;">A29</div> <div id="num30" class="im" style="position:absolute;top:25px;left:240px;">A30</div> </body> </html> innrTextで表示する文字を変えるところがおかしいんだと思いますがどう直せばいいのか分かりません。どなたか教えてください。
- ベストアンサー
- JavaScript
エンドロールを枠の中で表示するには？
映画のようにエンドロールを枠の中で（<TD>ここに表示したい。</TD>）下から上へと画像の前に流したいのですがどうすればよいのでしょう？うまく言えないので下にソースを載せます。 <HTML> <HEAD> <TITLE>●エンドロールのように画面の上方向に流れる</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY onLoad="roll()" BGCOLOR="#009900" TEXT="#ffffff"> <P><IMG SRC="top_bar.gif" WIDTH="520" HEIGHT="60"></P> <CENTER> <TABLE WIDTH="409" BORDER="1" HEIGHT="205"> <TR> <TD VALIGN="top" HEIGHT="43"> <DIV ALIGN="center"><IMG SRC="bar_s.gif" WIDTH="200" HEIGHT="40"></DIV> </TD> </TR> <TR> <TD ここに表示したい。></TD> </TR> </TABLE> </CENTER> <DIV id="gyoji1" style="position:absolute;left : 243px;top:150px;width:400px;height:90px;clip: rect(0px 400px 90px 0px)}"> <DIV ID="gyoji2" STYLE="position:relative;left:12px;top:150px;width:400px;height:90px;font-size:14pt;color:ffffff;"> <BR><CENTER>今週の行事内容</CENTER><BR> 2日　合同職員会議<BR> 3日　PTA会議<BR> 5日　全校生徒運動会予行演習<BR> 6日　避難訓練(低学年)<BR> 7日　避難訓練(中高学年)実技訓練あり</DIV> </DIV> </BODY> </HTML>
- 締切済み
- JavaScript
スタイルシートでスクロールは可能ですか？
以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。＜scroll=内容を切り抜く＞ということから当然のことなのでしょうか？ <!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> 　　<TITLE>Test</TITLE> 　　<STYLE type="text/css"> 　　#left { 　　 position:absolute; 　　 top: 130px; 　　 left: 100px; 　　 width: 300px; overflow: scroll; 　　} 　　#main { 　　 position:absolute; 　　 top: 130px; 　　 left: 400px; 　　} 　　#right { 　　 position:absolute; 　　 top: 130px; 　　 left: 700px; 　　} 　　#footer { 　　 position:absolute; 　　 bottom: 0px; 　　 left: 100px; 　　} 　　</STYLE> </HEAD> <BODY> <div id="left"> 　left<br/> <br/> 　left<br/> </div> <div id="main"> 　main </div> <div id="right"> 　right </div> <div id="footer"> 　footer </div> </BODY> </HTML>
- ベストアンサー
- ホームページ作成ソフト
clipプロパティでマウスがa要素の上に乗ったときに画像全体を見えるようにするソースでうまくいかない
clipプロパティでa要素の上にマウスのカーソルが乗っていないときに画像の一部を見せて、a要素の上に乗ったときに画像全体を見せるソースを作ったのですが、a要素に乗っていないときは画像の一部だけ見え、乗ったときでも変化がありません。それは、 http://w3g.jp/css/display_position/clip このサンプルを見て作ったのですが、 1.IE7でURLのサンプルは正常に動作する。 2.自作のソースでIE7で試したときに、a要素の上に乗っても画像が変わらない。 3.自作のソースでIE7以外（Firefox2、Opera9、Safari3）は正常に画像全体が見える。「2」の自作のソースでIE7のときのみ正常に動作しません。これは何が原因なのでしょうか？回答よろしくお願いします。 ■CSSソース img.clip { position: absolute; clip: rect(10px 50px 50px 25px); } a:hover img.clip { clip: rect(0 256px 387px 0); } ■HTMLソース <a href="image.jpg"><img src="image.jpg" class="clip" /></a>
- ベストアンサー
- HTML
ieとfirefoxでdiv枠に２pxのズレ
宜しくお願い致します。現在下記のHTMLを作成致しましたが、CSSにてfirefoxとchomeに合わせると ieではdiv枠が2px程左右にズレが生じてしまいます。ieに合わせると逆の現象が生じます。何が原因なのか判りません。宜しくご教示下さい。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <style type="text/css"> .clear {clear:both; } .clear hr {display:none;height:0px;font-size:0pt; } #wrap {width:810px; text-align:center; margin:0px auto;} #header{font-size:70%;color:green;margin-top:5px;text-align:center;} #menu {width:200px;height:auto; float:left;margin:0;position: relative;} #goods {width:600px;height:auto; float:right;margin:0;position: relative;} #top-title { width:200px;height:70px; float:left; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} #top-menu { width:600px;height:70px; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} /* position: relative削除したり widthの値を%にしたり色々試してみましたが??? */ .col_01_l{width:295px;height:310px;position: relative; float:left; margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_01_r{width:295px;height:310px;position: relative; float:right;margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_05 {width:200px;height:auto; float:left; margin-bottom: 8px;background-color:#ffffee; border:solid 1px #336600;} .col_06a {width:600px;height:auto; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #000000;position: relative;} </style> </head> <body> <div id="wrap"> <div id="header"> </div> <div id="goods"> <div id="top-menu"> </div> <br style="clear:both;"> <div class="col_06a"> <br><br> </div> <br style="clear:both;"> <div class="col_01_l"> <p>ブラウザieではずれませんが、 chrome、firefoxで、この枠が右に２pxにずれる。どのように直せば良いか具体的にご教示下さい。</p> </div> <div class="col_01_r"> <br> </div> <br style="clear:both;"> </div>  <div id="menu"> <div id="top-title"> <br> </div> <br style="clear:both;"> <div class="col_05"> <br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br> </div> <br style="clear:both;"> </div> <br style="clear:both;">  </div> </body> </html>
- ベストアンサー
- CSS
すいません、このタグですが、自動で始まるようにならないでしょうか？
<title>１行づつ画面上に出力する</title> <STYLE type="text/css">  </STYLE> <script Language="JavaScript"></script> </head> <body> <DIV id="outText" style="position:absolute;top : 167px;left : 112px;"></DIV> <DIV style="width : 139px;height : 76px;top : 10px;left : 146px; position : absolute; z-index : 1; " id="Layer1"><a href="javaScript:setTextLine()">出力開始</a></DIV> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
マウスをクリックで画像・・・
マウスをクリックすると画像が飛び散る素材(?)を頂いてきたのですが、以下の通りにUPすると「エラー」が出てしまいます。どこが悪いのか解らないのでよろしくお願いします。 <SCRIPT language="JavaScript" src="ht://xxx/xx.js"></SCRIPT> <BODY onload="initMouseEvents()"> <DIV id="sparks"> <DIV id="sDiv0" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/1.gif" width="15" height="16"></DIV> <DIV id="sDiv1" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/2.gif" width="15" height="16"></DIV> <DIV id="sDiv2" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/3.gif" width="15" height="16"></DIV> <DIV id="sDiv3" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i4.gif" width="15" height="16"></DIV> <DIV id="sDiv4" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i5.gif" width="15" height="16"></DIV> <DIV id="sDiv5" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i6.gif" width="15" height="16"></DIV> <DIV id="sDiv6" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/7.gif" width="15" height="16"></DIV> <DIV id="sDiv7" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/8.gif" width="15" height="16"></DIV> <DIV id="sDiv8" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/9.gif" width="15" height="16"></DIV> <DIV id="sDiv9" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/10.gif" width="15" height="16"></DIV> </DIV>
- 締切済み
- JavaScript