前回はホームページが動く仕組みを、簡単に解説しました。
この記事では、実際にホームページを作って、公開するところまでを解説していきます。
最初なので作るホームページは１ページの簡単なものですが、これが基本となります。
はじめは大体のイメージを理解できればOKなので、リラックスしていきましょう。
ホームページのデータを作ろう
ホームページというのは、実際はWebサーバーに置いてあるデータの事なのですが、
どんなデータなのでしょうか？
小規模なサイト、大規模なサイトによってデータは色々ですが、基本は「HTMLファイル」というのがホームページのデータになります。
この「HTMLファイル」というのは何かというと、タイトルは「〇〇」で、ここに「大きくて赤い文字」を書いて、ここにはこんな画像を置いて、、、
という「ホームページの構造が書かれた文字ファイル」になります。
細かく言うと色々あるんですが、今はこの程度の理解で問題ないです。
中身を見てみるとこんな感じです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>人生を変える行動</title>
<meta name="description" content="1日1つの行動で自分と世界が変わる">
</head>
<body>
<h1>みなさんこんにちは。</h1>
<p>今日という一日は、これから人生を変える最初の日です。<br>
あせらず、ゆっくりと着実に進めましょう</p>
</body>
</html>
初めて見た人はページを閉じたくなるかもしれません。私も当時はそうでした。
こんな訳のわからない文字を、しかも毎日たくさん書いている人はきっと「化物」かとてつもなく「変態」なんだろうと信じて疑わなかったです。
でも怖がらないでください。
歩み寄っていけば、HTMLはあなたの隣にそっと寄り添ってきてくれます。
タグって何？
基本的に「HTML」は<>で囲まれたタグというもので構成されています。
先ほどのタグで埋め尽くされたファイルを、webサーバーに保存してから
「ブラウザ」を使ってそのファイルを見ると、ホームページとして表示してくれます。
試しに、この文字ファイルをメモ帳にコピーして、一度保存してみましょう。
保存名は「hello.html」という名前で保存してください。
※保存時に文字コードを「UTF-8」にして保存してください。
この「UTF-8」というのは文字コードの事なんですが、今は覚える必要はないので、基本的には文字コードは「UTF-8」を選ぶ。ということだけ記憶の奥に留めておいてください。
そして今保存した「hello.html」をダブルクリックするか、今見ているブラウザソフトにドラッグ＆ドロップしてください。
どうでしょうか？先ほどの<html></html>などで囲まれた表示ではなく、きちんと文字が表示されましたでしょうか？
本来はタグがたくさん集まってできるただの文字データなのですが、ブラウザ越しに見ることで、ちゃんと文章が表示されるようになります。
これがホームページです！大げさでも何でもありません。
このファイルは今あなたのPC上にしか存在しませんが、これを「Webサーバー」に置けば、あなたの作ったホームページを世界中の人に見てもらう事ができます。
すごい！
では解説を続けます。
このタグにも種類がいろいろあって、<title>や<h1>など一つ一つに意味があります。
たとえば、「みなさんこんにちは。」と一番上に大きい文字で表示されていますが、この箇所を見てみると
<h1>みなさんこんにちは。</h1>
<h1></h1>というタグで囲まれています。
この<h1>というのは「一番重要な見出し」という意味になります。
そして最後はスラッシュがついて</h1>というタグになっていますが、これはタグの終了はここですよ。という印になります。
つまり<h1>から始まって</h1>まで囲った部分の文字を、一番重要な見出しとして表示しなさい。という意味になります。
「ブラウザ」で見ると、<h1>タグで囲まれた箇所は「太めの大きな文字」で自動表示してくれる。という仕組みです。
続いては、<p>に囲まれている箇所がありますが、一体は何者かというと「段落」という意味があります。
簡単にいうと「まとまった文章」ですね。
<br>と書くと、その箇所に改行を入れる。という意味になります。
HTMLファイルで「見出し」と「まとまった文章」を作る場合は
<h1>みなさんこんにちは。</h1> <p>今日という一日は、これから人生を変える最初の日です。<br> あせらず、ゆっくりと着実に進めましょう</p>
こんな風に書きます。 ここまでは大丈夫でしょうか？
以下に先ほどのタグの意味をまとめておきます。
<h1>表示される見出し</h1> ⇒ 一番重要な見出し
<p>表示される文章</p> ⇒ ひとまとまりの文章
<br> ⇒ 改行
それぞれのタグの意味
この「見出し」「段落」「改行」以外にもいろいろ書いてありますね。
よく見ると、これらの内容をさらに囲っている<body>というやつがいます。
これは何かというと、「表示部分」の事を指します。
つまりホームページの「見える部分の内容」になります。
一番初めに見てもらったHTM+ファイルの内容を見てみると
こんなん⇒<!doctype html>とか
こんなん⇒<html lang=”ja”>とか
怖そうなやつがあったと思います。
でも、実際にホームページとして表示されているのは、
<h1>みなさんこんにちは。</h1> <p>今日という一日は、これから人生を変える最初の日です。<br> あせらず、ゆっくりと着実に進めましょう</p>
の部分だけですよね？
つまり「ブラウザ」でアクセスしたときにホームページとして表示されるのは
<body>で囲まれた部分だけで、 このあたりの怖い奴らは、
「このファイルはHTMLですよー」とか
「このホームページは日本語ですよー」 とかを
「ブラウザ」に教えてくれるタグになります。
つまり<body>タグで囲まれた箇所は見せる部分
それ以外は見えない「情報」の役割を果たしてくれます。
このあたりは、分けた方がわかりやすいので、大まかなブロックに分けて解説していきます。
※初心者の方はなぜこう書くのというのは理解する必要はないです。
とにかくこう決まっている。という認識の方がいいです。
挫折する人は色々深堀しすぎて、逆に難しくなったり、深すぎて気絶する場合があります。
<!doctype html>の先頭にはなぜ「!」が付くの？とかは疑問に思ってもスルーしてください。
とにかく決まってるんだから、ゴチャゴチャ言わずに言われた通りに書け！
と自分に言い聞かせましょう。
各ブロックの説明
ではブロックごとに順番に解説していきます。
まずは大まかに以下のように分けることができます。
では上から順番に解説していきます。
① DOCTYPE宣言
<!DOCTYPE html>
これは、DOCTYPE宣言といって、HTMLファイルを作るときは必ず最初に記載するものです。
ブラウザにこれはHTMLファイルですよ！と教えてあげる為の記述です。とにかくこれは何よりも最初に書く必要があります。
昔はHTMLにも色々なバージョンがあり、上記のような記述でないパターンもありましたが、基本的に今は気にしなくても大丈夫です。
とにかく「最初は<!DOCTYPE html>から始まる」とだけ覚えてください。
②HTMLタグ（言語表記）
<html lang="ja">
これは言語表記の属性を表します。
つまり「このHTMLは日本語ですよ」という事をブラウザに教えています。
深堀をすると色々出てきますが、日本語のサイトはこれを書くんだという理解で今は大丈夫です。
③headタグ
<head>
<meta charset="UTF-8">
<title>人生を変える行動</title>
<meta name="description" content="1日1つの行動で自分と世界が変わる">
</head>
この「headタグ」は非常に重要です。
何故かというと、ホームページの「文字コード」「タイトル」「説明」「デザイン」「動き」など、「ホームページの情報」と「内容を装飾するファイル」がここに格納されるからです。
今はデザインや動きに関しては何も手は加えていないので、「タイトル」と「説明」のみが「headタグ」に格納されている状態です。
一つづつ解説していきましょう。
<meta charset="UTF-8">
これは「文字コード」を「UTF-8」で指定してくだい。という意味合いです。
「文字コード？」「UTF-8？」ナニソレ？
な人は別に気にしないでください。基本的に「UTF-8」以外で指定する事があまりないので
このあたりもおまじない的に<meta charset=”UTF-8″>を記述する。という決まりごととして覚えてください。
※文字コードについては別の記事でまた詳しく解説します。
<title>人生を変える行動</title>
これはホームページのタイトルになります。
<title></title>で囲まれた部分がタイトルに表示されます。
下記の赤枠部分のことですね。
このタイトル部分は内容として表示はされませんが、ブラウザのタブ等に表記されます。
<meta name="description" content="1日1つの行動で自分と世界が変わる">
これは、「description」といってホームページの説明が入ります。
<meta name=”description” content=”この部分に説明の文章を記述してください。” >
下の赤枠部分の様にGoogleなどの検索結果のサイト名の下に表示される説明の枠になります。
※サイト名の部分には<title></title>で囲んだ文字が入っています。
昔はこの部分がSEO（サイトの検索順位）に大きく関わってきたので、色々と順位が上がるように工夫して説明を書いていましたが、今は順位とは関係無いとされていますので、普通にホームページの説明を書きましょう。
headタグは以上になります。
④bodyタグ
bodyタグは先ほど説明した通り
<body>
<h1>みなさんこんにちは。</h1>
<p>今日という一日は、これから人生を変える最初の日です。<br>
あせらず、ゆっくりと着実に進めましょう</p>
</body>
上記の「ホームページに表示される内容」です。
⑤htmlの終了タグ
<html lang="ja">～</html>
ここまで全てが「htmlタグ」で囲まれています。
全てまとめると、以下のような構成になります。
・DOCTYPE宣言でHTMLを設定
・「htmlタグ」記述←日本語表記の設定
・「htmlタグ」内に「headタグ」と「bodyタグ」を記述
・「headタグ」内に各種情報を記述
・「bodyタグ」内にホームページの内容を記述
このように、大きいタグの囲いから順番に作っていき、その中を埋めていく感じですね。
まとめ
以上で超基本となるホームページ構成の解説を終わります。
今作った「HTMLファイル」の<title>タグや＜h1>タグの中身を、少し修正して見て、自分でアレンジして保存、表示の確認をしてみてください。
単純な構成ですが、これが基本となります。
タグにも「divタグ」や「articleタグ」など他にも色々種類がありますが、一気に覚えるのは無茶なので
段階を追って解説していきます。
あくまで挫折せずにプログラミングを覚える。という部分に重点を置いていますので、少し簡単すぎるという意見もあるかと思います。
ある程度分かっている人は、知っている箇所は飛ばして、知りたい箇所のみつまんでいくというやりかたをお勧めします。
では次回は、ホームページを作って公開してみよう（公開編）の記事になりますので、是非次も見てください。
