JavaScript入門2

JavaScript入門2 JavaScript
この記事は約3分で読めます。

JavaScriptを簡単にわかりやすく、公式に則って勉強していきましょう!

シリーズ一覧はこちら

では通行人のカウンターを作成していきます!

雪が降り寒い外で計測をしているとペンとノート、計測器を持っていると両手がかじかみますよね。なのでパソコン一台でできたらとっても楽ではないですか。そういうわけでこのアプリを作成していきます。

フォルダを作成する

ではまずデスクトップに「Passenger Counter」というフォルダを作ります。

Passenger Counterを作る

次にその「Passenger Counter」の中に以下のように3つのファイルを作成します。左上の「新規作成」→「Microsoft Word 文書」→「index.html」「index.css」をコピペするといいでしょう。拡張子も必ず変えるようにしてください。

フォルダ完成例

中身を記述していく

テキストエディタはダウンロード済みでしょうか。ダウンロードしていなければこちらを参考に、ダウンロードしてあれば以下の手順に進んでください。

index.htmlをテキストエディタで開き、以下をコピペしてください。

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <h1>People entered:</h1>
        <h2 id="count-el">0</h2>
    </body>
</html>

次にindex.cssを開き、以下をコピペしてください。

body {
    background-image: url("station.jpg");
    background-size: cover;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    text-align: center;
}

h1 {
    margin-top: 10px;
    margin-bottom: 10px;
}

h2 {
    font-size: 50px;
    margin-top: 0;
    margin-bottom: 20px;
}

button {
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    font-weight: bold;
    width: 200px;
    margin-bottom: 5px;
    border-radius: 5px;
}

#increment-btn {
    background: darkred;
}

#save-btn {
    background: darkgreen;
}

index.htmlをブラウザで開いたときに以下のような画面になっていれば成功です。

成功の画面

少し解説

ここでindex.htmlの中身を見てみましょう。本当に簡単にできていて、bodyタグの中にはh1タグとh2タグしかありません。index.cssの中身を見ても特に変わってことはしておらず、普通に記述しています。

これからすぐJavaScriptで記述していきますので、あまりここに復習の時間を取らなくても余笹そうです。

お疲れ様でした。今日もよい日をお過ごしください。

コメント

タイトルとURLをコピーしました