【初心者向け】 HTMLの第一歩！書き方の基本を、画像を使って分かりやすく解説します

Designed by pikisuperstar / Freepik

HTML、、聞いたことはあるけど…何をするためのものなのか、よくわかりません。。。

この様な質問を持った方に向けて、初心者にも分かりやすい様に解説をしていきます。

この記事を読むことによって、HTMLへの理解が一気に深まり、3分後にはあなたもHTMLを扱うことができる様になります。

プログラミングの学習を始めていきたいと思っているけど、HTMLってそもそもなに？

そんな質問を解決するための記事になっています。
HTMLの基礎部分から、実際の使い方まで、難しい言葉を排除して分かりやすく説明します。

HTMLの基本

Webサイトは、色々な役割を持った言語がそれぞれの指示の元に働いて成り立っています。

Designed by Freepik

その中の「 HTML 」がサイトの土台、つまり骨組みの役割を与えられているのです。

Yahooもgoogleも、普段皆さんが目にしているサイトも、HTMLの骨組みによって成り立っています。

サイトの裏側をのぞいてみよう

では、次は実際に使われている様子を見にいってみましょう！

え？今まで何気なくインターネット使ってたけど、そんなのどこから見れるの？

サイトの裏側、つまり骨組み部分をのぞくためには、「GoogleChrome」が必要になります。

まだダウンロードしてないよって方はこちらで手順を説明します♪

GoogleChromeをダウンロードしてみよう

① GoogleChromeのページへ。
　↪︎こちらからとべます GoogleChrome

② 開いたらアイコンをダブルクリックしてGoogleChromeを起動させます。

このGoogleのアイコンは、今後扱いやすい場所に置いておくと便利ですね！
私はこのアイコンをデスクトップに置いてあります。

③ GoogleChromeを開けたら、画面上で右クリックします。
すると画像の様になるので、「ページのソースを表示」をクリックします。

するとこの様な画面になるかと思います。

どうでしょう？

こちらが「ソースコード」というものです。HTMLをはじめとする様々な言語が働いている場所です。

これを全部覚えるの、、、？すごく難しそう。。。

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

HTMLの書き方

では実際に書いてみましょう！

そのためにはまず、テキストエディタと呼ばれるソフトをダウンロードします。

テキストエディタとは、プログラミング用にできたメモ帳といった感じのものです。

一言でテキストエディタといっても有料のもの、無料のものとたくさんありますが、これは無料のもので問題ありません。

個人的おすすめのテキストエディタ

・Visual Studio Code

Visual Studio Code – コード エディター | Microsoft Azure

ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。

azure.microsoft.com

・ATOM

A hackable text editor for the 21st Century

At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We c...

atom.io

CotEditer

CotEditor

Text Editor for macOS

coteditor.com

※いずれも利用者数が多く、日本語のパッチも存在しています。

HTMLで使うタグ

こちらの画像にある、< > で囲まれている、htmlやtitleなどがタグと言われるものです。HTMLの書き方の基本ルールと一緒に説明していきます。

このように、タグで囲ってパソコンに指示を送っています。
そして、 < > 内に記載したタグの内容によって役割が変わります。

よく使うタグの種類としては

この他にもたくさんタグはありますが、よく使うものは割と決まっています。

その辺りは詳しくは学習サイトなどを利用してしっかりと学んでいきましょう！

✅おすすめの学習サイトなどはこちらでまとめてあります♪

プログラミングでお金を稼ぐための10ステップ【初心者向け】

プログラミングで副業を考えているけど難しそう...

kensblog.site

タグの中にタグをいれていく

上記のように、タグ(赤)の中に、タグ(橙)や、タグ(黄)が収納されているかと思います。
この構造を『 入れ子構造 』と言います。

ここまでのHTMLの基本構造

HTMLは基本的な書き方が決まっています。
上記の画像に記載されている所までの構造を解説していきます。

この書き方のルールは守っておかないと、パソコンが正しい情報を読み込むことができず、せっかく作ったWebサイトがうまく表示されなくなります。ここはしっかり抑えてくださいね♪

まとめ

いかがだったでしょうか？
ちょっと長くなってしまいましたが、　これからプログラミングを始めるのならHTMLの知識は必ず必要になってきますので、繰り返し読んで理解を深めていってくれたら嬉しいなと思います。

その後に学習サイトを利用して行けば、より理解度が深まっていくでしょう。

今回はHTMLの解説を画像を使いつつ解説いたしました。