Designed by pikisuperstar / Freepik

HTML、、聞いたことはあるけど…何をするためのものなのか、よくわかりません。。。
この様な質問を持った方に向けて、初心者にも分かりやすい様に解説をしていきます。
この記事を読むことによって、HTMLへの理解が一気に深まり、3分後にはあなたもHTMLを扱うことができる様になります。
プログラミングの学習を始めていきたいと思っているけど、HTMLってそもそもなに?
そんな質問を解決するための記事になっています。
HTMLの基礎部分から、実際の使い方まで、難しい言葉を排除して分かりやすく説明します。
HTMLの基本
Webサイトは、色々な役割を持った言語がそれぞれの指示の元に働いて成り立っています。
その中の「 HTML 」がサイトの土台、つまり骨組みの役割を与えられているのです。
Yahooもgoogleも、普段皆さんが目にしているサイトも、HTMLの骨組みによって成り立っています。
サイトの裏側をのぞいてみよう
では、次は実際に使われている様子を見にいってみましょう!

え?今まで何気なくインターネット使ってたけど、そんなのどこから見れるの?
サイトの裏側、つまり骨組み部分をのぞくためには、「GoogleChrome」が必要になります。
まだダウンロードしてないよって方はこちらで手順を説明します♪
GoogleChromeをダウンロードしてみよう
① GoogleChromeのページへ。
↪︎こちらからとべます GoogleChrome
② 開いたらアイコンをダブルクリックしてGoogleChromeを起動させます。
このGoogleのアイコンは、今後扱いやすい場所に置いておくと便利ですね!
私はこのアイコンをデスクトップに置いてあります。

③ GoogleChromeを開けたら、画面上で右クリックします。
すると画像の様になるので、「ページのソースを表示」をクリックします。
するとこの様な画面になるかと思います。
どうでしょう?
こちらが「ソースコード」というものです。HTMLをはじめとする様々な言語が働いている場所です。

これを全部覚えるの、、、?すごく難しそう。。。
いえいえ、そんな身構える必要はないですよ♪
これからあなたが覚えていきたい言語の使い方や書き方は全てインターネット上に答えが載っています!

HTMLの書き方
では実際に書いてみましょう!
そのためにはまず、テキストエディタと呼ばれるソフトをダウンロードします。
テキストエディタとは、プログラミング用にできたメモ帳といった感じのものです。
一言でテキストエディタといっても有料のもの、無料のものとたくさんありますが、これは無料のもので問題ありません。
個人的おすすめのテキストエディタ



※いずれも利用者数が多く、日本語のパッチも存在しています。
HTMLで使うタグ
こちらの画像にある、< > で囲まれている、htmlやtitleなどがタグと言われるものです。HTMLの書き方の基本ルールと一緒に説明していきます。
このように、タグで囲ってパソコンに指示を送っています。
そして、 < > 内に記載したタグの内容によって役割が変わります。
よく使うタグの種類としては
- <p> = 文字に使用する。/li>
- <img> = 画像に使用する。
- <h1> = 見出しに使用する。
この他にもたくさんタグはありますが、よく使うものは割と決まっています。
その辺りは詳しくは学習サイトなどを利用してしっかりと学んでいきましょう!

タグの中にタグをいれていく
上記のように、タグ(赤)の中に、タグ(橙)や、タグ(黄)が収納されているかと思います。
この構造を『 入れ子構造 』と言います。
ここまでのHTMLの基本構造
HTMLは基本的な書き方が決まっています。
上記の画像に記載されている所までの構造を解説していきます。
- <!DOCTYPE html> = 「このファイルはHTML文書です」という宣言。
- <html> = 全てのコードを囲む。
- <head> = Webサイトの情報を書き込む。
- <body> = 画面に実際に表示させる情報を書き込む。
この書き方のルールは守っておかないと、パソコンが正しい情報を読み込むことができず、せっかく作ったWebサイトがうまく表示されなくなります。ここはしっかり抑えてくださいね♪

- HTMLを書くなら無料テキストエディタがおすすめ!
- タグの種類によって役割がある。
- HTMLはタグの入れ子構造で成り立っている。
まとめ
いかがだったでしょうか?
ちょっと長くなってしまいましたが、 これからプログラミングを始めるのならHTMLの知識は必ず必要になってきますので、繰り返し読んで理解を深めていってくれたら嬉しいなと思います。
その後に学習サイトを利用して行けば、より理解度が深まっていくでしょう。
今回はHTMLの解説を画像を使いつつ解説いたしました。
コメント