はじめに

目標#

Partyコースの型となるウェブサイトを作成しよう！

手順#

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

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

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

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

<!DOCTYPE html><html lang="ja">    <head>        <meta charset="utf-8" />        <title>party course</title>        <link rel="stylesheet" href="./style.css" />        <script src="script.js" defer></script>    </head>
    <body>        <!-- ページトップ　ここから -->        <div class="top-wrapper">            <div class="container">                <h1>Party Course</h1>                <p>一緒に楽しみましょう！！</p>                <p>Unkock Your Potential!!</p>            </div>        </div>        <!-- ページトップ　ここまで -->                <!-- メインコンテンツ　ここから -->        <div class="main-container">            <!-- コンテンツ① -->

            <!-- コンテンツ② -->

            <!-- コンテンツ③ -->
        </div>        <!-- メインコンテンツ　ここまで -->     
    </body></html>

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

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

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

body {    background: #ffc7b3;}
/* タイトル */.container {    width: 1170px;    padding: 0 15px;    margin: 0 auto;}
.top-wrapper {    padding: 100px 40px 150px 40px;    background-image: url("https://i.ibb.co/YZb59mx/party2.jpg");    background-size: cover;    color: white;    text-align: start;}
.top-wrapper h1 {    opacity: 0.7;    font-size: 45px;    letter-spacing: 3px;}
.main-container {    max-width: 1000px;    margin: 50px auto;    text-align: center;}.main-container h2 {    margin-top: 50px;    padding-left: 15px;    color: #333333;    text-align: center;}
/* ↓ コンテンツを追加するときは、ここから下に書いていこう！ */

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

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

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

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

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

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

ここまでできたら準備はバッチリ！！早速、追加コンテンツを実装していこう！

目標#

手順#