「そもそもHTMLって何？」
「わかりやすく解説してほしい。」
「説明ではなくやり方を知りたい。」
という方のために書きました。では早速本題に入りましょう。
-目次-
- HTMLについて
- タグについて
- テキストエディタをダウンロードしよう
- HTMLファイルをつくろう
- よく使うタグ10個
- bodyタグの中に書いてみよう
HTMLについて
「HTML」とは、Webサイトをつくる「言語」です。HTMLがわかるようになれば、自分でウェブサイトが作れるようになります。
どんなものかイメージが湧かない…という方は
右クリックで出てくるメニューの一番下にある
「検証」というボタンを押してみてください。
するとこんな画面がでてきます。このコードの羅列がWebサイトです。大体イメージ出来ましたか？
ではまずは実際にHTMLを書く前に…
タグについて
ここで1つ、「タグ」という用語を説明しておきます。
HTMLタグとは、<title> や <body>などの、< >で囲まれた記号のことです。タグにはそれぞれ意味があり、文章の構造を明確にする役割を果たしています。
HTMLという言語は「開始タグ」と「終了タグ」があって、例えば
<title> ← 開始タグ
</title> ← 終了タグ
開始タグにスラッシュ（/）が入れられたものが終了タグで、「このタグはここで終わりです」と示しています。
テキストエディタをダウンロードしよう
難しい専門用語なんかはいったん置いといて、まずは簡単にHTMLを書いていきましょう。
HTMLファイルを作るにあたって、テキストエディタというソフトが必要になります。テキストエディタとは、HTMLなどのファイルを書いていくソフトです。
無料のソフトではMicrosoft社の「Visual Studio Code」がおすすめです。有料でも良いという方にはAdobe社の「Dream Weaver」をおすすめします。まずはインストールしてみましょう。
HTMLファイルをつくろう
無事にインストールして起動したら、「ctrl」キーと「N」キーを同時に押してHTMLファイルを作ります。
このファイルを保存するときは、「ctrl」キーと「S」キーを同時に押しましょう。保存先は分かりやすくデスクトップにしておきましょう。
作業中もこまめに「ctrl」+「S」で保存するクセをつけておくことをオススメします。
HTMLファイルを作成したら、「Visual Studio Code」の方は「！」と入力して「TAB」キーを押します。（「html:5」→「TAB」でもできます。）
「Dream Weaver」の方は右下の「作成」をクリックしましょう。
するとHTMLの雛型が出てきます。
こんな感じです。理解しようとせず、慣れていきましょう。
よく使うタグ10個
ここでよく使うHTMLタグを紹介しておきます。この10個のタグを覚えるだけでほとんどのWebサイトの形を作れます。
<html></html>：HTMLで書かれた文書であることを指定するタグ。
<head></head>：Webサイトの説明、タイトルなどの情報を入れるタグ。
<title></title>：Webサイトのタイトル。
<body></body>：文書の本文を指定する。
<header></header>：サイトのヘッダー部分。
<footer></footer>：サイトのフッター部分。
<p></p>：テキスト（段落）を入れるタグ。
<h1></h1>～<h6></h6>：文書の見出しを指定するタグ。※数字は見出しの大きさを示しており、h1がもっとも大きい見出しを表す。h2、h3、と数を追うごとに、より小さい見出しとなる。
<a></a>：リンクを挿入するタグ。
<img></img>：画像を挿入するタグ。
この<body>タグの中に書いていくのが、実際にみなさんの目に見える部分です。
bodyタグの中に書いてみよう
では試しに書いていきましょう。
<body>タグの開始タグと終了タグの間に「h1」と書いて「TAB」を押してみて下さい。
その「h1」タグの中に「見出し」とテキストを入力します。
書き終えたら「ctrl」+「S」で保存してブラウザで確認して見ましょう。
デスクトップのhtmlファイルをブラウザの上にドラッグ＆ドロップすると
先ほどテキストエディタで入力したh1タグが表示されています。
では次にｐタグを書いていきます。
「p」→「TABキー」
ｐタグの中に文字を入れていきます。
ブラウザで検証してみましょう
htmlのファイル名のところで「右クリック」→「ブラウザで開く」
すると先ほどのｐタグの中に書いたテキストが表示されています。
こうやってホームページを作っていきます。
さいごに
いかがでしたか？
今回ブログをこのテーマにしようと思ったのは、私が独学で勉強を始めたときに分かりづらいサイトが多かったからです。
小難しい用語が多かったりするとモチベーションにも影響してくるので、まずは必要最小限のインプットでアウトプットする楽しさを知ったほうが良いと個人的に思います。是非この機会にHTMLを書いてみてください。
最後まで読んでいただき、ありがとうございました。