【超初心者向け】Webサイト制作は家を建てるイメージで覚えよう！

2018/05/08 2019/10/23

こんにちは。

パラレルクリエイターのナナシロです。

Webサイト制作ってやったことがない人からするととてもハードルが高いですよね。

デザインをするところまではできても、

いったいこれがどうやってWebサイトの1ページになるのか……

となること間違いないです。

ふわっと、

HTMLとCSSというプログラミング言語でWebサイトにしていくんだよね？

と知っている方でも、HTMLやCSSの教本を開いた瞬間に、

え？何これ、……分からん！

となりがちです。

そんなわけで今回は、

Webサイト制作を習得したいがプログラミングって何かよく分からない
HTML、CSSというのは聞いたことがあるがよく分からない
Webサイト制作の教材をよく分からないまま進めている

というレベルのあなたに、世界一分かりやすくWebサイト制作のいろはをご紹介します。

なお、この記事を読むと、

Webサイト制作を習得するために何を覚えればいいかが分かる
Webサイト制作で使う各言語の役割が分かる

という状態になります。

なお、この記事ではドメインやサーバ周りの話はノータッチです。

また、HTMLやCSSの具体的な記述方法についてもほぼ触れません。

ググれば出てきますし、教本を読めば分かるからです。

ただ、この記事を読むのと読まないのとでは、Webサイト制作の習得効率が段違いだと思います。

では、飛ばさずに順繰りに読んでいってください。

どうぞ！

1 Webサイトは家を建てるイメージで覚える
2 まとめ

Webサイトは家を建てるイメージで覚える

Webサイトは家を建てるイメージで覚えると圧倒的に分かりやすいです。

なので、ここからは大工さんになって家を建てるノリで読んでいってください。

今、あなたは設計図を前にして家を建てようとしています。

目の前にはまっさらな土地と、家を建てるための重機や大工道具があります。

さあ、何をしましょう？

……そう、まず必要なのは基礎工事、要するに土台作りですね。

地面にそのまま柱を立てるなどすると、家の重みで沈んでしまいます。

だからまず基礎を固めることが大事です。

基礎工事が終わったら、次は骨組み作りに入っていきます。

骨組みを作るのに必要になるのは……、そう、建材ですね。

鉄筋なり木材なり、建材がないことには家は建ちません。

というわけで、こういった基礎や骨組みのために使う言語が「HTML」です。

HTMLは、例えば、index.htmlといったファイルに書いていきます。

Webサイトではこれが1ページとなります。

では早速、HTMLを見ていきましょう。

HTML = 基礎、骨組み

というわけで、僕が書いてみたindex.htmlの中身はこんな感じ。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>家を建てるプロジェクト</title>
</head>
<body>
　　<div>玄関（予定）</div>
　　<div>キッチン（予定）</div>
　　<div>リビング（予定）</div>
　　<div>トイレ（予定）</div>
　　<div>寝室（予定）</div>
</body>
</html>

<!doctype html>

<html>

<head>

<title>家を建てるプロジェクト</title>

</head>

<body>

</body>

</html>

いきなりたくさん書かれていて分からない……！

という声が聞こえてきそうなので、まず骨組み作りで使う基礎部分以外はすべて非表示にしますね。

えいっ。

<body>
　　<div>玄関（予定）</div>
　　<div>キッチン（予定）</div>
　　<div>リビング（予定）</div>
　　<div>トイレ（予定）</div>
　　<div>寝室（予定）</div>
</body>

<body>

</body>

これで随分すっきりしたかと思います。

この時点で知っておくべきことは、<body>から</body>の間までがWebサイトの基礎部分ということ。

<head>から</head>の間は、Webサイトとして見える部分ではなく、ここは日本ですよ〜とか、この家は鉄筋で作っていますよ〜といった情報を書き込むエリアです。

大事ではありますが、今回は特に触れません。

その基礎部分に、骨組みを組んでおいておきました。

<div></div>で囲んだところが一つの骨組みになります。

一応すべての骨組みの中に、予定として何を作るか書いておきました。

ですが、これだと建材で組まれたスペースにポンと文章という物が置いてある状態。

※すべて描くと見にくくなるので、図ではリビングのみを描いています。

<div></div>という建材自体に「リビング用」等、目印をつけておきたいですよね。

そういうときは、例えばこのように印をつけることができます。

（body等は省略します。）

<div id="living"></div>

1	<div id="living"></div>

