More than 1 year has passed since last update.

Tech School for Change Makers

【今更聞けない】HTML/CSS/JavaScript でWebページをつくろう

Last updated at 2022-09-21Posted at 2022-07-28

YouTube

こちらの記事は、2022年7月29日18:00~19:30 YouTubeライブ配信の資料です。

▼ イベントページ↓↓↓

Webページをつくる前に

マークダウン記法をご存知ですか？

▼マークダウン記法サンプル集↓↓↓
https://qiita.com/tbpgr/items/989c6badefff69377da7

Webページをつくろう!

エンジニアへの第一歩『Visual Studio code』

プログラミングを書く場所（エディタ）は Visial Studio Code を使います。

HTML

Hello World!

拡張子は.html。
（ファイル名は、例えばindex.htmlのように最後が.htmlとなってます）

新規ファイルを作成で、 index.html というファイルを作り、 Visial Studio Code で開きます。

中身に、 Hello World! と書いて、ブラウザで中身を表示してみます。

index.html

<h1>Hello World!</h1>

※<h1> というタグで囲ってあげると、見出しとなり文字が大きく表示されます。

タグについて

<h1>Hello World!</h1>は消して、下記のプログラムをコピー＆ペーストしてください。

index.html

<!DOCTYPE html>
<html>
  <head>
    （headタグで囲まれた部分には「付加情報」を記述）
  </head>

  <body>
    （bodyタグで囲まれた部分には「コンテンツ」を記述）
  </body>
</html>

<!DOCTYPE html>... HTML5を利用するよ！という意味。「おまじない」と思えばOK。
タグとは、<と>で囲まれたもののこと。

　　（例）headタグとは、<head>のこと。

HTMLのタグは、約110種類あります。そのうち、半分も知っていれば、充分フロントエンジニアとして働けるレベルです。なので、全部覚えようとしなくてOK。HTMLファイルには必ずheadとbodyがあり、ブラウザの中に表示されている部分はbodyの中に、それ以外のタイトルとかはheadに記載するということを、まずは覚えておきましょう。

HTML記述例

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Webページのタイトルをここに書きます</title>
    <meta charset="utf-8" />
  </head>

  <body>
    <h1>1番大きい見出し（見出し1）</h1>
    <h2>次に大きい見出し（見出し2）</h2>
    <p>段落の塊はpタグの中に記述していきます</p>
    <h3>3つ目に大きい見出し（見出し3）</h3>
    <ul>
      <li>サッカー</li>
      <li>野球</li>
      <li>テニス</li>
    </ul>
  </body>
</html>

ブラウザで確認してみよう！

CSS

CSSは、絵を描いたり、デザインが好きな人、几帳面な人は、CSSを学ぶのはオススメです！
固定概念ですが、男性はCSSが苦手な人が多く、女性はCSSが好きな人が多い印象です。女性にデザイナーさんが多かったり、男性でもおしゃれでエンジニアっぽくないちょっとチャラそうなモテそうな人が多いのにも共通するところがありそうです。繰り返しますが、固定概念です。

3通りのCSSの書き方

CSSには書き方が3通りあります。

「style属性」として記述（pタグなど「タグの中」に記述）
「styleタグ」の中に記述（HTMLファイルの「headタグの中」に記述）
外部ファイルに記述（linkタグで呼び出す）

「style属性」としてCSS記述

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Webページのタイトルをここに書きます</title>
    <meta charset="utf-8" />
  </head>

  <body>
    <h1 style="color: red;">1番大きい見出し（見出し1）</h1>
    <h2>次に大きい見出し（見出し2）</h2>
    <p>段落の塊はpタグの中に記述していきます</p>
    <h3>3つ目に大きい見出し（見出し3）</h3>
    <ul>
      <li>サッカー</li>
      <li>野球</li>
      <li>テニス</li>
    </ul>
  </body>
</html>

HTMLファイル内の特定の要素（タグの中身）に直接CSSをあてています。
ブラウザで確認してみよう！

「styleタグ」の中に記述

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Webページのタイトルをここに書きます</title>
    <meta charset="utf-8" />
    <style type="text/css">
      p {
        color: red;
        text-align:center;
      }
    </style>
  </head>

  <body>
    <h1>1番大きい見出し（見出し1）</h1>
    <h2>次に大きい見出し（見出し2）</h2>
    <p>段落の塊はpタグの中に記述していきます</p>
    <h3>3つ目に大きい見出し（見出し3）</h3>
    <ul>
      <li>サッカー</li>
      <li>野球</li>
      <li>テニス</li>
    </ul>
  </body>
</html>

HTMLファイル内のheadタグの中に、CSSを記述しています。
ブラウザで確認してみよう！

CSSは、下記のように記述します。

タグ名 {
	プロパティ名: 値;
}

.class名 {
	プロパティ名: 値
}

#id名 {
	プロパティ名: 値
}

CSSでは、タグを指定するだけでなく、classには.、idには#をつけて指定をすることができます。

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Webページのタイトルをここに書きます</title>
    <meta charset="utf-8" />
    <style type="text/css">
      .danraku {
        color: red;
        text-align:center;
      }
      #tennis {
        color: #c0e92c;
      }
    </style>
  </head>

  <body>
    <h1>1番大きい見出し（見出し1）</h1>
    <h2>次に大きい見出し（見出し2）</h2>
    <p class="danraku">段落の塊はpタグの中に記述していきます</p>
    <h3>3つ目に大きい見出し（見出し3）</h3>
    <ul>
      <li>サッカー</li>
      <li>野球</li>
      <li id="tennin">テニス</li>
    </ul>
  </body>
</html>

ブラウザで確認してみよう！

