2016/08/21
お母さんにもできるHTML入門
今回からWEBサイトを制作するために必要な知識やスキルについて書き残しておこうかなと思います。そうです、遺書です(震え声)
わかりやすくするために難しいことは抜きでいきます。
なぜなら小難しいことを書き始めると、どうしても専門用語を使いまくってしまい、そこで初心者は挫折してしまうからです。
それに理論だけ最初に頭に入れるよりは、実際に手を動かしてみたほうが上達が早いと思うので。
ターゲットとしては自分の母親を想定しています。ネットショッピングもできない僕の母親が理解できるなら、だれでも理解することができると思いますし。
それでは頑張ります。頑張れ自分。
目次
HTMLとは？
WEBサイトを制作するためにまず勉強すべきものは『HTML』と『CSS』です。
今回は『HTML』についての説明をしていきます。
HTMLとは「HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)」の頭文字の略です。
この”言葉”のことを「プログラミング言語」といいます。
パソコンにあることをさせたいときに、日本語や英語で話しかけても通じるはずがありませんよね。
なので昔の頭の良い人たちがパソコンと話せる言語を作りました。それが「プログラミング言語」です。言語とはそのまんま言葉という意味ですね。
その「プログラミング言語」の一つが『HTML』なんですね。
HTMLはサイトを制作する際に必要な言語なのです。
HTMLの書き方
さて、さっそくHTMLを書き方について説明していきましょう。
HTMLには独自の「タグ」というものがあります。
「タグ」とはただの文章にHTMLとしての意味を付け加えるものなんです。
例えば<p>というタグは「段落」という意味のタグ、<ul>は「リスト」という意味です。
こんな感じのタグが現在(2016年8月)約100個ほど存在しているそうです。
それでは実際に書いてみましょう。
こんな感じで意味を持たせるテキストをタグで挟んでいきます。
最初の<p>が「開始タグ」、最後の</p>が「終了タグ」です。「終了タグ」に < のあとに /(スラッシュ) を入れて開始タグと分けています。
挟まないで使うものもありますが(imgタグなど)、基本的にはこの形で書いていきます。
先ほどタグには数百種類あるといいましたが、実際に覚えるのはよく使用する20個ほどかなとは個人的に思います。
まぁ相変わらずこちらも数えていないですが、少なくともHTMLのタグ全部をよく使うということはないですね。
さっそく作りますかね
それではHTMLの書き方を解説したところで、実際にHTMLファイルを制作してみしょうかね。
まず最初にHTMLを書くために必要なツールを立ち上げましょう。
もっとも簡単なツールとしては「メモ帳」が適しています。どのパソコンにも入っていますし、無料で使用できますしね。
まずHTMLを書くために絶対に必要なタグがあります。
それが以下のものです。
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> </body> </html> |
DOCTYPE宣言
|
1 |
<!DOCTYPE html> |
『DOCTYPE宣言』とはこれから書く文章が「HTML5で書かれていますよー」と宣言するという意味です。これを一番上に記述します。
「HTML5」とはHTMLのバージョンです。ITの技術は日々進歩していますので、HTMLもそれに合わせてバージョンアップしています。
ここでは現在(2016年8月)の最新バージョンが「HTML5」なので、DOCTYPE宣言は上記のものを記入します。
htmlタグ
|
1 |
<html></html> |
『<html>タグ』とはHTMLで書かれた文章全体を囲むタグです。何も考えずに囲みましょう。
headタグ
|
1 |
<head></head> |
『<head>タグ』の間には「ヘッダ情報」というものを記述します。「ヘッダ情報」とはHTMLでサイトを作るうえで他にも必要なファイル(cssファイルやJavaScriptファイルなど)の情報を記述していきます。
『<head>タグ』の中では他にも『<meta>タグ』や『<link>タグ』などを使います。この辺はまた後程解説しようかと思います。
文字コード宣言 <meta charset="UTF-8">
|
1 |
<meta charset="UTF-8"> |
『文字コード宣言』とは文字の種類を宣言するということ。文字コードにはいろいろな種類があって、このコードを間違えたりするといわゆる「文字化け」を起こします。
基本的にHTMLを書くときは「UTF-8」にしておきます。
titleタグ
|
1 |
<title></title> |
『<title>タグ』とは今からHTMLで作るページのタイトルを書きます。プロフィールページとか、記事のタイトルだとかを記入していきます。
bodyタグ
|
1 |
<body></body> |
『<body>タグ』は先ほどの<html>タグのさらに内側に記述します。この『<body>タグ』の中にメインのHTMLを記述していきます。
以上が絶対に必要なタグたちです。
基本的にコピペで使いまわせるので、毎回自分で書く必要はないです。
HTMLファイルを保存しよう
ここまでタグが書けたらデータが消えないように保存しましょう。
とりあえず僕はこんな感じのHTMLを書きました。
メモ帳の場合は上のメニューから「ファイル」＞「名前を付けて保存」をクリック。
保存したい場所を選択したら、ファイルの名前を付けます。半角英数字でわかりやすい名前にしておきましょう。
今回は「test」にしておきます。
そして名前を付けたら最後に「.html」を付けます。
保存ボタンを押す前に「文字コード」を「UTF-8」に指定してください。この設定をしないと表示したときに文字化けを起こしますので、忘れずに指定しましょう。
保存できたか確認するために「test.html」をダブルクリックか、開けない場合はインターネットブラウザにドラッグ＆ドロップしてみましょう。
画像の場合はドラッグ＆ドロップです。
上の画像のように表示されたら無事完成です。
これであなたもHTMLマスターです。嘘です。
まとめ
今回はこれで終わりにしましょう。
HTMLの入門編としてはこれで十分ですね。というかこれ以上やると疲れちゃう。書いてる僕も疲れちゃう。
次回はWEBサイトを作る上でもう一つ欠かせない『CSS』について解説していきます。
そんなこんなでどうぞよろしくお願いいたしましゅ。
質問や意見がありましたらお気軽にツイッターの方へどうぞ。
ユトピのツイッター
@yutopi60pa