HTML CSS JavaScriptとは？初心者が独学するのにおすすめ書籍は？

といったことはありませんか？

この記事では、Web開発の基本であるHTMLやCSS、そしてJavaScriptについて解説していきます。

この記事を読むことで、フロントエンドの言語について理解を深めることができます。

HTML CSS JavaScriptとは？

HTMLとは？

HTMLはウェブページの構造を記述するための言語です。

「タグ」と呼ばれる記号を使って、ここからここまでは見出し、ここからが文章、ここには写真を入れる等といった指示を出してサイトの構造を作ります。

HTMLで作られたコードがブラウザで読み込まれることによって、ウェブページが表示されます。

ブラウザがChromeであれば、画面の上で右クリックを押すと「ページのソースを表示」という項目が出てきます。

これをクリックすると出てくるのがHTMLのコードです。

どのようなウェブページであっても、HTMLのソースコードに従って表示されています。

ハイパーテキスト・マークアップ・ランゲージ

HTMLは「HyperText Markup Language」の略称です。

ハイパーテキストとは、複数のテキストを結びつける仕組みのことで、ウェブページにハイパーリンクを埋め込むことができます。

ハイパーリンクとは、テキストを結びつける参照のことで、クリックすると別のウェブページに移動する下線の付いたリンクのことです。

マークアップとは

マークアップとは目印をつけるという意味です。

ウェブページにおいて文書の各要素がどのような役割をになうのか示します。

また、Googleなどの検索エンジンがサイトの構造を知る用途にも使われているため、

検索の上位で表示させるためには適切なHTMLタグを使う必要があります。

CSSとは？

HTMLがサイトの構造を記述する言語であるのに対して、CSSは見た目（デザイン）を制御する言語です。

HTMLタグで囲んだ文字や各要素の色や大きさ、配置（レイアウト）などを指定することができます。

HTMLとCSSという2つの言語があることによって、文書の構造と見た目を分離して記述することができます。

カスケーディング・スタイルシート（Cascading Style Sheets）

CSSはカスケーディング・スタイルシートの略称です。

スタイルシートは表示を制御する仕組みのことを指します。

CSSはHTMLの中に組み込んで使用することもできますが、通常は別のファイルに分けて記述します。

JavaScriptとは？

ユーザーの操作に応じて、アニメーションが動いたり、ポップアップが表示されるサイトを見たことがあると思います。

このようなWebサイト上の動作を制御しているのがJavaScriptです。

最近はユーザーとのインタラクションを考慮したページが増えていて、JavaScriptの需要が伸びています。

ウェブページの各要素の動作を制御する言語

JavaScriptはウェブページの動作を記述すると説明しましたが、具体的には次のようなものを指します。

• メールアドレスのフォームへの入力を求める際、メールアドレスが正しい形式で入力されているかどうかをチェックする
• 検索フォームにテキストカーソルを自動的に表示させる
• ウェブサイト上に複数枚の写真をスライド状に表示させる

JavaScriptではフォームの入力が送信された時など、「イベント」に対してどのような動作をするかを記述することができます。

また、ブラウザで実行される言語なので、特別な環境を用意することなく容易に学習を始めることができます。

HTML CSS JavaScirptはウェブ技術の「フロントエンド」

引用元：ITを分かりやすく解説
ここまで各言語の概要について紹介してきました。

ここからはウェブ技術における言語の役割などについて解説していきます。

ウェブ技術の種類

ウェブの技術には様々なものがありますが、代表的なものに「クライアント／サーバーシステム」というものがあります。

このシステムは、一つのアプリケーションをクライアントとサーバーに分けるものです。

ウェブサイトを閲覧する時には、クライアント（ユーザー）がHTMLをくださいという要求を出し、サーバーがそれに応える形でHTMLを返しています。

クライアントの要求を「リクエスト」と呼び、サーバーの応答を「レスポンス」と呼びます。

