プロローグ：WEB制作とは？

大丈夫！難しくないです。

WEB制作を始めたいけど、いったい何から手を付ければいいのか。。。
大丈夫です！今からすべてを説明いたします。

WEBサイトは「HTML」と呼ばれている言語で書かれたファイルで成り立っています。
そう、もちろんこのページもHTMLにて作られています。
そして、もうひとつ。「CSS」と呼ばれている言語にて装飾を行っております。
蛍光マーカーのように色がついていますよね。この部分のことです。

覚えていただきたいのは2つ。

「HTML」で文章を書く。
「CSS」で装飾をする。

HTMLをもう少し詳しく

HTMLとは、 Hyper Text Markup Language の略で、 WEBページを作るための言語です。

WEBページは、SafariやChromeのような、ブラウザと呼ばれるアプリで閲覧していますよね。
そのブラウザが、ページ内の情報を的確に表示できるように、HTMLにて記述をします。

わかりやすく言うなれば、ブラウザが理解できるブラウザ語といったところでしょうか。

「HTML」はブラウザ語。

CSSをもう少し詳しく

CSSとは、 Cascading Style SSheets の略で、 WEBページのスタイルを指定するためのものです。

HTMLと組み合わせて、WEBページを見やすくレイアウトしたり、華やかに装飾をしたりします。
CSSの使い方次第で、ページの雰囲気は大きく変わります。

表示デバイスが多様化している今日では、CSSはとても重要な役割を担っています。

「CSS」は装飾。

HTMLはどんな風に書くの？

HTMLとCSSがどんなものかは、お分かりいただけたと思います。
では、一体どのようにしてWEBページ制作を始めればよいのでしょうか。

ここに、HTMLとCSSのテンプレートを用意しました。

HTMLテンプレート

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>HTMLテンプレート</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./css/style.css">
    
    <link rel="shortcut icon" href="">
  </head>
  <body>

    <div class="b0">
      <div class="wrap">
        <h1>HTMLテンプレート</h1>
      </div>
    </div>

    <div class="wrap">

      

      

    </div>

    <div class="footer">
      <span class="copyright">Copyright © WEB工房しずおか All rights reserved.</span>
    </div>

  </body>
</html>

これがHTMLです。
「<」と「>」で囲まれたものを「タグ」と呼びます。
<html>であれば、htmlタグといった具合いです。

headタグや、bodyタグなどがありますが、それぞれの役割はここでは説明しません。
こういうものだと思ってください。

タグは、基本的には「開始タグ」と「終了タグ」の対になっています。
終了タグは、タグ名の手前に「/」を付けます。
例：<head> … </head>

終了タグがないものもあります。
例：img、br

終了タグがないものは、正式には右端に「/」を付けます。例：<img … />、<br />

でも今は、細かいことまでは覚えなくてOKです！

HTMLは様々な「タグ」で成り立っている。