More than 1 year has passed since last update.

サイトを作って学ぶ、HTML,CSS講座

Last updated at 2023-02-22Posted at 2023-02-22

はじめに

はじめまして。忍者CODEの大丸です。
この講座は、初心者の方の為に、簡単なWebサイトを一から作る講座です。
流れ通りにコピー＆ペーストで進めていくだけで、簡単なWebサイトが作れます。

完成例

Visual Studio Codeを使ってみよう

Web制作で多くのクリエイターに使われているエディター「Visual Studio Code」をインストールしてみよう！

VSCodeをインストールしよう

ここからダウンロード
ダウンロードしたら、お使いのパソコンにインストールしてください。

ダウンロードされたファイルを開きます
「同意する」を押して次へ
しばらくそのまま次へを押す
「インストール」を押す
「完了」を押したら終わりです

HTMLファイルを作成してみよう

ファイルの作成のショートカット
Windows：「Ctrl」+「n」
Mac：「Command」+「n」

ファイルの保存（ファイル名はindex.htmlが基本）
Windows：「Ctrl」+「s」
Mac：「Command」+「s」

HTMLを書いてみよう

先ほど作成したHTMLファイルに「!」を押して
「Tab」キーを押すと...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

このようなコードが生成されます。

それでは、このHTMLファイルをブラウザで開きましょう。

サイトを確認

このままだと、サイトのタイトルが「Document」のままなので
titleタグの中の「Document」を、「忍者CODEオンライン勉強会」に変更しましょう。

いよいよここからが本番です。

ヘッダーを作ろう

「body」の直下にグローバルナビのHTMLコードをコピー&ペーストしてください。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<!-- ここから -->
  <header>
    <h1>ロゴ</h1>
    <nav>
      <ul>
        <li>このサイトについて</li>
        <li>コース一覧</li>
        <li>スペシャルコンテンツ</li>
      </ul>
    </nav>
  </header>
<!-- ここまで -->
</body>
</html>

これでヘッダーができました。
「h1」タグはサイトのタイトルで、
「nav」タグはナビゲーションを表しています。
「ul」「li」タグはリストを意味します。

それではもう一度、HTMLファイルをブラウザで確認してみましょう！

現在までのサイトを確認

リンクタグを入れよう

実は先ほどのコードだけでは、グローバルナビとして機能しません。
aタグというURLにリンクさせる機能をもつタグを入れて、グローバルナビとしての機能を持たせます。

<header>
  <h1>
    <a href="">ロゴ</a>
  </h1>
  <nav>
    <ul>
      <li>
        <a href="">このサイトについて</a>
      </li>
      <li>
        <a href="">コース一覧</a>
      </li>
      <li>
        <a href="">スペシャルコンテンツ</a>
      </li>
    </ul>
  </nav>
</header>

すると先ほどのグローバルナビにリンク機能が追加され、マウスで押せるようになりました。
本来であれば、下層ページや別のサイトのURLを指定しますが、今回は割愛します。

現在までのサイトを確認
以上でヘッダーは終了です！

サイトの中身（コンテンツ）を作ろう

Webサイトのコンテンツを作りましょう。
コンテンツはWebサイトで一番大事な要素です。

コンテンツには「main」タグを使用します。
「header」タグの下に「main」タグを入れてみましょう。

<header>
  <h1>
    <a href="">
      <img src="https://ninjacode.work/study_meeting/img/logo.png" alt="忍者CODE">
    </a>
  </h1>
  <nav>
    <ul>
      <li>
        <a href="">このサイトについて</a>
      </li>
      <li>
        <a href="">コース一覧</a>
      </li>
      <li>
        <a href="">スペシャルコンテンツ</a>
      </li>
    </ul>
  </nav>
</header>
<main>
  <!-- この中にコンテンツを書いていきます。 -->
</main>

画像を追加しよう