外部ファイルに記述

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Webページのタイトルをここに書きます</title>
    <meta charset="utf-8" />
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <h1>1番大きい見出し（見出し1）</h1>
    <h2>次に大きい見出し（見出し2）</h2>
    <p class="danraku">段落の塊はpタグの中に記述していきます</p>
    <h3>3つ目に大きい見出し（見出し3）</h3>
    <ul>
      <li>サッカー</li>
      <li>野球</li>
      <li id="tennin">テニス</li>
    </ul>
  </body>
</html>

test.css

.danraku {
  color: red;
  text-align:center;
}

#tennis {
  color: #c0e92c;
}

通常、HTMLのファイルの中に直接CSSは書きません。違うファイルに書きます。
「外部ファイル」としてCSSを呼び出すために、拡張子を.cssとしています。
ブラウザで確認しよう！

Bootstrap（ブートストラップ）

Bootstrapを使うと、CSSを頑張って書かなくても、デザインが既に何パターンか用意されています。（すきずき）

JavaScript

Webサイトを開いたときに、ポップアップ画面が出てきたり、画像が何枚も切り替わったりするページをご覧になった経験があると思います。あのような「動く」仕組みを、JavaScriptでは実装していきます。JavaScriptは様々な使い方ができてしまうので、今回は「どこに書くのか」と「動きがつけられる」だけ、まずは覚えていきましょう。

2通りのJavaScriptの書き方

JavaScriptには書き方が2通りあります。

「scriptタグ」の中に記述
外部ファイルに記述（scriptタグで呼び出す）

「scriptタグ」の中に記述

sample.html

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    <p>Hello World!</p>

    <script type="text/javascript">
      alert("このページはとても安全です！");
    </script>
  </body>
</html>

HTMLファイルの中に、headタグ内もしくはbodyタグの一番最後にscriptタグを記述します。
ブラウザで確認しよう！

外部ファイルに記述

sample.html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="test.js"></script>
  </head>

  <body>
    <p>Hello World!</p>
  </body>
</html>

test.js

alert("このページはとても安全です！");

「外部ファイル」としてJavaScriptを呼び出すために、拡張子を.jsとしています。
ブラウザで確認しよう！

[挑戦①] おみくじゲーム

Webでおみくじができる遊びの作り方動画を公開しています。JavaScriptの練習にぜひ。

[挑戦②] Chart.js

リッチなグラフが作成できるツールです。JavaScriptの練習にぜひ。

chart.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </head>

  <body>
    <canvas id="myChart"></canvas>
    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'line',
    
            // The data for our dataset
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'My First dataset',
                    backgroundColor: 'rgb(225, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: [0, 10, 5, 2, 20, 30, 45]
                }]
            },
    
            // Configuration options go here
            options: {}
        });
        const myLineChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: options
        });
        </script>
  </body>
</html>

Webページを公開しよう

Googleが提供しているFirebaseのホスティングという機能で、誰でも無料でWebページを公開できます。

YouTubeでも、やり方を紹介しています。

プロジェクトを作成

GoogleアカウントでFirebaseのコンソール(管理画面)にログインをして、「プロジェクトを作成」を押してください。

【注意】

プロジェクト名を入力する際、入力したプロジェクト名がサブドメインとして使われます。
※サブドメインとは、nakajo.firebase.com がURLだとすると、nakajo の部分です)

一度設定したら二度と変更することはできないので慎重に...

その他は、利用規約などにチェックを入れつつ「続行」を繰り返していけば、プロジェクトが作成されます。

また、npm が使える方は、下記の記事をご参考までに。
https://iwb.jp/firebase-noftp-website-upload/

Firebase CLI をダウンロード

Firebase CLI リファレンス
https://firebase.google.com/docs/cli

上記リンクからダウンロードをして、Googleアカウントの認証が終わったら、下記2行を順番に、コンソール画面に打ってみましょう。
Visual Studio Code の上のメニューバーから、「Terminal」の中の「New Terminal」を選択してください。そうすると、下にコンソール画面が立ち上がると思います。

$ firebase --version
$ firebase login

ログインできたら、次のコマンドを入力。

$ firebase init

質問が色々と聞かれるのですが、「Firebaseのどの機能を使いますか？」の質問の選択肢で Hosting を選ぶことに気をつけながら、あとはEnterキーで次に進んでください。

HTMLファイルをアップロード

public のフォルダの中に、アップロードをしたいHTMLファイルを入れて、下記のコマンドを打ちます。

$ firebase deploy

成功すると、URLが書いてあるので、それをコピーしてください。

ブラウザで確認してみよう！

再度、変更する時にはもう一度下記の同じコマンドを打つだけです。

$ firebase deploy

Firebase のコンソール画面も、とても見やすいので、URLが無事に開いていたらそちらも確認してみましょう。

筆者に関して

Twitter

お気軽にフォローしてください

YouTube

チャンネル登録と動画の高評価もよろしくお願いいたします。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【今更聞けない】HTML/CSS/JavaScript でWebページをつくろう

YouTube

Webページをつくる前に

Webページをつくろう!

エンジニアへの第一歩 『Visual Studio code』

HTML

Hello World!

タグについて

HTML記述例

CSS

3通りのCSSの書き方

「style属性」としてCSS記述

「styleタグ」の中に記述

外部ファイルに記述

Bootstrap（ブートストラップ）

JavaScript

2通りのJavaScriptの書き方

「scriptタグ」の中に記述

外部ファイルに記述

[挑戦①] おみくじゲーム

[挑戦②] Chart.js

Webページを公開しよう

プロジェクトを作成

【注意】

Firebase CLI をダウンロード

HTMLファイルをアップロード

筆者に関して

Twitter

YouTube

エンジニアへの第一歩『Visual Studio code』