前回は、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;
}