次にWebサイトの顔ともいえるメイン画像（メインビジュアル）を追加します。
画像を追加する際は「img」タグを使用します。
「main」タグの中に以下の「img」タグを張り付けてください。

<main>
  <img src="https://ninjacode.work/study_meeting/img/main.jpg" alt="">
</main>

src属性で画像のパスを指定しています。
ファイルを保存して、ブラウザで確認してみると画像が表示されます。

現在までのサイトを確認

ロゴの画像を追加しよう

画像の表示の仕方を覚えたところで、今度はロゴ画像を表示させてみましょう。
先ほど作ったヘッダーの中の「h1」

<h1>
  <a href="">
    <img src="https://ninjacode.work/study_meeting/img/logo.png" alt="忍者CODE">
  </a>
</h1>

alt属性には画像が持っている意味を入力します。
それではブラウザで確認してみましょう！

現在までのサイトを確認
今回は「a」タグの中に「img」タグを挿入したので、画像にリンクの機能が追加されています。

見出しと文章を作ろう

見出しと文章はWebサイトの基本です。
今回は「h」タグ、「p」タグ、「br」タグを使います。

それぞれ解説します。

「h」タグは見出し、タイトルのことで、タグで表すと「h1」「h2」「h3」などがあります。

例えばカレーライスの作り方で例をあげますと

h1 カレーの作り方
　h2 用意する材料
　　　h3 野菜
　　　h3 お肉
　　　h3 調味料
　h2 料理する手順
　　　h3 具材をカットします
　　　h3 具材を炒めます

といった具合です。
なので、「忍者CODE」というh1の下に
「このサイトについて」「コース一覧」「スペシャルコンテンツ」という「h2」が入る
といった認識で見出しをつけていきます。

「p」タグとは一まとまりの文章を意味します。タグの中に「br」タグをつけると改行されます。

それでは、実際にコードを書いていきます。

<main>
  <img src="https://ninjacode.work/study_meeting/img/main.jpg" alt="">
　
　<h2>このサイトについて</h2>
  <p>このサイトは、忍者CODEオンライン勉強会で使用するサイトです。<br>
  コピペのみでWebサイトが簡単に作れるので、ブックマークして練習してみてください。</p>

  <h2>コース一覧</h2>
  <h3>HTML</h3>

  <h2>スペシャルコンテンツ</h2>
　<h3>期間限定キャンペーン</h3>

</main>

「main」タグの中に「h2」「h3」タグをそれぞれ入れました。
現在はこのようになっているはずです↓

現在までのサイトを確認

コンテンツを追加しよう

少し複雑になってきましたが、あと一歩です。

コンテンツをより詳細に追加します。

ここで整理の為に、コンテンツを追加したすべてのコードを載せておきます。
うまく表示されていない方がいらっしゃったらコピー＆ペーストしてください。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>忍者CODEオンライン勉強会</title>
</head>
<body>
<header>
  <h1>
    <a href="">
      <img src="https://ninjacode.work/study_meeting/img/logo.png" alt="忍者CODE">
    </a>
  </h1>
  <nav>
    <ul>
      <li>
        <a href="">このサイトについて</a>
      </li>
      <li>
        <a href="">コース一覧</a>
      </li>
      <li>
        <a href="">スペシャルコンテンツ</a>
      </li>
    </ul>
  </nav>
</header>
<main>
  <img src="https://ninjacode.work/study_meeting/img/main.jpg" alt="">
  <h2>このサイトについて</h2>
  <p>このサイトは、忍者CODEオンライン勉強会で使用するサイトです。<br>
  コピペのみでWebサイトが簡単に作れるので、ブックマークして練習してみてください。</p>

  <h2>コース一覧</h2>
  <h3>HTML</h3>
  <p>初級コース</p>
  <a href="">詳細はコチラ</a>
  <p>中級コース</p>
  <a href="">詳細はコチラ</a>
  <p>上級コース</p>
  <a href="">詳細はコチラ</a>

  <h2>スペシャルコンテンツ</h2>
