- ベストアンサー
HTML5 Canvasそのものの原点の指定方法
お世話になります HTML5のcanvasタグについて教えてください 例えば <canvas id="target" style="border: 5px solid gray" width="200" height="400"></canvas> と書くと200[px]x400[px]の枠が付いたキャンバスがウィンドウの左上の隅の方にできるかと思います。 このキャンバス枠をウィンドウの真ん中あたりに表示させたいので Canvasの原点をずらしたいのですが、どうやったらいいのでしょうか ご回答くださいますようお願いします
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- ＨＴＭＬタグの質問です!詳しい方お願いします
<div style="BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; OVERFLOW-Y: scroll; BORDER-LEFT: #ffffff 1px solid; WIDTH: 395px; BORDER-BOTTOM: #ffffff 1px solid; HEIGHT: 523px"></div> というタグに背景画像を入れたいのですが、 背景を動かすと後ろ(もとの背景)ごと動いてしまいます。 やっぱり不可能なのでしょうか？
- 締切済み
- その他([技術者向] コンピューター)
- divタグのheigt:100%について
以下のようなソースを実行すると 赤い枠が黒い枠をはみ出して表示されてしまいます。 黒枠(IDが#main)もheight:100%を設定しており 赤い枠は黒い枠の子要素なのに どうして黒い枠(IDが#main)の高さが100%で表示されないのでしょうか？ html,body{ height:100%; } #main{ width:700px; height:100%; border:1px solid black; } #ue{ height:130px; width:700px; border:1px solid blue; } #shita{ height:100%; width:700px; border:1px solid red; } <body> <div id="main"> <div id="ue"></div> <div id="shita"></div> </div> </body>
- ベストアンサー
- HTML
- cssによる画像リンク枠の色変更
CSSでリンクが貼られた画像の４隅のボーダーに色を付け、 オンマウスで４隅のボーダー色が変わる方法ってどうやってやるのでしょうか？ 一番簡単なＣＳＳを教えて下さい。 ちなみに、下記でやってみましたが、よくわかりません。 <style type="text/css"> <!-- IMG a{ border-width : 7px 7px 7px 7px;border-style : solid solid solid solid;border-color : fuchsia fuchsia fuchsia fuchsia; } --> </style> </head> <body> <a href="#"><img src="jpg" width="54" height="72" border="0"></a>
- 締切済み
- HTML
- ページの内容が折り返してしまう。
ホームページを作成中で 今フレーム横割りで三分割したページを 枠で囲んで表示させたくて 下のようなタグを各ページに打ちこんでいます。 BODY {border-width:pt; border-color: #99ccff; border-style:solid; border-left-width:px; border-right-width:px; border-bottom-width:px; border-top-width:px} ですがお気に入りのウインドウを出したときや ウィンドウを小さくしたときに ページの内容が枠につぶされて レイアウトがくずれてしまいます。 ページを枠で囲んだまま 折り返しをできなくするようにするには どうしたらよいのでしょうか アドバイスお願いします。
- 締切済み
- HTML
- 上下だけのボーダーなのに左に意図しないボーダー発生
. hrタグの上下にボーダーを以下のようにして入れたのですが、親要素に沿って左側に<hr>の高さ分のボーダーができてしまいました。とりあえず border-left: none; で消したのですが、左に出た意図しないボーダーは何が原因なのでしょうか？ hr { height: 30px; border-top:2px solid gray; border-bottom:2px solid gray; } .
- ベストアンサー
- CSS
- 隙間があく理由
以下のHTMLを見ると隙間がキャンバスの下に開きます。 クロム IE ファイヤーフォックス似て確認。 なぜあくのかわかりません。教えてください。 ------------------------------------------ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>テスト</title> <style> <!-- *{ margin:0px; padding:0px; border:none; } canvas{ width:100px; height:50px; background-color:red; } div{ width:100px; height:50px; background-color:green; } --> </style> </head> <body> <canvas></canvas> <div> </div> </body> </html> --------------------------------------
- ベストアンサー
- CSS
- floatがうまくいきません。
以下のスタイルシートに設定したのですが、 #content の幅をぴったしの値 width: 640px; にするとレイアウトが崩れてしまいます。 どこが間違っているのでしょうか。 また、参考になるページがあれば教えてください。 <body> <div id="wrapper"> <div id="header"> </div> <div id="pagebody"> <div id="navigation"> </div> <div id="content"> </div> </div> <div id="footer"> </div> </div> </body> body { margin: 0; padding: 0; } #wrapper { width: 760px; border-style: solid; border-color: red; border-width: 5px; } #header { width: 750px; height: 85px; border-style: solid; border-color: blue; border-width: 5px; } #pagebody { width: 750px; height: 500px; border-style: solid; border-color: orange; border-width: 5px; } #navigation{ width: 90px; height: 490px; border-style: solid; border-color: green; border-width: 5px; float: left; } #content{ width: 636px; height: 490px; border-style: solid; border-color: yellow; border-width: 5px; } #footer{ width: 750px; height: 30px; border-style: solid; border-color: bluck; border-width: 5px; }
- 締切済み
- CSS
- IEの「explorercanvas」で作ったCANVASがスクロール
IEの「explorercanvas」で作ったCANVASがスクロール出来ない HTML5の<canvas>要素を、擬似的に使えるようにした「explorercanvas」↓ http://code.google.com/p/explorercanvas/ ですが、これを使って<canvas>要素を<div>要素の中に配置したんですが、 親の<div>ボックスをスクロールしても、canvasがスクロールされません。 本物の<canvas>要素はちゃんと出来ます。（FirefoxとChromeで確認） 何か代替策ないでしょうか？（canvas内に再描画しろってか..） （実験したコード） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Canvas Test</title> <style type="text/css"> </style> <!--[if IE]><script src="/jslib/excanvas.js"></script><![endif]--> </head> <body> <p>CANVAS</p> <h2 style="text-align:center">Canvas TEST By HTML5 or IE(excanvas.js)</h2> <div id="hoge" style="width;500px;overflow:scroll;border:solid 1px gray"></div> <p>イメージ</p> <div id="fuga" style="width;500px;overflow:scroll;border:solid 1px gray"></div> <script type="text/javascript"> //CANVASの場合 var container1 = document.getElementById("hoge"); var canvas = document.createElement("canvas"); canvas.width = 2000; canvas.height = 500; container1.appendChild(canvas); if (typeof(G_vmlCanvasManager) != 'undefined') canvas = G_vmlCanvasManager.initElement(this.canvas); var ctx = canvas.getContext('2d'); var img = new Image(); img.src = "/image/mio.jpg" + "?" + new Date().getTime(); img.onload = function() { ctx.drawImage(img,0,0,2000,500); } container1.scrollLeft = 500; //imgの場合 var container2 = document.getElementById("fuga"); var img2 = new Image(); img2.src = "/image/yui.jpg" + "?" + new Date().getTime(); img2.style.width="2000px"; img2.style.height="500px"; container2.appendChild(img2); container2.scrollLeft = 500; </script> </body> </html>
- ベストアンサー
- JavaScript
- div枠のレイアウトが崩れてしまいます
２×２段の枠を作るために、下のような段組にしました。 100％表示ではうまく表示するのですが、ウィンドウを縮小すると、 div要素が勝手に改行してしまい、レイアウトが崩れてしまいます。 同じような質問を参考にして、"wrap"の幅設定をしてみたり、 div要素に｛position:relative;}を追加してみたりしましたが、 どれもうまくいかず、縮小でレイアウトが崩れます。 ウィンドウを縮小してもレイアウトが崩れないようにする方法はあるでしょうか？ それと、もう１つ質問があります。 右上の枠内の画像を「枠内の右下」に表示したいのですが、よい方法はありますか？ {text-align:right;}で横位置は移動できたのですが、縦位置がうまく設定できません。 画像自体に｛potision:absolute;}{top:**}{left:**｝で指定すると、 またウィンドウの倍率変更でとんでもないところに表示されてしまいます。 【html】 <body> <div id="wrap"> <img src="image/title.gif"> <div id="left-up">あああ</div> <div id="right-up"><img src="logo.jpg"></div> <br class="clear"> <div id="left-down">いいい</div> <div id="right-down">ううう</div> </div> <!-- /wrap--> </body> 【css】 #wrap{ width: 945px; height: 700px; padding: 0px; border: 1px #202020 solid; margin: 0 auto; text-align: left; } #left-up{ width: 160px; height: 80px; border-top: 1px solid #606060; border-right: 1px solid #606060; float: left; } #right-up{ width: 780px; height: 80px; border-top: 1px solid #606060; float: left; } .clear{ clear: left; } #left-down{ width: 160px; height: 500px; border-top: 1px solid #606060; border-right: 1px solid #606060; border-bottom: 1px solid #606060; float: left; } #right-down{ width: 780px; height: 500px; border-top: 1px solid #606060; border-bottom: 1px solid #606060; float: left; } よろしくお願いいたします。 そもそも、この枠組みの仕方が無謀であれば、何かよい方法を教えていただけないでしょうか。 重ね重ね申し訳ありません。
- ベストアンサー
- HTML
- スタイルシートの位置指定について。
こんばんは。 HP作成中なのですが、以下の枠を 枠は右寄せ、中の文章は左寄せにしたいのですが、 どうもうまくいきません。 <DIV style="border:solid 1px #000000;height:100%;width:95%;overflow:auto;> </DIV> align="right"とすると文字が右寄せになってしまいます。 どうにか上手い方法はないでしょうか？ 詳しい方ご教授ください。 宜しくお願いいたします。
- ベストアンサー
- HTML
お礼
早速の詳しい回答ありがとうございます