パラレルクリエイターのナナシロです。Webサイト制作ってやったことがない人からするととてもハードルが高いですよね。...となること間違いないです。HTMLとCSSというプログラミング言語でWebサイトにしていくんだよね?と知っている方でも、HTMLやCSSの教本を開いた瞬間に、え?何これ、......分からん!となりがちです。そんなわけで今回は、Webサイト制作を習得したいがプログラミングって何かよく分からないHTML、CSSというのは聞いたことがあるがよく分からないWebサイト制作の教材をよく分からないまま進めているというレベルのあなたに、世界一分かりやすくWebサイト制作のいろはをご紹介します。この記事を読むと、Webサイト制作を習得するために何を覚えればいいかが分かるWebサイト制作で使う各言語の役割が分かるという状態になります。この記事ではドメインやサーバ周りの話はノータッチです。HTMLやCSSの具体的な記述方法についてもほぼ触れません。ググれば出てきますし、教本を読めば分かるからです。この記事を読むのと読まないのとでは、Webサイト制作の習得効率が段違いだと思います。飛ばさずに順繰りに読んでいってください。まとめWebサイトは家を建てるイメージで覚えるWebサイトは家を建てるイメージで覚えると圧倒的に分かりやすいです。ここからは大工さんになって家を建てるノリで読んでいってください。今、あなたは設計図を前にして家を建てようとしています。目の前にはまっさらな土地と、家を建てるための重機や大工道具があります。さあ、何をしましょう?......そう、まず必要なのは基礎工事、要するに土台作りですね。地面にそのまま柱を立てるなどすると、家の重みで沈んでしまいます。基礎を固めることが大事です。基礎工事が終わったら、次は骨組み作りに入っていきます。骨組みを作るのに必要になるのは......、そう、建材ですね。鉄筋なり木材なり、建材がないことには家は建ちません。いうわけで、こういった基礎や骨組みのために使う言語が「HTML」です。HTMLは、例えば、index.htmlといったファイルに書いていきます。Webサイトではこれが1ページとなります。HTMLを見ていきましょう。基礎、骨組みというわけで、僕が書いてみたindex.htmlの中身はこんな感じ。charset="UTF-8"><title>家を建てるプロジェクト</title></head><body><div>玄関(予定)</div><div>キッチン(予定)</div><div>リビング(予定)</div><div>トイレ(予定)</div><div>寝室(予定)</div></body></html>いきなりたくさん書かれていて分からない......!という声が聞こえてきそうなので、まず骨組み作りで使う基礎部分以外はすべて非表示にしますね。</body>1234567<body><div>玄関(予定)</div><div>キッチン(予定)</div><div>リビング(予定)</div><div>トイレ(予定)</div><div>寝室(予定)</div></body>これで随分すっきりしたかと思います。この時点で知っておくべきことは、<body>から</body>の間までがWebサイトの基礎部分ということ。<head>から</head>の間は、Webサイトとして見える部分ではなく、ここは日本ですよ〜とか、この家は鉄筋で作っていますよ〜といった情報を書き込むエリアです。大事ではありますが、今回は特に触れません。その基礎部分に、骨組みを組んでおいておきました。<div></div>で囲んだところが一つの骨組みになります。一応すべての骨組みの中に、予定として何を作るか書いておきました。これだと建材で組まれたスペースにポンと文章という物が置いてある状態。※すべて描くと見にくくなるので、図ではリビングのみを描いています。<div></div>という建材自体に「リビング用」等、目印をつけておきたいですよね。いうときは、例えばこのように印をつけることができます。(body等は省略します。id="living"></div>id=”〜”という書き方をすることで、印をつけられるのです。id=”〜”以外に、class=”〜”という印のつけ方もできるのですが、その辺のルールについては今回は特に掘り下げません。気になる人はググって調べてね。さっきの家作りプロジェクトに戻って、すべての建材に印をつけましょう。id="bedroom"></div></body>......玄関だけ”genkan”って......というツッコミは無しで。英単語でもローマ字でもいいですが、とにかく分かりやすい名前をつけておきましょう。これで基礎と骨組みの準備は良しとしましょう。id=”living”></div>の中)に置きたいものを置いておくのがWebサイト制作の手順なのですが、今回はあくまで分かりやすさを優先するため、あえて置かないで進めます。次に必要になってくるのは、部屋をどれくらいの広さでどこに作るかという間取り決めです。間取りが決まったら、装飾を考えていきます。いう壁紙にするのかどんな形の室内灯をつけるのかフローリングなのか座敷なのか等々、部屋の具体的な様子を決めていきます。この「間取り」と「装飾」の両方をおこなうのがCSSという言語です。ここからは実際のWebサイトの感じに寄せて2Dで見ていきましょう。不動産屋で見取り図を見ているような感覚でどうぞ。このイメージに合わせて、分かりやすいように玄関やトイレなどのリビング以外の要素はいったん非表示にしましょう。id="living"></div></body>こんな感じですね。このリビングの間取りを決めていきます。height:300px;"></div></body>リビングの横幅を200px、高さを300pxに設定してみました。CSSは、style=”〜”という書き方をすれば、HTMLに直接書くことができます。これを見取り図イメージで見るとこんな感じ。height:300px;”のwidthやheightの部分を「プロパティ」と言います。widthは部屋の横幅を、heightは部屋の高さを指定する設計指示です。CSSの中でも間取りを決めるプロパティは通常縦並びの部屋を横並びっぽくできる(float)部屋の内側に隙間を設ける(padding)部屋の外側に隙間を設ける(margin)など、様々あります。いったプロパティについては、本を読んだりググったりして覚えていきましょう。今度は装飾をしてみましょう。リビングは真っ赤にしよう!(センスについてはツッコミ無しで!)ほいっとな。id="bedroom"></div></body>というわけで、さっき横幅と高さを指定したリビングに、続けて背景色を設定しました。イメージで見てみるとこんな感じ。background-colorが背景色を決める指示書きです。その後ろに書かれている#ff0000は、赤色を意味するカラーコードです。カラーコードについても、自分でググって調べてみてください。(今回はほんと〜にコーディングの初歩の初歩だけ触れるからね。)もし今実際に出来上がったページをブラウザで開いて確認しているとしたら、きっとこんな感じになっているかと思います。あれ、リビング以外の部屋まったく見えないよ......?と思った方。そもそもHTMLは透明な骨組みなので、スペース内に文章が置いてあるなどしないと見えないのです。