　<h3>期間限定キャンペーン</h3>
  <a href="https://koga.ninjacode.site/">
    <img src="https://ninjacode.work/study_meeting/img/banner.png" alt="甲賀30,000円割引キャンペーン">
  </a>

</main>
<!-- ここにfooterを追加 -->
</body>
</html>

現在のコードをブラウザで確認しましょう。

現在までのサイトを確認

フッターを作ろう

ここまで来たらあと一歩です！

最後にWebサイトの下部を表すフッターを作ります。
フッターは名前の通り「footer」タグで表します。
「main」タグの下に書いてみましょう。
フッターの中身はヘッダーで作ったナビの、より詳細な内容を記載するのが一般的です。

<footer>
  <ul>
    <li><a href="">TOP</a></li>
    <li><a href="">このサイトについて</a></li>
    <li><a href="">コース一覧</a></li>
    <li><a href="">スペシャルコンテンツ</a></li>
  </ul>
  <small>© ninjacode INC. ALL RIGHTS RESERVED.</small>
</footer>

ここで新たに「small」タグとtarget="_blank"属性が登場しました。

「small」とはコピーライトに使用されるタグ
target="_blank"属性とは他のサイトに飛ばすときに使う属性

これですべてのHTMLの工程が完了しました！お疲れ様でした！
現在のコードをブラウザで確認しましょう。

現在までのサイトを確認

CSSを使ってみよう

それでは最後の仕上げです。
CSSでHTMLのデザインを作りましょう。

リセットCSSの追加

リセットCSSとは、ブラウザごとに微妙に違う設定を統一してくれるCSSコードになります。

まずHTMLファイル上部の「head」タグの一番下に以下のコードを追加します。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"
/>

すると以下のコードになりますね。

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>忍者CODEオンライン勉強会</title>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"
  />
</head>

この状態でブラウザで確認するとどうでしょう。

現在までのサイトを確認
余白がなくなりました。

イメージでいうと
ブラウザをリセットCSSで真っ白いキャンバスにして、
新しくこれから追加するCSSで絵を描いていこう！
といった具合です。

デザイン用のCSSの追加

これからサイトのデザイン用のCSSを作成していきます。
本来CSSファイルは、別ファイルを作成して記述するのが一般的ですが、
今回は複雑になるのを避けるために、そのままHTMLファイルに記述していきます。

「style」タグを使って以下の場所にCSSを記述しましょう。

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>忍者CODEオンライン勉強会</title>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"
  />
　<style>
    /* この中にCSSを書いていきます。 */
  </style>
</head>

CSSの記述方法

CSSはHTMLを要素を指定して、色や大きさを指定できる言語です。
指定の仕方はとてもシンプルで、例えば

<style>
  header {
    background: #000;
    color: #fff;
  }
</style>

このように記述すると
HTMLファイルの中のheaderタグの背景を黒に
文字色を白に変更できます。

それでは実際にブラウザでどのようになっているか見てみましょう。

現在までのサイトを確認

headerの色が変わっていますね。

その他にも
headerタグの中のaタグを指定する場合には以下のように続けて指定します。

<style>
  header a {
    color: #fff;
  }
</style>

しかしこのような指定方法でCSSを書いてしまうと、サイトが複雑になったときに
CSSのコードも複雑になってしまいます。

次に複雑にならない方法をご紹介します。

class属性

class属性とはHTMLのタグに名前を付けて
CSSで指定しやすくする方法です。

<footer>
  <ul>
    <li><a href="">TOP</a></li>
    <li><a href="">このサイトについて</a></li>
    <li><a href="">コース一覧</a></li>
    <li><a href="">スペシャルコンテンツ</a></li>
  </ul>
</footer>

例えば、上記のコードで「TOP」という文字の色だけ赤に変更したい！
という場合だと

class属性を使わなかった場合