「クライアント／サーバーシステム」はウェブサイトにおける重要な技術です。

フロントエンド（HTML / CSS / JavaScript）

フロントエンドとは「クライアント・サーバーシステム」におけるクライアント側の技術全般のことです。

ウェブページの構造を決めるHTML、ページを装飾するCSS、ページの動的な部分を担うJavaScriptといった言語を用いて実装を行います。

フロントエンドはウェブアプリケーションの表側の部分を担っています。

以前はHTML／CSSと簡単なJavaScriptを書いて終わりといったページも多かったようですが、最近ではフロントエンドにも多様な機能が求められるようになり、エンジニアに要求される知識が増えてきています。

また、JavaScriptではAngularやReactといったフレームワークが台頭しており、より良いエンジニアになるためには、それらのフレームワークも併せて学習することが必要とされています。

サーバーサイド（Ruby / PHP / Javaなど）

サーバーサイドは、ウェブアプリケーションの裏側を担っています。

サーバーサイドに使用される言語はRuby, PHP, Javaなどで、クライアントからのリクエストに対してレスポンスするための処理を実装します。

例えば、クライアントが図書館の本を検索する場合、サーバーサイドでは、クライアントのリクエストに合致した本の情報をデータベースから取り出してきて表示したりしています。

また、ショッピングサイトにおいては、ユーザーの情報を認証したり、ユーザーの選択した商品に関する情報を保持したりしています。

インフラ（Linuxなど）

ウェブアプリケーションを稼働させるためには、サーバーなどのインフラが必要です。

サーバーの他にはLinuxなどのOS、Apacheなどのサーバーソフトウェア、MySQLなどのデータベースが必要です。

サーバーは、社内に設置するオンプレスミス型と、AWS（アマゾン・ウェブサービス）などに設置するクラウド型があります。

OSとミドルウェアに関しては、ウェブアプリケーションの開発でよく利用される「LAMP」というものがあります。

LAMPはLinux, Apache, MySQL, PHP（Perl）の頭文字を組み合わせた略称で、オープンソースで開発できる環境として人気があります。

JavaScript できることって

JavaScriptを使うと色々な事ができますが、具体的には何ができるのでしょうか。

JavaScriptはWebサイトに動きをつけることに始まり、入力フォームの制御、アプリの作成、データのビジュアライズができたりと、できる事が本当に豊富です。

1つ1つ詳しく解説していきます。

Webサイトに動きをつける

JavaScriptの1番の仕事、「Webサイトの動き付け」では様々なことができます。

ただの動かないページを味付けし、サイトを訪れた人を楽しませ、離脱率を下げたり、こだわりの動きをつけ、企業やショップのブランディングに活用されるなどしています。

最近増えてきた動画サイトの動画コントロールなども可能で、本当にマルチプレイヤーな存在です。

ポップアップウィンドウ

ポップアップウィンドウは主に、閲覧制限をかけたページのIDやパスワードの入力を求める時や、お問い合わせフォームを送る際に

「本当に送信しますが、よろしいでしょうか？」

という確認などに使われます。

クリックした時や、ページを読み込んだ時に表示させることが多いです。

フォーム制御

フォームの内容をサーバーに送る前に、入力欄の内容チェックなどに使われています。

具体的には、

• 「必須項目が入力されているか」
• 「電話番号、メールアドレスの形式が正しいか」

などをチェックします。

不完全な内容を送信しようとした場合のエラーメッセージもJavaScriptを使って表示させています。

Ajax・非同期通信

Googleマップの登場で爆発的に普及した技術です。

ページの読み込みをせずに、サーバーとのデータのやりとりを可能にする技術です。

具体的には、Googleマップではスクロールして地図の場所を変更するたびにJavaScriptでサーバーにアクセスして必要なデータを取ってきて表示させています。

また、ネットショップなどでも使われています。

