- ベストアンサー
画面の真ん中に配置する方法がわかりません
- ジャバスクリプトの動作を中心にする方法がわかりません。
- http://www.openspc2.org/HTML_JS_CSS/table/006/ で提供されているプログラムを画面の真ん中に配置したい場合、どこに手を加えれば良いか分かりません。
- 画面の真ん中とはインターネットエクスプローラーで見た時に中央に配置したいという意味です。HTMLでの<centr>のような配置方法が知りたいです。
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
要素を中央に表示したい場合、親要素にtext-align:center;を指定するか、対象要素にmargin:auto;を指定します。(javascriptで中央位置算出するのはちょっと面倒です。) どちらが有効かはDOCTYPE宣言の有無とブラウザによって異なります。DOCTYPE宣言なしの場合、IEは前者、Firefoxは後者になります。また、前者の方法は非推奨とされています。ただし、position:absolute;では無効なので、relativeに変更しています。 ご質問のケースの場合、clip:rect;を使うよりもoverflow:hidden;を使ったほうがやりやすいです。clip:rect;だと動作時にブラウザの横スクロールバーが伸び縮みしますので。 pixelLeftプロパティはIEにはありますが、Firefoxにはないようなので、leftを使うように変更させてもらいました。 表示領域のheightは適当に設定したので、適宜変更してください。 ------------------------------------------ <html> <head> <title>クリックで表示するテーブルをスクロールさせて切り替える</title> <script language="JavaScript"><!-- tMax = 5; // テーブル個数 tWidth = 200; // １つのテーブル幅 step = 10; // １回の移動量（単位：ピクセル） num = 0; offset = 0; flag = false; function scrollSetTBL(n) { if (flag) return; num += n; if (num < 0) { num = 0; return; } if (num >=tMax) { num = tMax-1; return; } offset = n * step; count = tWidth / step; setTimeout("scrollTBL()",10); flag = true; } function scrollTBL() { var left = parseInt(scrlTBL.style.left); left -= offset; scrlTBL.style.left = left + "px"; count--; if (count > 0) setTimeout("scrollTBL()",10); else flag = false; } // --></script> </head> <body> <div style="text-align:center;"> <div style="position:relative;width:200px;height:150px;overflow:hidden;margin:auto;"> <table id="scrlTBL" border="0" cellspacing="0" cellpadding="0" style="position:relative;left:0px;"> <tr><td> <table bgColor="gray" width="200"> <tr><td bgColor="yellow">フォトアルバム１</tr> <tr><td><img src="001.jpg"></td></tr> </table> </td><td> <table> <table bgColor="gray" width="200"> <tr><td bgColor="yellow">フォトアルバム２</tr> <tr><td><img src="002.jpg"></td></tr> </table> </td><td> <table bgColor="gray" width="200"> <tr><td bgColor="yellow">フォトアルバム３</tr> <tr><td><img src="003.jpg"></td></tr> </table> </td><td> <table bgColor="gray" width="200"> <tr><td bgColor="yellow">フォトアルバム４</tr> <tr><td><img src="004.jpg"></td></tr> </table> </td><td> <table bgColor="gray" width="200"> <tr><td bgColor="yellow">フォトアルバム５</tr> <tr><td><img src="005.jpg"></td></tr> </table> </td></tr> </table> </div> <img src="left.gif" onMousedown="scrollSetTBL(-1)" style="position:relative;"> <img src="right.gif" onMousedown="scrollSetTBL(1)" style="position:relative;"> </div> </body> </html> ------------------------------------ 参考になれば幸いです。
お礼
返事遅れて大変申し訳ございません。 詳しい説明と、サンプルありがとうございました。 おかげさまで大変助かりました。