id=”〜”という書き方をすることで、印をつけられるのです。

id=”〜”以外に、class=”〜”という印のつけ方もできるのですが、その辺のルールについては今回は特に掘り下げません。

気になる人はググって調べてね。

では、さっきの家作りプロジェクトに戻って、すべての建材に印をつけましょう。

よいしょ。

<body>
　　<div id="genkan"></div>
　　<div id="kitchen"></div>
　　<div id="living"></div>
　　<div id="toilet"></div>
　　<div id="bedroom"></div>
</body>

<body>

</body>

……玄関だけ”genkan”って……というツッコミは無しで。笑

英単語でもローマ字でもいいですが、とにかく分かりやすい名前をつけておきましょう。

さて、これで基礎と骨組みの準備は良しとしましょう。

本当は、

<div id="living">
  <div>
    <h2>テーブル</h2>
    <p>椅子</p>
    <p>椅子</p>
  </div>
  <div>
    <h2>ソファー</h2>
    <p>クッション</p>
    <p>クッション</p>
  </div>
</div>

<div>

</div>

<div>

<p>クッション</p>

</div>

こういった具合に、あらかじめその部屋の中（この例では<div id=”living”></div>の中）に置きたいものを置いておくのがWebサイト制作の手順なのですが、今回はあくまで分かりやすさを優先するため、あえて置かないで進めます。

CSS = 間取り、装飾

さて。

次に必要になってくるのは、部屋を

どれくらいの広さで
どこに作るか

という間取り決めです。

そして間取りが決まったら、装飾を考えていきます。

どういう壁紙にするのか
どんな形の室内灯をつけるのか
フローリングなのか座敷なのか

等々、部屋の具体的な様子を決めていきます。

この「間取り」と「装飾」の両方をおこなうのがCSSという言語です。

ここからは実際のWebサイトの感じに寄せて2Dで見ていきましょう。

不動産屋で見取り図を見ているような感覚でどうぞ。

このイメージに合わせて、分かりやすいように玄関やトイレなどのリビング以外の要素はいったん非表示にしましょう。

ほいっ。

<body>
　　<div id="living"></div>
</body>

<body>

</body>

こんな感じですね。

さて、ではこのリビングの間取りを決めていきます。

よいしょっと。

<body>
　　<div id="living" style="width:200px; height:300px;"></div>
</body>

<body>

</body>

リビングの横幅を200px、高さを300pxに設定してみました。

CSSは、style=”〜”という書き方をすれば、HTMLに直接書くことができます。

これを見取り図イメージで見るとこんな感じ。

これは教材を読めば書いてあることですが、style=”width:200px; height:300px;”のwidthやheightの部分を「プロパティ」と言います。

widthは部屋の横幅を、heightは部屋の高さを指定する設計指示です。

CSSの中でも間取りを決めるプロパティは

通常縦並びの部屋を横並びっぽくできる（float）
部屋の内側に隙間を設ける（padding）
部屋の外側に隙間を設ける（margin）

など、様々あります。

こういったプロパティについては、本を読んだりググったりして覚えていきましょう。

さて、では今度は装飾をしてみましょう。

リビングは真っ赤にしよう！（センスについてはツッコミ無しで！）

ほいっとな。

<body>
　　<div id="genkan" style="width:200px; height:300px; background-color:#ff0000;"></div>
　　<div id="kitchen"></div>
　　<div id="living"></div>
　　<div id="toilet"></div>
　　<div id="bedroom"></div>
</body>

<body>

</body>

というわけで、さっき横幅と高さを指定したリビングに、続けて背景色を設定しました。

イメージで見てみるとこんな感じ。

background-colorが背景色を決める指示書きです。

その後ろに書かれている#ff0000は、赤色を意味するカラーコードです。

カラーコードについても、自分でググって調べてみてください。

（今回はほんと〜にコーディングの初歩の初歩だけ触れるからね。）

もし今実際に出来上がったページをブラウザで開いて確認しているとしたら、きっとこんな感じになっているかと思います。

あれ、リビング以外の部屋まったく見えないよ……？

と思った方。

そもそもHTMLは透明な骨組みなので、スペース内に文章が置いてあるなどしないと見えないのです。

ご注意を。

さて。

ここまでCSSを書いてきましたが、

このままstyle=”〜”のところに間取りや装飾の指示を書き足し続けていると、めちゃくちゃ読みにくくならない……？

