はじめてのWebページ

この講座ではハンズオンでWebページを制作しインターネット公開するところまで解説します。

💡

この講座のゴール

はじめてのWebページをインターネット上に公開すること

制作の準備

my-first-webという名称でPC上にフォルダを作成
作成したフォルダをVSCode開く

以下の画面を開くことができていれば大丈夫です。

必要なファイルの作成

さっそく必要なファイルを作成していきましょう。ファイルの作成は画像の赤枠で囲ってあるNewFileのアイコンをクリックすることで作成可能です。

作成するファイルは2つです。

index.html

style.css

この2つを作成しましょう。

このように左側の列にファイルが増えていれば成功です。

ここでVScodeにWeb制作をする上で便利な拡張機能をインストールしておきましょう。①のアイコンをクリックすると②の入力欄が表示されるので、そちらに「Live」と打ち込んでください。すると「Live Server」という拡張機能が表示されるので、そちらをinstallしてください。

VSCodeの右下にGo Liveという文字が表示されていれば成功です。

index.htmlの編集

ここからはさっそくindex.htmlを編集しておきましょう。今は何も入力されていないindex.htmlがあると思います。

この状態で「!」を入力しTabを押してみてください。

すると、上記のようにひな型が簡単に作成できます。今回はこちらを編集していきましょう。

まず最初にやることは言語の設定です。今のひな型の言語の設定は英語になっていますので、そちらを日本語に変更します。

<html lang="en">の箇所を<html lang="ja">に変更してください。以下のような形です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

これでこちらのページの言語は日本語であるということが宣言できました。

次にタイトルを編集しましょう。

<title>Document</title>を <title>はじめてのWebページ</title>と変更してください。

こちらはWebページのタイトルとなります。ブラウザのタブなどに表示される文字列ですね。

さて、最後にBodyにコンテンツを作成しましょう。

<body>
  <h1>はじめてのWebページ</h1>
  <p>これは私の最初のWebページです。</p>
</body>

このようにbodyタグの中に追加してみてください。bodyの中が実際にWebページを閲覧するユーザにみえる部分となります。

ここで終わると、このような形になっていると思います。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>はじめてのWebページ</title>
</head>

<body>
  <h1>はじめてのWebページ</h1>
  <p>これは私の最初のWebページです。</p>
</body>

</html>

では、こちらをプレビュー表示してみましょう。VSCode右下のGo Liveをクリックしてみてください。

既定のブラウザが起動し以下のように表示されましたか？

おめでとうございます。Webページのひな型が作成できました。

CSSを適用する

Webページのひな型が作成できたので次は見た目を装飾していきましょう。

事前に作成しておいたstyle.cssを開いていただき以下のように打ってみてください。

    body {
      background-color: #8bda84;
      font-family: Arial, sans-serif;
    }

    h1 {
      color: #2c3e50;
    }

    p {
      color: #7f8c8d;
    }