あらかじめ全商品を表示させず、「もっと見る」ボタンを押すと同一ページ内で商品の画像が追加される仕組みも多くの場合Ajaxを使用しています。

リアルタイムで動くグラフ

JavaScriptは本当に色々なことが可能で、canvas」というタグの中に線や円、様々な図形を描画する命令にも使用することができます。

canvasは様々なデータのビジュアライズにも使用されており、データを可視化したグラフ作成にも使用されます。

また、「Node.js」というサーバーで動くJavaScriptなどを使い、ブラウザにリアルタイムでデータを送り、それでグラフを描画することも可能です。

保険シミュレーションの計算

JavaScriptは、ブラウザ上での計算機としての役割も果たします。

基本的な算術計算が可能なプログラミング言語なので、例えば、「旅行サイトで何泊、何人で宿泊するか」などの見積もり機能などに使用されています。

中でも保険シミュレーションの計算にも多く採用されており、年数やプラン、家族構成など、様々な選択肢を選んだ結果を計算し、その結果により最適なプランの提案や金額の表示などが可能です。

Webサイトの作成

JavaScriptが作成された理由、それは「Webサイトの動きをつけること」なので、やはりJSと言ったらWeb制作が皆さんの頭の中に最初に浮かぶでしょう。

華やかなアニメーション演出や、ボタンにカーソルを合わせると色やデザインを変更させて別ページに飛ぶのが分かるなどの挙動をし、ユーザーのサイト閲覧を助ける役割を担うなど、Webサイト制作に欠かせない存在です

Webアプリの作成

アプリの作成は専門の言語の知識がないと難しいのでは？と思うかもしれませんが、実はブラウザ上で動くWebアプリは、HTML/CSS/JavaScriptを使って作成することができます。

例えば、SlackやChatWorkのようなチャット形式のアプリケーションなどもこれらの技術を使用して作ることができます。

Webアプリの作成には、Webサイト制作と同じようにフロントサイドとサーバーサイドによって異なる技術を使用します。

HTML・CSS・JavaScript 初心者が独学するのにおすすめ書籍5選

HTML・CSS・JavaScript を初心者が独学するのにおすすめ書籍をご紹介します。

書籍で勉強して不足分をネットで補う方法がおすすめですが、一人で学習するのが困難になった場合は、「諦める前に」プログラミングスクールの受講も検討しましょう。

※せっかく学んで諦めるのはもったいないでので

HTMLの勉強法については「HTML CSS 独学 おすすめ 勉強法について徹底解説！」で詳しく解説しています。

初心者は「書籍で独学→分からない箇所はネットで補完」がおすすめ

書籍はHTML・CSS・JavaScriptの学習に必要なことが体系的に解説されています。

ネットは無料で学べるコンテンツが多い代わりに、情報の正確性や網羅性に欠けることがあります。

まずは書籍で勉強し、分からないことがあったらネットで検索しましょう。

最低でも1冊は基礎的な知識が正確に紹介されている書籍で勉強するのがおすすめです。

それでも分からないときはプログラミングスクールの受講も検討しよう

書籍の内容が理解できず、ネットで情報を補完しようと思っても

「ネットに書いてあることがよくわからない」

ときは、プログラミングスクールで学習するのがおすすめです。

わからない箇所は何でも質問できるため、挫折することなく学習を続けることができます。

スラスラわかるHTML&CSSのきほん 第2版

HTML／CSSは、他のプログラミング言語と比べて習得するのは比較的容易ですが、プログラミングを学んだことのない方にとっては理解することが難しいかもしれません。

そのため、最初は初心者向けの簡単な書籍から学習がおすすめ。

「スラスラわかるHTML&CSSのきほん」は、知識がまったくない人でも理解できるように書かれています。

プログラミング関係の本は、いきなり説明がない関数や用法が突然出てくることがありますが、この本はそんなことはなく一つ一つ丁寧に説明されています。

