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

オリカ

2020年7月28日 11:34

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

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

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

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

開けましたか？

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

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

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

HTMLの構造

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

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

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

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

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

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

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

・ヘッダー部（<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　：ビューポート。スマホなどのモバイル端末表示用設定。
　　　　　　　今回は、幅はデバイス（端末）の幅を指定
　　　　　　　スケール（倍率）は１倍のみ、ズームを許可しない

・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とありますが余白の設定です。
　　　　　　　今回は、０設定になっています。（余白なし）

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

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

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

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

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

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

まとめ

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

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

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

リファレンス系

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

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

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

この記事が気に入ったらサポートをしてみませんか？

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