<style>
  footer ul li:first-child {
    color: red;
  }
</style>

このように、少し長い記述方法になってしまいます。

class属性を使った場合

<footer>
  <ul>
    <li><a class="red">TOP</a></li>
    <li><a href="">このサイトについて</a></li>
    <li><a href="">コース一覧</a></li>
    <li><a href="">スペシャルコンテンツ</a></li>
  </ul>
</footer>

aタグの中に

<a class="red">

redというclass名を付けます。
この場合CSSの記述方法が、以下のように指定できます。

<style>
  .red {
    color: red;
  }
</style>

先ほどと比べて随分と簡略化されましたね。

このようにHTMLにclass属性をつけることで、
CSSの記述をシンプルにできます。

divタグ

ここで新しいタグが出てきます。
「div」タグといって、CSSでデザインを容易にするために
HTMLの要素を囲い、グループ化するタグです。

以下のコードが例になります。

<h2>コース一覧</h2>
<h3>HTML</h3>
<div class="course">
  <div class="course_item">
    <p>初級コース</p>
    <a href="">詳細はコチラ</a>
  </div>
  <div class="course_item">
    <p>中級コース</p>
    <a href="">詳細はコチラ</a>
  </div>
  <div class="course_item">
    <p>上級コース</p>
    <a href="">詳細はコチラ</a>
  </div>
</div>

divタグはコーディングする人によって使い方が少し異なります。
厳密なルールはないので、自身に合った使い方を見つけましょう。

それでは、class属性とdivタグを付与したコードを用意したので、
HTMLタグにコピー&ペーストしてください。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>忍者CODEオンライン勉強会</title>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"
  />
<style>
  /* ここにCSSを書きます */
</style>
</head>
<body>
<header>
  <h1>
    <a href="">
      <img src="https://ninjacode.work/study_meeting/img/logo.png" alt="忍者CODE">
    </a>
  </h1>
  <nav class="global_nav">
    <ul>
      <li>
        <a href="">このサイトについて</a>
      </li>
      <li>
        <a href="">コース一覧</a>
      </li>
      <li>
        <a href="">スペシャルコンテンツ</a>
      </li>
    </ul>
  </nav>
</header>
<main>
  <img class="" src="https://ninjacode.work/study_meeting/img/main.jpg" alt="">
  <div class="main_inner">
    <h2>このサイトについて</h2>
    <p class="catch_text">このサイトは、忍者CODEオンライン勉強会で使用するサイトです。<br>
    コピペのみでWebサイトが簡単に作れるので、ブックマークして練習してみてください。</p>
    <h2>コース一覧</h2>
    
    <div class="contents">
      <h3>HTML</h3>
      <div class="contents_inner">
        <div class="contents_item">
          <p>初級コース</p>
          <a href="">詳細はコチラ</a>
        </div>
        <div class="contents_item">
          <p>中級コース</p>
          <a href="">詳細はコチラ</a>
        </div>
        <div class="contents_item">
          <p>上級コース</p>
          <a href="">詳細はコチラ</a>
        </div>
      </div>
    </div>

    <h2>スペシャルコンテンツ</h2>
    <div class="contents">
      <h3>期間限定キャンペーン</h3>
      <div class="contents_inner">
        <a href="https://koga.ninjacode.site/">
          <img src="https://ninjacode.work/study_meeting/img/banner.png" alt="甲賀30,000円割引キャンペーン">
        </a>
      </div>
    </div>
  </div>
</main>
<footer>
  <ul>
    <li><a href="">TOP</a></li>
    <li><a href="">このサイトについて</a></li>
    <li><a href="">コース一覧</a></li>
    <li><a href="">スペシャルコンテンツ</a></li>
  </ul>
  <small>© ninjacode INC. ALL RIGHTS RESERVED.</small>
</footer>
</body>
</html>

これでHTML側の準備はすべて完了です。

class属性

（今回はCSSプロパティの詳しい解説は省略させていただきます。。。）

