VSコードで模写する具体的な流れ

/ コラム / By
今日の実践課題

美容室HPを模写しながら、
VSコードでHTML/CSSを書く流れを覚えよう

要素分けは分かるけど、VSコードを開いたあとに手が止まる人向けの記事です。

HTMLとCSSを勉強したあと、次にやる練習としてよく出てくるのが「模写」です。

でも、実際にやろうとすると、ここで手が止まりませんか？

「VSコードを開いたけど、何から始めればいいの？」

「index.htmlとstyle.cssってどう作るの？」

「HTMLはどこから書けばいいの？」

「CSSは何から整えればいいの？」

これは、才能がないからではありません。

ただ、コーディングを始める流れを知らないだけです。

今日は、美容室HPを題材にして、VSコードでHTML/CSSを書き始める流れを解説します。

今日作るもの

今回は、簡単な美容室HPを作ります。

構成はこの5つです。

  1. ヘッダー
  2. ファーストビュー
  3. コンセプト
  4. メニュー
  5. アクセス・予約ボタン

美容室HPは、模写の練習にかなり向いています。

理由は、必要なパーツが分かりやすいからです。

ヘッダーには店名とメニュー。

ファーストビューには大きな画像とキャッチコピー。

コンセプトにはお店の説明。

メニューには料金。

最後にアクセスと予約ボタン。

実案件でもよく出る構成なので、練習としても使いやすいです。

Lumiere
Hair Salon

毎日が少し
好きになる髪へ。

自然体の美しさを引き出す美容室。

予約する
Concept
Menu
Access

ステップ1：作業フォルダを作る

まず、VSコードを開く前に作業フォルダを作ります。

今回は分かりやすく、フォルダ名を次のようにします。

salon-mosha

その中に、2つのファイルを作ります。

salon-mosha
  index.html
  style.css

初心者はここで迷いやすいです。

最初は、HTMLとCSSの2つだけでOKです。

ステップ2：VSコードでフォルダを開く

次に、VSコードを開きます。

ここで大事なのは、ファイル単体ではなく、フォルダごと開くことです。

VSコードを開く
ファイル
フォルダーを開く
salon-moshaを選ぶ

これで、左側に作業フォルダが表示されます。

そこに、次の2つを作ってください。

index.html
style.css

ステップ3：index.htmlに基本形を書く

まずは、index.html にHTMLの基本形を書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>美容室HP</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

特に大事なのは、この1行です。

<link rel="stylesheet" href="style.css">

これは、HTMLとCSSをつなぐコードです。

これがないと、style.css にCSSを書いても画面に反映されません。

CSSが効かない人は、まずここを確認してください。

ステップ4：まず大きな箱だけHTMLで置く

いきなり細かい文字やデザインを書かなくてOKです。

まずは、美容室HPの大きな箱だけ置きます。

<header>
  ヘッダー
</header>

<main>
  <section>
    ファーストビュー
  </section>

  <section>
    コンセプト
  </section>

  <section>
    メニュー
  </section>

  <section>
    アクセス
  </section>
</main>

<footer>
  フッター
</footer>

この段階では、デザインは気にしません。

大事なのは、ページ全体を大きな箱で見ることです。

「全部作る」と考えると難しいですが、「まず大きな箱だけ置く」と考えると手が動きます。

ステップ5：ファーストビューだけ中身を入れる

次に、ファーストビューだけ作ります。

最初から全部のセクションを完成させようとしなくてOKです。

ファーストビューに必要なものは、この4つです。

  1. ラベル
  2. キャッチコピー
  3. 説明文
  4. 予約ボタン

HTMLにするとこうです。

<section class="hero">
  <p class="hero-label">Hair Salon in Fukuoka</p>
  <h1 class="hero-title">毎日が少し好きになる髪へ。</h1>
  <p class="hero-text">自然体の美しさを引き出す美容室。</p>
  <a href="#" class="button">予約する</a>
</section>

画面の上にあるものから順番に書くことが大事です。

ラベル、見出し、説明文、ボタン。この順番でHTMLを書けばOKです。

ステップ6：class名をつける

CSSでデザインを整えるために、class名をつけます。

<section class="hero">
  <p class="hero-label">Hair Salon in Fukuoka</p>
  <h1 class="hero-title">毎日が少し好きになる髪へ。</h1>
  <p class="hero-text">自然体の美しさを引き出す美容室。</p>
  <a href="#" class="button">予約する</a>
