はじめに

目標#

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

手順#

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>gallery course</title>        <link rel="stylesheet" href="./style.css" />        <script src="script.js" defer></script>    </head>
    <body>        <!-- ページトップ　ここから -->        <div class="top-wrapper">            <div class="container">                <h1>Gallery Course</h1>                <h1>My favorite Coffee Shops</h1>                <p>私がよく行くおすすめのカフェを紹介します</p>                <p>皆さんもぜひ行ってみてください</p>            </div>        </div>        <!-- ページトップ　ここまで -->
        <!-- メインコンテンツ　ここから -->        <div class="main-container">            <h2>ミニタイトル</h2>
            <!-- コンテンツ① -->

            <!-- ギャラリー表示　ここから -->            <div class="gallery">                <div class="card">                    <img                        src="https://i.ibb.co/0Dzt98g/cafe1.jpg"                        alt="cafe1"                        border="0"                    />                    <h3>Waffle Cafe</h3>                    <p>落ち着いたデザインがおしゃれなカフェ</p>                </div>                <div class="card">                    <img                        src="https://i.ibb.co/0Dzt98g/cafe1.jpg"                        alt="cafe1"                        border="0"                    />                    <h3>Egg Cafe</h3>                    <p>                        卵料理がおすすめのお店。ふわふわのオムレツが食べられます                    </p>                </div>                <div class="card">                    <img                        src="https://i.ibb.co/0Dzt98g/cafe1.jpg"                        alt="cafe1"                        border="0"                    />                    <h3>Tomato Cafe</h3>                    <p>元気いっぱいのデザインで、いくと元気が出るカフェ</p>                </div>            </div>            <!-- ギャラリー表示　ここまで -->

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

        </div>        <!-- メインコンテンツ　ここから -->    </body></html>

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

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

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

* {    box-sizing: border-box;}
/* タイトル */.container {    width: 1170px;    padding: 0 15px;    margin: 0 auto;}
.top-wrapper {    padding: 100px 40px 150px 40px;    background-image: url("https://i.ibb.co/ysHSjdF/header-img.jpg");    background-size: cover;    color: black;    opacity: 0.7;    text-align: start;}
.top-wrapper h1 {    font-size: 45px;    letter-spacing: 3px;}
.main-container {    max-width: 1000px;    margin: 50px auto;}.main-container h2 {    border-left: 5px solid orangered;    padding-left: 15px;    color: #333333;    margin-left: 20px;}
/* ギャラリー */.gallery {    display: flex;    flex-wrap: wrap;    margin-top: 20px;}/* カード */.card {    width: 28%;    text-align: center;    background-color: bisque;    border: 1px solid #333333;    border-radius: 5px;    color: #666666;    padding: 20px;    margin: 20px;}
.card img {    width: 100%;    height: 60%;}
/* ↓ コンテンツを追加するときは、ここから下に書いていこう！ */

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

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

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

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

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

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

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

目標#

手順#