それでは、以下のCSSコードをHTMLのstyleタグの中に入れて、ブラウザで確認してみましょう

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 15px;
}
img {
  width: 100%;
}
header {
  display: flex;
}
header h1 {
  background-color: #000000;
  width: 90px;
}
header h1 a {
  display: block;
  padding: 4px 16px;
}
header .global_nav {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
header .global_nav ul {
  display: flex;
}
header .global_nav ul li + li{
  margin-left: 1.8em;
}
header .global_nav ul li a {
  font-weight: bold;
}
main {
  color: #fff;
  background-color: #16172b;
}
.main_inner {
  padding: 0 15px 120px;
}
h2 {
  margin: 120px 0 25px;
  font-size: 32px;
  font-weight: bold;
  position: relative;
  color: #fff;
  text-align: center;
}
h2::after {
  content: "";
  display: block;
  width: 4rem;
  height: 0.3rem;
  margin: 1rem auto 0;
  background: linear-gradient(90deg, rgb(137, 35, 204) 0%, rgb(32, 101, 191) 100%);
  border-radius: 0.25rem;
}
h3 {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin: 60px 0 20px;
}
.catch_text {
  text-align: center;
  line-height: 1.8;
}
.contents_inner {
  display: flex;
  max-width: 900px;
  margin: 0 auto;
  justify-content: space-around;
}
.contents_item {
  width: 30%;
  padding: 25px 15px 20px;
  text-align: center;
  background-color: #1a1d35;
  border-radius: 7px;
  border: 2px solid #57487f;
  box-shadow: 0 0 32px rgb(96 98 101 / 8%);
}
.contents_item.special {
  width: 55%;
}
.contents_item p {
  font-size: 20px;
  font-weight: bold;
}
.contents_item a {
  display: block;
  color: #fff;
  font-weight: bold;
  padding: 10px 0;
  background: linear-gradient(90deg, rgb(75 31 144) 0%, rgb(34 89 146) 100%);
  border-radius: 7px;
  margin-top: 18px;
}
footer {
  color: #aaa;
  background-color: #3d3d3d;
  padding: 35px 15px;
}
footer ul {
  display: flex;
  justify-content: center;
}
footer ul li + li {
  margin-left: 1.8em;
}
footer small {
  text-align: center;
  margin-top: 45px;
  display: block;
}

コードを入れてブラウザを確認。

現在までのサイトを確認

以上でサイトは完成になります。

このQiita記事や、サンプルコードなど、
この後も公開していますので、ブックマークすることがおすすめです。

おススメの勉強方法

この記事をもう一度ご自身で繰り返し学習
忍者CODEの無料問題集で学習（コチラ）
もっとスキルアップしたい方は、忍者CODEの「甲賀コース」で学習

忍者CODE「甲賀コース」の3つの特徴

HTML、CSSはもちろん。Wordpressやその他、最新技術が動画で分かりやすく学べる
24時間、いつでもベテランエンジニアがあなたの質問を回答
業界最安級の安さ（2/26までキャンペーン価格、77,000円）
忍者CODE「甲賀コース」についてはコチラ

ご清聴ありがとうございました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

サイトを作って学ぶ、HTML,CSS講座

はじめに

もくじ

Visual Studio Codeを使ってみよう

VSCodeをインストールしよう

HTMLファイルを作成してみよう

HTMLを書いてみよう

ヘッダーを作ろう

リンクタグを入れよう

サイトの中身（コンテンツ）を作ろう

画像を追加しよう

ロゴの画像を追加しよう

見出しと文章を作ろう

コンテンツを追加しよう

フッターを作ろう

CSSを使ってみよう

リセットCSSの追加

デザイン用のCSSの追加

CSSの記述方法

class属性

divタグ

class属性

おススメの勉強方法

忍者CODE「甲賀コース」の3つの特徴

ご清聴ありがとうございました。