はじめに

目標#

練習の土台となるウェブサイトを作成しよう！

手順#

1.Glitchで『New project』をクリックし『glitch-hello-website』をクリック#

新しいウェブサイトを始めましょう！

2.左のファイル名が並んでいる一覧から`index.html`をクリック#

3.index.html内に書いてあるHTMLを全て削除し、↓のコードをコピー&ペースト#

<!DOCTYPE html><html lang="ja">    <head>        <meta charset="utf-8" />        <meta name="viewport" content="width=device-width, initial-scale=1" />        <title>Hello World!</title>        <!-- デザインに関するファイル(CSS)を読み込む -->        <link rel="stylesheet" href="style.css" />        <!-- 動きに関するファイル(JavaScript)を読み込む -->        <script src="script.js" defer></script>    </head>
    <body>        <!--  Webページの内容はここから下に書く  -->        <h2>好きな食べ物</h2>        <p id="favorite_food"></p>        <h2>好きなこと</h2>        <p id="favorite_things"></p>
        <!-- 日付の表示 -->        <h2>今日の日付</h2>        <p>2021年12月1日</p>
        <!-- 分岐(もしも...) -->        <h2>今日は...</h2>        <p id="today_date"></p>        <!--  Webページの内容はここより上に書く  -->    </body></html>

4.左のファイル名が並んでいる一覧から`style.css`をクリック#

3.style.css内に書いてあるCSSを全て削除し、↓のコードをコピー&ペースト#

CSSはデザインに関するコードです

h2 {    margin-top: 50px;    color: olivedrab;}

5. 自分のWebサイトのURLをDiscordに送ろう！#

(1) 左のサイドバー上部の『Share』ボタンをクリック

(2)『Live site』という文言横のURLをコピーする

(3) WebブラウザのURLを打つ欄にペースト

(4) 目標にしたウェブサイトは表示されたかな？

(5) ウェブサイトのURLをDiscordに送ろう！

ここまでできたら準備はバッチリ！！

次はJavaScriptを使って、ウェブページの内容を書きかえてみよう！

目標#

手順#