また、実際にウェブサイトを構築しながら学習を進めるため、

「この文法は一体何のために使用するのだろう？」

といった疑問が生じることもなく、学んだことをどのように活かすのか理解しながら進めることができます。

HTML5 & CSS3 デザインレシピ集

基本的な文法を学んだ後は、実践に即して色々なものを作ることが大切です。

その際に役に立つのがレシピ集です。

このデザインレシピ集には、ウェブサイトを作る上で必要な部品の作り方が載っています。

テキストの整形、リンクと画像の作り方、テーブルやフォームのデザインなど、実例を通してウェブサイトの部品について学ぶことができます。

また、「こういうサイトを作ってみたい」というイメージが頭にある時に読むととても参考になります。

基本的な文法をマスターしたけれど、いざウェブサイトを作るとなると細かいことを忘れてしまうといった方にもおすすめです。

レシピ集なので、脱初心者～中級程度のレベルの方が対象の本です。

Bootstrap4ファーストガイド―CSS設計の手間を大幅に削減！

Bootstrap はウェブサイトを作るためのフレームワークです。

フレームワークとは、色々な機能を一つにまとめたパッケージのようなもので、簡単なコードを書くだけで複雑な処理をしてくれます。

Bootstrapは、HTMLとCSSの基礎を覚えた後に発展として学ぶべきものです。

CSS設計の手間が大幅に削減でき、質の高いデザインを実装することができます。

Bootstrapはコード一つで簡単に見栄えのよい部品を作ることができるので、HTMLの理解は深まったけれど「CSSを生かした格好いいデザインができない」といった場合に特に効果的です。

また、Bootstrapはページの幅を均等にわける「グリッドシステム」を採用しており、スマートフォンに対応したウェブページを作るのに適しています。

確かな力が身につくJavaScript「超」入門

プログラミングの本には、文法を学ぶ本と実例を学ぶ本があります。

文法だけを学ぶ本だと、文法をどのように活かすのかイメージすることが難しく、退屈してしまうこともあります。

この本は、文法と実例が適度に組み合わされているので、作る楽しさを味わいながら学習することができます。

特に、JavaScriptを初めて学ぶ場合は、どのようにウェブサイトで使用されているのかわかりにくいので、この本のようにサンプルを通して学べる書籍をおすすめします。

文章もわかりやすく、説明も丁寧ですので、HTMLとCSSを学んだ後にこの書籍でJavaScriptを学ぶといいでしょう。

徹底マスター JavaScriptの教科書

現在発売されているJavaScript入門書の中で最もわかりやすい書籍の一つです。

ただし、白黒で500ページ以上あるため、初めてJavaScriptに触れる人がいきなり手に取るには難易度が高いです。

ここまで紹介してきた本での学習を終えた後、知識を定着させる目的で読むと良い書籍です。

基本から応用まで幅広く扱っていますし、サンプルプログラムの質が高く種類も豊富なので、中級以上のレベルに進む方はこの書籍で学習するのがおすすめです。

HTML CSS JavaScriptとは？初心者が独学するのにおすすめ書籍まとめ

HTML CSS JavaScriptについて、言語の特徴や役割、おすすめの書籍について解説してきました。

プログラミングの楽しさは、自分で書いたコードが動くのを見ることだと思います。

けど、HTMLのタグを覚えたり、CSSの使い方を学んだり、JavaScriptの仕組みを勉強したりと、覚えることが多くてにイヤになっちゃうかもしれませんよね。

しかし、努力してプログラミングを身につけると、物を作ることの楽しさや、自分に付加価値を付けることもできます。

特にIT業界で働く場合、ウェブアプリケーションは需要が多く、今後も必要とされることから、その基本的な言語であるHTML、CSS、JavaScriptを理解することはとても大切なことです。

インターネットに興味があり、プログラミングを学んでみたいという人は、HTML、CSSの学習から始めてみてはいかがでしょうか？