はじめに

目標#

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

手順#

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>event course</title>        <link rel="stylesheet" href="./style.css" />        <script src="script.js" defer></script>    </head>
    <body>        <!-- ページトップ　ここから -->        <div class="top-wrapper">            <div class="container">                <h1>Event Course</h1>                <h1>定期演奏会のお知らせ</h1>                <p>Music Club Waffle では、年に1回演奏会を開催します</p>                <p>ぜひお越しください</p>            </div>        </div>        <!-- ページトップ　ここまで -->
        <!-- 左側のコード ここから -->        <div class="main-container">            <div class="left-column">                <!-- タイトル -->                <h2>Event Course</h2>
                <div class="contents">                    <!-- 文章はこちらを書き換える -->                    <h3>開催日時</h3>                    <p>2021年3月20日</p>                    <h3>プログラム</h3>                    <ul>                        <li>ピアノの部</li>                        <li>バイオリンの部</li>                        <li>休憩</li>                        <li>全体合奏</li>                    </ul>                    <h3>みどころ</h3>                    <p>毎日たくさん練習した成果を、多くの方に届けたいです。</p>                    <p>                        高校3年生は、これが最後の発表会です。これまでの想いをこの発表会に込めます。                    </p>                    <p>                        バイオリンの部では、私たちClubの代表がソロパートを演奏します。<br />                        たくさん練習したので、是非楽しみにしてください                    </p>                </div>            </div>            <!-- 左側のコード ここまで --> 
            <!-- 右側のコード　ここから -->            <div class="right-column">                <div class="contents">                <!-- コンテンツ①: 各コンテンツは<div class="contents"></div>の中に入れよう -->                </div>
                <div class="contents">                <!-- コンテンツ②: 各コンテンツは<div class="contents"></div>の中に入れよう -->                </div>
                <div class="contents">                <!-- コンテンツ③: 各コンテンツは<div class="contents"></div>の中に入れよう -->                </div>            </div>            <!-- 右側のコード　ここまで -->        </div>    </body></html>

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

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

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

body {    /* ページ全体の色はここ↓で変更できるよ */    background-color: aliceblue;}
/* タイトル */.container {    width: 1170px;    padding: 0 15px;    margin: 0 auto;}
.top-wrapper {    padding: 100px 40px 200px 40px;    background-image: url(./imgs/piano.jpg);    background-size: cover;    color: white;    opacity: 0.7;    text-align: start;}
.top-wrapper h1 {    font-size: 45px;    letter-spacing: 3px;}
.main-container {    max-width: 1000px;    margin: 50px auto;    display: flex;    flex-wrap: wrap;}
.left-column {    /* 左側の割合 */    /* 左右のバランスを変えたいときはここを調整しよう */    width: 70%;}.right-column {    /* 右側の割合 */    width: 30%;}
/* ページ全体の構成 */.wrapper {    display: flex;    justify-content: space-around;    max-width: 1000px;    margin: 0 auto;}.wrapper h2 {    margin-top: 0;}.wrapper-sub {    text-align: center;}
.wrapper-sub img {    margin: 10px auto;}
/* ↓ コンテンツを追加するときは、ここから下に書いていこう！ */

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

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

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

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

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

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

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

目標#

手順#