2016/08/21

お母さんにもできるHTML入門

1b6377209d5ded29dee72c73356ed75e_s


今回からWEBサイトを制作するために必要な知識やスキルについて書き残しておこうかなと思います。そうです、遺書です(震え声)

わかりやすくするために難しいことは抜きでいきます。
なぜなら小難しいことを書き始めると、どうしても専門用語を使いまくってしまい、そこで初心者は挫折してしまうからです。
それに理論だけ最初に頭に入れるよりは、実際に手を動かしてみたほうが上達が早いと思うので。

ターゲットとしては自分の母親を想定しています。ネットショッピングもできない僕の母親が理解できるなら、だれでも理解することができると思いますし。



それでは頑張ります。頑張れ自分。

お母さん
頑張りなさいね。

ユトピ
ふえええ

HTMLとは?

child-594519_640

WEBサイトを制作するためにまず勉強すべきものは『HTML』『CSS』です。
今回は『HTML』についての説明をしていきます。

HTMLとは「HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)」の頭文字の略です。


お母さん
横文字わからないわ。(´・ω・`)

ユトピ
要するにパソコンとお話しするための”言葉”の一つだよ母さん。



この”言葉”のことを「プログラミング言語」といいます。
パソコンにあることをさせたいときに、日本語や英語で話しかけても通じるはずがありませんよね。

832316dc6f01c67d59607dbc5b488fd7_s

なので昔の頭の良い人たちがパソコンと話せる言語を作りました。それが「プログラミング言語」です。言語とはそのまんま言葉という意味ですね。


その「プログラミング言語」の一つが『HTML』なんですね。
HTMLはサイトを制作する際に必要な言語なのです。


お母さん
パソコンさんサイト作って!

パソコンさん
HTML語でおk。

ユトピ
(こいつ日本語で返してるやんけ・・・)

HTMLの書き方

painting-1380016_640

さて、さっそくHTMLを書き方について説明していきましょう。
HTMLには独自の「タグ」というものがあります。


お母さん
タグってこんなやつ?
army-tags-304665_960_720

ユトピ
随分ロックなタグだなぁ・・・。でもそんなイメージ!マークとして使うのは似てるね!



「タグ」とはただの文章にHTMLとしての意味を付け加えるものなんです。


例えば<p>というタグは「段落」という意味のタグ、<ul>「リスト」という意味です。
こんな感じのタグが現在(2016年8月)約100個ほど存在しているそうです。


お母さん
意外と少ないのね。

ユトピ
う、うん!(数えてないとは言えない)




それでは実際に書いてみましょう。


p




お母さん
このセリフはジョジョね!母さん知ってるわよ!

ユトピ
ジョジョはやっぱり1部!!



こんな感じで意味を持たせるテキストタグで挟んでいきます。

最初の<p>「開始タグ」、最後の</p>「終了タグ」です。「終了タグ」に < のあとに /(スラッシュ) を入れて開始タグと分けています。
挟まないで使うものもありますが(imgタグなど)、基本的にはこの形で書いていきます。


ユトピ
これで「震えるぞ♡!燃え尽きるほどヒート!」がパソコンさんに段落だってことを伝えることができたね!



先ほどタグには数百種類あるといいましたが、実際に覚えるのはよく使用する20個ほどかなとは個人的に思います。
まぁ相変わらずこちらも数えていないですが、少なくともHTMLのタグ全部をよく使うということはないですね。

さっそく作りますかね

worker-694267_640

それではHTMLの書き方を解説したところで、実際にHTMLファイルを制作してみしょうかね。

お母さん
やっとね!


まず最初にHTMLを書くために必要なツールを立ち上げましょう。
もっとも簡単なツールとしては「メモ帳」が適しています。どのパソコンにも入っていますし、無料で使用できますしね。


お母さん
メモ帳なら電話の横にあるわよ!

ユトピ
違うよ母さん。パソコンさんにあるメモ帳だよ。

パソコンさん
これな。
Win



まずHTMLを書くために絶対に必要なタグがあります。
それが以下のものです。




お母さん
ふぇえええ

ユトピ
これはコピペすれば使いまわせるよ。もし難しいなと思うなら、下の解説はとりあえず飛ばしてもいいよ!


DOCTYPE宣言


『DOCTYPE宣言』とはこれから書く文章が「HTML5で書かれていますよー」と宣言するという意味です。これを一番上に記述します。
「HTML5」とはHTMLのバージョンです。ITの技術は日々進歩していますので、HTMLもそれに合わせてバージョンアップしています。
ここでは現在(2016年8月)の最新バージョンが「HTML5」なので、DOCTYPE宣言は上記のものを記入します。


htmlタグ


『<html>タグ』とはHTMLで書かれた文章全体を囲むタグです。何も考えずに囲みましょう。


headタグ


『<head>タグ』の間には「ヘッダ情報」というものを記述します。「ヘッダ情報」とはHTMLでサイトを作るうえで他にも必要なファイル(cssファイルやJavaScriptファイルなど)の情報を記述していきます。
『<head>タグ』の中では他にも『<meta>タグ』『<link>タグ』などを使います。この辺はまた後程解説しようかと思います。

文字コード宣言 <meta charset="UTF-8">


『文字コード宣言』とは文字の種類を宣言するということ。文字コードにはいろいろな種類があって、このコードを間違えたりするといわゆる「文字化け」を起こします。
基本的にHTMLを書くときは「UTF-8」にしておきます。


お母さん
文字化け

ユトピ
お、おう

titleタグ


『<title>タグ』とは今からHTMLで作るページのタイトルを書きます。プロフィールページとか、記事のタイトルだとかを記入していきます。


bodyタグ


『<body>タグ』は先ほどの<html>タグのさらに内側に記述します。この『<body>タグ』の中にメインのHTMLを記述していきます。




以上が絶対に必要なタグたちです。
基本的にコピペで使いまわせるので、毎回自分で書く必要はないです。


HTMLファイルを保存しよう


memo

ここまでタグが書けたらデータが消えないように保存しましょう。
とりあえず僕はこんな感じのHTMLを書きました。


memo2

メモ帳の場合は上のメニューから「ファイル」>「名前を付けて保存」をクリック。


memo3

保存したい場所を選択したら、ファイルの名前を付けます。半角英数字でわかりやすい名前にしておきましょう。
今回は「test」にしておきます。


memo5

そして名前を付けたら最後に「.html」を付けます。


memo6

保存ボタンを押す前に「文字コード」を「UTF-8」に指定してください。この設定をしないと表示したときに文字化けを起こしますので、忘れずに指定しましょう。


drag

保存できたか確認するために「test.html」をダブルクリックか、開けない場合はインターネットブラウザにドラッグ&ドロップしてみましょう。
画像の場合はドラッグ&ドロップです。


gero

上の画像のように表示されたら無事完成です。
これであなたもHTMLマスターです。嘘です。


お母さん
やってみると意外と簡単かもしれないわね!

ユトピ
そうだよ!まずはやってみることが重要なんだね!

まとめ


今回はこれで終わりにしましょう。
HTMLの入門編としてはこれで十分ですね。というかこれ以上やると疲れちゃう。書いてる僕も疲れちゃう。


次回はWEBサイトを作る上でもう一つ欠かせない『CSS』について解説していきます。


そんなこんなでどうぞよろしくお願いいたしましゅ。


質問や意見がありましたらお気軽にツイッターの方へどうぞ。


ユトピのツイッター
@yutopi60pa