Index

このセクションではゲーム画面の位置と大きさを決めて、JavaScriptを使用できるようにindex.htmlとstyle.cssの編集をします。

index.htmlの編集

前回作成したjump_gameフォルダーにあるindex.htmlを次のように編集します。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jump game</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <canvas width="400" height="300"></canvas>
    <script src="main.js"></script>
  </body>
</html>
HTML
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>jump game</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <canvas width="400" height="300"></canvas>
    <script src="main.js"></script>
  </body>
</html>
HTML

今回はheadタグとbodyタグの要素内容について説明します。<!DOCTYPE html>や<html lang="ja">、その他の詳しい意味については、今後作成予定のHTMLのレッスン、もしくは他の情報を参考にしてください。

headタグ

<head>
  <head>
    <meta charset="utf-8">
    <title>jump game</title>
    <link rel="stylesheet" href="style.css">
  </head>
HTML
<head>
  <head>
    <meta charset="utf-8">
    <title>jump game</title>
    <link rel="stylesheet" href="style.css">
  </head>
HTML

4行目の<meta charset="utf-8">で文字コードの設定、5行目の<title>jump game</title>でタイトルの設定、6行目の<link rel="stylesheet" href="style.css">でstyle.cssをスタイルシートとしてリンクします。style.cssの編集は後で行います。

bodyタグ

<body>
  <body>
    <canvas width="400" height="300"></canvas>
    <script src="main.js"></script>
  </body>
HTML
<body>
  <body>
    <canvas width="400" height="300"></canvas>
    <script src="main.js"></script>
  </body>
HTML

9行目の<canvas width="400" height="300"></canvas>で大きさが400x300のcanvas要素を設定します。このcanvas要素がゲームの画面になります。10行目の<script src="main.js"></script>でmain.jsをスクリプトとしてインポートします。以上でindex.htmlの設定が完了しました。

style.cssの編集

続いて、前回作成したjump_gameフォルダーにあるstyle.cssを次のように編集します。

style.css
canvas {
  display: block;
  margin: 80px auto;
  background-color: yellowgreen;
}
CSS
style.css
canvas {
  display: block;
  margin: 80px auto;
  background-color: yellowgreen;
}
CSS

canvas要素に対して、display: block;で要素をブロックボックス、margin: 80px auto;で上下に80pxの余白、左右中央に配置、canvas要素の位置と大きさを確認するためにbackround-color: yellowgreen;で背景を黄緑色に設定します。詳しい意味については、今後作成予定のCSSのレッスン、もしくは他の情報を参考にしてください。以上でstyle.cssの設定が完了しました。

実行結果

Chromeでindex.htmlを開きます。実行結果は以下の画像のようになります。

コメント

コメントはまだありません。

コメント