見出し画像

HTMLとCSSとJavaScript　〜「ぷよぷよプログラミング」でお勉強〜　その１

オリカ

画像1

「ぷよぷよプログラミング」は何のプログラミング言語を
使っているか見てみるニャ！

まず「ぷよぷよプログラミング」は、どんなプログラミング言語を使って書かれているかお勉強しましょう。

HTMLとCSSとJavaScript

まずは読み方から

・HTML（エイチティエムエル →HyperText Markup Languageの略）
・CSS（シーエスエス→Cascading Style Sheetsの略）
・JavaScript（ジャバスクリプト）

これらの言語は、主にwebで使われるものです。

今見ているnoteの画面。
こちらにも使われています。


それぞれwebのどの部分で使われるのか見ていきましょう。

ざっくり説明です。
・HTML：画面表示部分。ファイルの拡張子　html
・CSS：HTMLで作った表示を装飾する。html内に組み込むことも、外部ファイルにすることも可能。ファイルの拡張子 css
・JavaScript：web上の動作の処理。html内に組み込むことも、外部ファイルにすることも可能。ファイルの拡張子　js

HTML

HTMLは、HyperText Markup Language（ハイパーテキスト　マークアップ　ランゲージ）の略で、web画面の部分を作成します。

「マークアップ」言語というのは、要素をタグでくくってある言語です。

<!DOCTYPE HTML>
<html>
    <head>
        <title>ぷよぷよプログラミングでお勉強</title>
    </head>
    <body>
        Hello world!!
    </body>
</html>

＜〇〇＞をタグと言います。
それぞれのタグには意味が付けられていて、webブラウザはタグを解釈して表示をします。

例えば、
・<title>タグがあったら、ブラウザのタイトル部分に表示する
・<body>タグがきたら、</body>までにかかれている部分をweb画面に表示する
といった具合です。

タグは大体「起こしタグ」＜〇〇＞と「閉じタグ」＜/ 〇〇＞のセットになっています。

　試してみよう！

上の「HelloWorld」のコードを、テキストエディタやメモ帳でコピー＆ペーストして保存してみましょう。
拡張子はhtmlです。

helloWorld.html

このファイルをwebブラウザ上にDrag＆Dropしてみてください。
どんな変化が起こりましたか？


次のような表示になりましたか？（図はChromeで試したものです）

スクリーンショット 2020-07-05 16.41.37

<title>タグの中身は、タブに表示されていますね。


CSS

CSSはCascading Style Sheets（カスケーディング　スタイル　シーツ）の略でHTMLで書かれた表示を装飾します。

・文字の装飾（書体、大きさ、色、斜体、組方向など）
・画像の装飾
・レイアウト
・アニメーション　　他

CSSはHTMLに組み込んで書くことができます。

<!DOCTYPE HTML>
<html>
    <head>
        <title>ぷよぷよプログラミングでお勉強</title>
        <style type="text/css">
            body {
                background-color: lightpink;
            }
            p {
                color: darkseagreen;
            }
        </style>
    </head>
    <body>
        <p>Hello, world!</p>
    </body>
</html>

helloWorld2.html　　　↓

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


CSSファイルとして分離して書くこともできます。

例えばwebサイトを作る場合、それぞれのHTMLにCSSを毎回書いていくより
共通のスタイルを１つのCSSにまとめて、そのファイルを参照したほうが効率も良いです。


　試してみよう！

HTML内にCSSを書いたものと同じ表示になるか、確認してみましょう。

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="helloWorld.css">
        <title>ぷよぷよプログラミングでお勉強</title>
    </head>

    <body>
        <p>Hello, world!</p>
    </body>
</html>

helloWorld3.html

body {
    background-color: lightpink;
}

p {
    color: darkseagreen;
}

helloWorld.css

helloWorld3.htmlをブラウザ上にwebブラウザ上にDrag＆Dropすると

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

同じになりました。


JavaScript

HTML、CSSはweb画面の静的な部分に対して、JavaScriptは動的な部分を操作します。

例えばwebサイト上のボタンを押されたら
・　画面表示を変えたり
・　メールが送られてきたり
・　ポップアップwindowがでてきたり

さまざまな動きをつけることができます。


また、JavaScriptはwebサイト利用だけにとどまらず
・webアプリ
・スマホアプリ開発
・他のソフトを外から動かす
・機械学習

といったこともできます。


「スクリプト」言語は、比較的簡易にプログラムを書いたり実行できる言語を指します。

JavaScriptの他に
・AppleScript
・VBScript
・Python
・Ruby
・PHP
・シェルスクリプト
などがあります。


　試してみよう！

JavaScriptもCSSと同じように、HTML内に組み込むことも、別ファイルとする事もできます。

簡単な例を試してみましょう。

<!DOCTYPE HTML>
<html>
    <head>
        <title>ぷよぷよプログラミングでお勉強</title>
        <script type="text/javascript">
            function changeBGColor(newColor) {
                document.body.style.backgroundColor = newColor;
            }
        </script>
    </head>

    <body>
        <p>Hello, world!</p>
        <input type="button" value="押してみて！" onclick="changeBGColor('#008000');">
    </body>
</html>

helloWorld4.html

ボタンを押したら背景色が変わります。

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

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

別ファイルバージョンです。
同じ動きをします。

<!DOCTYPE HTML>
<html>
    <head>
        <title>ぷよぷよプログラミングでお勉強</title>
        <script src="helloWorld.js"></script>
    </head>

    <body>
        <p>Hello, world!</p>
        <input type="button" value="押してみて！" onclick="changeBGColor('#008000');">
    </body>
</html>

helloWorld5.html

function changeBGColor(newColor) {
    document.body.style.backgroundColor = newColor;
}

helloWorld.js


まとめ

「ぷよぷよプログラミング」ではwebで使用するプログラミング言語を用いて、ゲームを作ることができます。
・HTML
・CSS
・JavaScript

ざっくり、それぞれこんな感じの言語なんだなとわかっていただければいいと思います。


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


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

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



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