</section>

class名は、最初から完璧に考えなくて大丈夫です。

hero
hero-label
hero-title
hero-text
button

初心者のうちは、このくらいシンプルでOKです。

見たまま名前をつければ大丈夫です。

ステップ7：ブラウザで確認する

HTMLを書いたら、すぐにブラウザで確認します。

書く
見る
直す

コーディングは、この繰り返しです。

おすすめは、VSコードの拡張機能 Live Server を使うことです。

index.htmlを開く
右クリック
Open with Live Server

これで、ブラウザに表示されます。

最初は、ただ文字が並んでいるだけでOKです。

この時点でおしゃれじゃなくても問題ありません。

ステップ8：style.cssにCSSを書く

HTMLができたら、次にCSSを書きます。

最初に書くのは、基本設定です。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: #333;
  font-family: sans-serif;
  line-height: 1.8;
}

次に、ファーストビューを整えます。

.hero {
  padding: 120px 24px;
  background: #f4e5da;
  text-align: center;
}

.hero-title {
  font-size: 42px;
  line-height: 1.5;
}

.hero-text {
  margin-top: 20px;
}

.button {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 28px;
  border-radius: 999px;
  background: #b8866b;
  color: #fff;
  text-decoration: none;
}

CSSは、いきなり全部書かなくて大丈夫です。

まずはファーストビューだけでOKです。

CSSを書く順番

CSSを書く時は、この順番で見てください。

  1. 横幅
  2. 余白
  3. 並び方
  4. 文字
  5. 色・装飾

初心者は、最初に色や角丸を触りがちです。

でも、最初に見るべきなのは余白と並び方です。

美容室HPなら、余白を広めに取る。

文字を読みやすくする。

背景をやわらかい色にする。

ボタンを丸くする。

この流れで整えると、美容室らしい雰囲気になります。

今日の宿題

今日の宿題は5つです。

完了：0 / 5

宿題1：作業フォルダを作る

フォルダ名は、次の名前にしてください。

salon-mosha

その中に、次の2つを作ります。

index.html
style.css

宿題2：HTMLの基本形を書く

index.html にHTMLの基本形を書いてください。

特に大事なのは、この1行です。

<link rel="stylesheet" href="style.css">

CSSが反映されない人は、ここが抜けていることが多いです。

宿題3：大きな箱だけHTMLで置く

まずは、細かい中身は入れなくてOKです。

<header>ヘッダー</header>

<main>
  <section>ファーストビュー</section>
  <section>コンセプト</section>
  <section>メニュー</section>
  <section>アクセス</section>
</main>

<footer>フッター</footer>

これを書いて、ブラウザで表示してください。

宿題4：ファーストビューだけ作る

ファーストビューだけ、HTMLを書いてください。

入れるものは4つです。

  • ラベル
  • キャッチコピー
  • 説明文
  • 予約ボタン

宿題5：CSSでファーストビューだけ整える

いきなり全部作らなくてOKです。

今日はファーストビューだけCSSを書きます。

見るポイントはこれです。

  • 余白
  • 背景色
  • 文字サイズ
  • 中央寄せ
  • ボタン

LINEへの提出内容

今日の宿題ができた人は、LINEに

美容室模写

と送ってください。

送る内容はこれです。

1. 作ったフォルダ名：

2. 作ったファイル：

3. HTMLで作った大きな箱：

4. ファーストビューに入れた要素：

5. CSSで整えた場所：

例はこちらです。

1. 作ったフォルダ名：salon-mosha

2. 作ったファイル：index.html / style.css

3. HTMLで作った大きな箱：header、main、section、footer

4. ファーストビューに入れた要素：ラベル、h1、説明文、予約ボタン

5. CSSで整えた場所：背景色、余白、文字サイズ、ボタン

読むだけで終わると、またVSコードを開いた時に手が止まります。

でも、今日この5つをやれば、フォルダを作る、HTMLとCSSを作る、HTMLで大きな箱を置く、ファーストビューだけ作る、CSSで整える流れがつかめます。

最初から完璧な美容室HPを作る必要はありません。

まずはファーストビューだけでOKです。

LINEで「美容室模写」と送る

ボタンを押した後、LINEのトーク画面で「美容室模写」と送信してください。