見出し画像

index.htmlを見てみる 〜「ぷよぷよプログラミング」でお勉強〜 その5

画像1

いよいよ、細かく見ていくにゃ!


index.htmlファイルを開いてみよう

プログラミングの最初の設定などを書くファイル「index.html」
まずは、こちらの中身を見ていきましょう。

それでは、「index.html」ファイルをダブルクリックして、コードを表示してください。

開けましたか?

45行ほどのコードが書かれています。

HTMLは、画面表示部分の設定などをします。(動きはJavaScriptにおまかせ)

タグと呼ばれる、<〇〇>と</〇〇>を1セットとしたもので書いていきます。


HTMLの構造

ブログをされている方は見覚えのあるコードかもしれません。

基本的な構造を見てみます。

<!DOCTYPE HTML> ←このファイルの種類が「HTML」ですよという宣言(決り文句)
<html> ← HTML ファイルスタート
    <head>
          ここには、タイトル、メタ要素、使用するCSSファイル名、JavaScriptファイル名を書く
    </head>
    <body> 
           ここに表示部部分を書く
    </body>
</html>← HTML ファイルエンド

最初の<!DOCTYPE HTML>
これは、このファイルがHTML(正確に言うと、HTML5)ですよ、という宣言です。

ブラウザは、まずこの部分をみて判断をします。(バージョンなど)

決り文句と思って書いておきましょう。

HTMLの中身は、<html>から</html>の間に書きます。
そして、中身は大きく2つに分けられます。

ヘッダー部<head>から</head>の間)
ボディ部<body>から</body>の間)


タイトル、メタ情報、外部ファイルを書くヘッダー部

ヘッダーの部分には、タイトル、メタ情報と外部ファイルの設定をおこないます。

タイトルはブラウザのタブ部分に表示されます。

メタ情報というのは、ファイルの説明を書きます。
例えば、言語は何を使う、外部のファイルは何を使うなど。

webサイトのSEO対策も、このメタ情報にアレヤコレヤ設定をします。

外部ファイルは、cssファイルやJavaScriptファイルの場所を指定します。

ではコードを見てみましょう(わかりやすいように改行を入れています。一部のコードのみ書いています)

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
   
   <title>ぷよぷよプログラミングを体験してみよう!</title>
   
   <script src="components/loader.js"></script>
   <script src="src/config.js"></script>
   
   
   
   <link rel="stylesheet" href="components/loader.css">
   <link rel="stylesheet" href="css/style.css">
   
   <script>
   </script>
</head>

メタ情報
・charset : 文字コード この場合、UTF-8(ユーティーエフ エイト)

・viewport :ビューポート。スマホなどのモバイル端末表示用設定。
       今回は、幅はデバイス(端末)の幅を指定
       スケール(倍率)は1倍のみ、ズームを許可しない

・http-equiv :エイチティーティーピー イクイヴ。
        ブラウザの動作を指定します。(プラグマ指示子)
        今回は、セキュリティの設定をしています。


外部ファイル
・Scriptタグ:今回は、使用するJavaScriptファイルの場所を指定します。
       srcの部分にファイル名を書きます。
       「src」フォルダ内の「config.js」ファイルを指定するので、
        src/config.js  と書きます。

・linkタグ:今回は、使用するCSSファイルの場所を指定します。
      rel にリンク先のファイルの種類を
      href にファイルの場所を指定します。


最後の↓これは無くても大丈夫です。(何故あるのか、誰か教えて下さい)

<script>
</script>


画面表示部分の設定 ボディ部

ボディ部に書かれたものは、画面上に出てきます。

ではコードを見てみましょう(わかりやすいように改行を入れています。一部のコードのみ書いています)

<body style="margin:0;">
    <div id="stage" style="position:relative; margin: 0 auto; overflow: hidden;background: url(img/puyo_1bg.png)"></div>
    
    <div id="score" style="margin: 0 auto; overflow: hidden; text-align: right;"></div>

    <div style="display:none">
        <img src="img/puyo_1.png" id="puyo_1">
        <img src="img/puyo_2.png" id="puyo_2">
        <img src="img/puyo_3.png" id="puyo_3">
        
        <img src="img/batankyu.png" id="batankyu">
        <img src="img/zenkeshi.png" id="zenkeshi">
        
        <img src="img/0.png" id="font0">
        <img src="img/1.png" id="font1">
        <img src="img/2.png" id="font2">
        
    </div>
</body>

マージン値 :ところどころ、marginとありますが余白の設定です。
        今回は、0設定になっています。(余白なし)

最初のdiv(ディブ)タグは、背景画像を指定しています。初級と中級で背景画像が違うのは、この部分で指定している背景画像ファイルが異なるからです。

次のdivタグは、画面下のスコア部分の設定です。

最後のdivタグは、ゲームで使用する画像ファイルの設定です。
・落ちてくるぷよの画像ファイル
・スコアの数字画像ファイル
・全部消した時の画像ファイル
・上までぷよが積み上がったときのばたんきゅー画像ファイル

これらは、非表示になっています。style="display:none"

このstyle="display:none"を消してしまう、画面上に指定した画像が出てきてしまいます。(下の方にたまって表示されています)

スクリーンショット 2020-07-28 10.39.10


まとめ

今回は、スタートのファイルとなるindex.htmlを詳しく見ていきました。

動きの部分はまったくなかったので、退屈でしたでしょうか?
次回辺りから見ていくので、お楽しみに。

HTMLについて、もっと詳しく知りたい!という方参考まで↓

リファレンス系

がっつり仕様を読みたい方


参考 「ぷよぷよプログラミング」サイト

* こちらの連載記事は、プログラミング初心者さん向けです。
プログラミングが詳しい方は、説明がおかしい所など見つけていただけましたらコメントなどでご指摘していただけるとうれしいです。

* 事前にSEGAさんの使用許諾を受けています。
©SEGA ©Asial Corporation



この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
めっちゃうれしい〜〜!
15
千葉県在住、2児の母、プログラミング開発20年以上。 IT苦手!忙しくて手が回らない!という女性起業家さん向けLINE公式構築運用サポートしています。 →Clubhouse寄席公式LINE(構築運用)https://lin.ee/03bAnjA