CODING

[超初心者] HTMLとは

投稿日:2019年10月2日 更新日:

どうも、べ〜やんです。

webデザインやプログラミングを学びはじめたとき、最初にHTMLとCSSから学ぶ人が多いのではないでしょうか?
私も一番最初にHTMLから学びました。
ということで、今回はHTMLについての記事を超初心者用に公開したいと思います。







HTMLとは何か?

HTMLとは、WEBページを形作る基礎的な言語で、Hyper Text Markup Language(ハイパー・テキスト・マークアップ・ランゲージ)の略です。

HTMLはマークアップ言語の一種で、厳密にいうとプログラミング言語とは区別されますが、プログラミングを学ぶうえでも必須の言語です。

ここでいうマークアップとは、意味づけや印づけという意味になります。

つまり、HTMLは文章に意味づけをするすごい言語ってことですね!

まだよくわからないですよね。




HTMLを見てみよう

このページや他のWEBページ上で右クリックをして、「ページのソースを表示」を選択してください。そうすると不思議な文章が表示されると思います。全てではありませんが、この<h1>、<div>、<head>や<link>などと書かれているものが、HTMLです。

普段私たちがみているWEBページは、このようにHTMLでここに見出しがあって次は画像があってなどと書かれている文章をコンピューターが読むことで作られています。

まだ意味不明な文章だと思いますが、HTMLの超基礎的は部分だけ見てみましょう。(私は、最初は文章だとも思えませんでしたが…)




意味づけとは

私たちは普段WEBページをみるとき無意識のうちに、(一番上に書かれているし他よりも太字で書かれているからこれが見出しだな)などとわかるのですが、コンピューターにはそれがわかりません。なのでコンピューターにわかるようにHTMLを使って意味づけをします。

HTMLは<h1>や<div>のように<>で囲まれたタグと呼ばれるもので、囲いをつけるように書かれています。

例えば、<h1>ここがタイトル</h1>というように<h1>と</h1>で挟まれた文字列は、これが一番重要な見出しだという意味がつけられ他の文字よりも大きく表示されます。この見出しタグは<h1>~<h6>まで用意されていて数字が小さいほど重要で大きく表示されます。このページでは、「HTMLとは」は<h1>タグで、「HTMLとは何か?」や「意味づけとは」などの箇所が<h2>タグで書かれています。




HTMLは骨組み

HTMLはWEBページを作るための基礎的な言語であるため、HTMLだけでは見栄えがよく機能的なWEBページは作れません。

なので、HTMLで骨組み部分を作り、CSSと呼ばれる他のマークアップ言語やプログラミング言語と組み合わせることでWEBページを形作っていきます。




HTMLを学ぶ方法

では、HTMLを学ぶ方法は何があるでしょうか?

独学

HTMLは基礎的な言語であるため、誰でも簡単に学べるサービスもあるので、ぜひ利用してみてください。オススメは、ドットインストールやProgateなどです。無料から始められますので少しでも興味があれば遊び感覚で触ってみるのもいいでしょう。

逆にオススメ出来ないのは、はじめから本をみて勉強することです。はじめから本をみて覚えようとしても、読むだけで疲れるしお金もかかります。

動画やスライドを見ながら自分の手を動かす方法がオススメです。

スクール

どうしてもプログラマーやWEBデザイナーになりたいという人や、短期間で技術を身につけたい、自分だけではどうしてもサボってしまう人などにオススメです。

私もプログラミングスクールで基礎から学びはじめ、三ヶ月でクラウドワークスで案件を受注することが出来ました。詳しくは他の機会に記事にしたいと思います。

ちなみに、私はプログラミングスクールTechAcademyのWebデザインコースとWordPressコースを受講しました。




おわりに

今回はHTMLとは何かをテーマに記事を公開しましたが、今後は細かいHTMLのルールや使い方なども記事にしていきたいと思います。




-CODING
-

執筆者:


comment

関連記事

爆速!!Emmetを使う

どうも、べ〜やんです。 今回は、コーディングのスピードが抜群に速くできる方法のEmmetの使い方を紹介します。 Emmetとは HTMLやCSSを記述するときに全て手打ちしていると時間がかかってしまい …

[HTML] 特殊文字で空白スペース

どうも、べ〜やんです。 今回は、特殊文字を使って空白スペースを挿入する方法を紹介します。 空白スペース htmlではひとつの半角スペースは空白スペースとして使用できますが、連続した半角スペースはひとつ …

[CSS] white-spaceの使い方/空白・改行

どうも、べ〜やんです。 今回は、半角スペースや改行の表示を指定するプロパティのwhite-spaceを紹介します。 white-spaceとは white-spaceとはHTMLに書いた半角スペースや …

[jQuery] jQueryでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、jQueryを使ってハンバーガーメニューを作る方法を紹介します。 ハンバーガーメニューとは ハンバーガーメニューとは、例えばヘッダーのメニューを隠しておいてアイコンをク …

[CSS] CSSで背景色と文字色を半々にする方法

どうも、べ〜やんです。 今回は、CSSで背景色と文字色が半々で入れ替わるようなデザインの作り方を紹介します。 おしゃれなデザイン 背景色と文字色が半々で入れ替わるような表現が出来ると、一段とおしゃれな …