と思った方、いらっしゃるでしょう。

ナイスな指摘です！

実のところ、Webサイト制作の現場では、HTMLに直接CSSを書き込むことはありません。

では、どうするか。

今HTMLを書いているファイルとは別に、CSSを書くためのファイルを作り、それを読み込むのです。

この辺のことはみなさんが勉強するのに使っている教材にも書いてあると思うので、ざっくり触れるだけにしますが、例えば、index.htmlというファイルに、

<body>
　　<div id="genkan"></div>
　　<div id="kitchen"></div>
　　<div id="living"></div>
　　<div id="toilet"></div>
　　<div id="bedroom"></div>
</body>

<body>

</body>

とHTMLを書いて、sytle.cssというファイルに、

#living {
  width:200px;
  height:300px;
  background-color:#ff0000;
}

#living {

width:200px;

height:300px;

background-color:#ff0000;

}

と書く。

この状態で、index.htmlにstyle.cssを読み込ませれば、骨組みと間取り・装飾の指示が整理されてとても見やすくなります。

読み込ませ方は教材見るなりググるなりしてください！（何回目）

Javascript = 機能、動き

さて、ここまでHTMLとCSSを見てきましたが、実はその2つの言語が扱えるだけでWebサイト制作はできてしまいます。

なので、

いったんここまでで読むのをやめて本を見ながら試してみます！

でももちろんいいのですが、もうちょっと知りたいな！という方がいたら、この後も読み進めてみてください。

さて。

みなさんが実際に家を建てて住むとき、ただ壁で仕切られたスペースに物が置いてあるだけではないですよね？

例えば、家電を置きますよね。

冷蔵庫なら、電源を挿せば庫内が冷えて食物を保存できるという機能があります。

電子レンジなら、つまみを回せば物を温められるという機能があります。

他にも、お風呂は「お湯はり」ボタンを押すと、お湯が出てきて溜まりますよね。

来訪者がインターフォンを押せば、ピンポーンと音が鳴ります。

そういったなんらかの機能や動きを持たせるために使う言語があります。

Javascriptと言います。

余談ですが、

あ、Javaですか？

と言われることよくありますが、

ナナシロ

違います！JavaとJavascriptは別の言語です！

なので、気をつけましょう。

今回は具体的にJavascriptの書き方を指南するつもりはありませんが、この言語を使えば、

ボタンを押すとページの先頭へスルスルとスクロールして戻る
画面の幅が1200px以上になったら画面右端に広告バナーを表示する
特定のエリアにカーソルを乗せると注意書きが書かれたウィンドウが表示される

といったことができます。

ただ、実はこのJavascript、HTMLとCSSから勉強した人にとってはちょっと難しく使いづらいんですよね〜。

（少しでもやってみたことがある人なら分かると思いますが……。）

そんなあなたに！

このJavascriptという言語をCSSを書くように使いやすくしたものがあるのです。

その名もjQuery。

jQueryは、Javascriptのライブラリの一つです。

ライブラリとは、誰でも使いやすいように必要な機能をセットにしたものです。

どれくらい使いやすくなるかを、電子レンジを部屋に設置することを例に挙げて説明すると、

Javascript：まず電子レンジを作るところからやるか……。
jQuery：電子レンジ買ってきたから、キッチンに置いて使いましょ！

という感じ。

それくらいめちゃくちゃ使いやすくなるのです。

いっそJavascriptのことを知らなくても、jQueryを使えば動きや機能を設定することができます。

さて、ここまで読んである程度分かった方は

え！jQuery使ってみたい！

という方もいらっしゃると思いますが……、まずはHTMLとCSSを使えるようになってから！笑

今回はご紹介のみ、ということで。

まとめ

今回は、家を建てるイメージでWebサイト制作を覚えていきましょう〜という話をしてきました。

HTML：基礎、骨組み
CSS：間取り、装飾
Javascript（jQuery）：機能、動き

といったことを学んできました。

実を言うと、この3つの言語以外にも、問い合わせフォームを作る場合などはPHPという言語を使う必要があります。

ですが、今回はあくまでただのデザインの状態からWebサイトをコーディングする部分に重きを置いてご紹介しました。

Webサイト制作は独学でもすいすい学べる人がいる一方で、構造をつかむことができず四苦八苦する人も多々います。

せっかく取り組んだのに挫折してしまうのはもったいないので、ぜひ家を建てるイメージでコーディングに取り組んでみてください！