【初心者向け】 HTML、CSS、Javascriptの基本について

HTMLとは

HTMLとはHyper Text Markup Languageの略で、Webページを制作するために必要なマークアップ言語のひとつです。

ハイパーテキスト（Hyper Text）とは

ハイパーテキストとは、そのままの意味で高機能なテキストという意味になります。なぜ高機能なのかというと、ハイパーテキストにはハイパーリンクを埋め込むことができるためです。また、ハイパーリンクとはクリックした文字にリンクがついており、クリックすることで別ページに飛ぶことができる文字をハイパーリンクと呼びます。つまり、ハイパーテキストは、Webページ上に他ページへのリンクを貼ることができ、また画像、動画などのデータをリンクとして埋め込みことができます。

マークアップ（Markup）とは

「マークアップ」とは印をつけるという意味ですが、今回は文字にタグと呼ばれるものをつけていくことだと覚えておいてください。

例をあげると

• <h1></h1>
• <p></p>

上記のようなものをタグと言います。タグはそれぞれ違う意味を持っています。タグをつけることで、その部分が見出し、段落、画像など、どんな役割を持っているかコンピューターが理解してくれるようになります。

ほとんどのWebページはこのHTMLと後ほどご紹介するCSSで見た目が作られています。HTMLはWebページの基本になっているということをまずは覚えておいてください。

CSSとは

WebページはHTMLとCSSで見た目が作られていて、HTMLがページの土台を作り、CSSは文字や背景の色を変えたり、余白を調整したりとデザインやレイアウトを決めるものになります。CSSは、HTMLに色や背景を与えてWebページをより良い見栄えにするものです。では、どのようにCSSを書いていくか簡単にご説明いたします。

CSSの活用例

HTML

<h1>色を赤に変える</h1>

CSS

h1 {

color: red;

}

色を赤に変える

上記はHTMLの<h1>タグで囲まれた文章に対してCSSで色を指定しました。

このようにHTMLで指定したタグにCSSを追加することにより、簡単にデザインを変更することができます。HTMLのみでWebページを作成すると、どうしても単調ページになってしまいます。そこでCSSを活用することで、より見やすくユーザーの目を引くWebページを制作することができます。

HTMLとCSSのみでも最低限のWebページは制作できますが、これに動的な動きを加えるとさらにより良いページが作成できます。

Javascriptとは

Javascriptについて馴染みがない方が多いかもしれませんが、近年非常に人気の高いプログラミング言語の一つになります。同じプログラミング言語の「Java」 とは全くの別物になりますので、混合しないようにお気をつけ下さい。

Javascriptは、Webページ制作からWebアプリケーション開発まで幅広く使用されています。その理由の一つとして、クライアントサイドからサーバーサイドまで利用することができるからです。クライアントサイドでは先ほどご紹介しましたHTMLやCSSサーバーサイドはPHPやJava、Rubyなどの言語が使われています。

初心者の方だと一見難しそうに見えるかもしれませんが、初心者の方でも学びやすい言語の一つです。それはブラウザとテキストエディタの準備さえあれば、実際に動かすことが可能だからです。

そのほかのプログラミング言語だと、例えばJavaだとEclipseと呼ばれる開発環境を用意したりと準備だけで時間がかかりますが、Javascriptはブラウザとテキストエディタだけで動かせてしまうので、簡単かと思います。

また、JavascriptはHTMLとCSSで制作したWebページに動的な動きを加えることができます。まずは、HTML、CSS、JavascriptでWebページを作り勉強していくのがいいのではないでしょうか。

HTML、CSS、Javascriptの勉強法

HTML、CSS、Javascriptの基礎を理解した後、実際にどうやって勉強をすればいいか迷う方も多いのではないでしょうか。

そんな方へ早速オススメの勉強法を下記にまとめたのでご覧ください。

• Progate/ドットインストールなどのオンライン勉強サイトの利用
• 既存サイトの模写

それでは順番に説明していきます。

Progate/ドットインストールなどのオンライン勉強サイトの利用（初心者向け）

これらのサイトの名前は最近耳にする方も多いかもしれません。どちらもオンラインでプログラミングを勉強できるサイトになります。

無料で受けられるコースもございますので、初めて勉強を始める方にはとてもおすすめできる勉強方法です。

では、一体どのような感じで勉強していくかというとどちらも段階ごとに演習を進めていき、最終的にサイトを完成させていくというシステムになっています。

こう考えると難しいと感じるかもしれませんが、どのようにコードを書いていけばいいか、初心者にもわかりやすく音声やスライドを用いて説明してくれます。もちろん制作途中で分からなくなった場合はどのようにコードを書けばいいか答えも見れるので、安心して一人でコツコツ進めていくことが可能です。

自分でコードを書きながらサイトができていく過程を経験できるので楽しく勉強することができます。

既存サイトの模写（初心者〜中級者向け）

こちらはProgateやドットインストールである程度の基礎を身につけた人におすすめしたい勉強方法です。

勉強の方法としては、すでに存在しているサイトを一から真似してコーディングしてみるという流れになります。この勉強法は、少し難易度が高く時間がかかります。しかし模写をすることで、確実にレベルがアップすることは確かです。

また模写したサイトは自分のポートフォリオとして見せられるので、エンジニアへの就職を考えている人は面接が有利に働くなんてこともあります。

上記二つほど勉強方法をご紹介しましたが、最近では無料のプログラミングスクールというのも存在します。時間に余裕がある方は、いっそのことプログラミングスクールへ通うのもおすすめです。

おわりに

ここまでHTML、CSS、Javascriptの基本とオススメの勉強方法についてご紹介しましたが、イメージはつかめたでしょうか。

プログラミングは最初は誰しもが難しいと感じるかもしれません。しかし、いざやってみれば難しいよりも楽しい。そういう気持ちが勝るはずです。プログラミングは調べれば調べるほど奥が深いですが、まずは始めることが大切です。

ぜひ皆さんも、この記事をきっかけに勉強を始めて見てはいかがでしょうか。