タグ: 中央寄せ

Cssでキャンバスを中央寄せにする

jiji コメントをする

前回は、canvasに左上に配置しましたが、
見栄えが悪いので、cssファイルを作成してcanvasを中寄せにします。

動画解説

今回は、canvasの画像を中央寄せにしたいと思います。

中央寄せにするために、cssというファイルを作成します。

cssはhtmlのタグ要素に属性をもたせるためのものです。

cssファイルを作る前に、index.htmlファイルを変更していきます。

 

——index.htmlをいじる—–

まずはこれから作るcssファイルを読み込むためコードを書きます

次に、canvasをdivで囲みます。

divは囲われた要素に、属性を与えたいときに使用します。

次にcssファイルを作成します。

 

——main.css——

テキストエディットからファイルを新規作成します。

中身を意味するbodyの定義からします

 

マージンとパディングの値をリセットします。

次に、canvasを中央寄せにするための属性を設定します。

widthを与えてから、marginにautoを設定すると、自動で中央寄せにしてくれます。

 

—–確認—–

では、完成したhtmlファイルをチェックしましょう

これで、中央寄せが完成しました。

 

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<script lang="JavaScript" src=main.js></script>
</head>

<body>
<div id="canvas_wrapper">
	<canvas id="id_canvas" width="640" height="480"></canvas>
</div>
</body>
</html>

main.css

body{
	margin:0;
	padding:0;
}

#canvas_wrapper{
	width:640px;
	margin:0 auto;
}