プログラミングを仕事にして収入を上げる方法

HTML・CSS・JavaScriptとは?初心者の独学に最適な本も紹介

作成: 2018.09.18 更新: 2019.07.04

 

>> 世帯年収300万以下限定!
転職成功まで受講料発生なし

Webサイトやアプリケーションの開発に興味があるけれど、何から勉強していいかわからない。HTMLやCSSを少しだけ書いたことがあるけれど、よく理解していないといったことはありませんか?この記事では、Web開発の基本であるHTMLやCSS、そしてJavaScriptについて解説していきます。この記事を読むことで、フロントエンドの言語について理解を深めることができます。

HTMLCSSJavaScriptとは

HTMLとは?

最初にHTML、CSS、JavaScriptについて概要を説明していきます。これらの言語に触れたことのない人にもわかりやすいように記述していきます。

HTML、CSS、JavaScriptの特徴は以下のようなものですので、これらを意識して読むとより理解が進むでしょう。

  • HTMLはサイトの基本的構造を記述
  • CSSはサイトの表示やレイアウトなどを制御
  • JavaScriptは各要素の動作を制御

HTML

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

HTMLで作られたコードがブラウザで読み込まれることによって、ウェブページが表示されます。ブラウザがChromeであれば、画面の上で右クリックを押すと「ページのソースを表示」という項目が出てきます。これをクリックすると出てくるのがHTMLのコードです。

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

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

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

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

マークアップとは

マークアップとは目印をつけるという意味です。ウェブページにおいて文書の各要素がどのような役割を担うのか示します。

例えば、HTMLの<h1>というタグは見出しという意味ですが、文字列の「タイトル」を下記のように<h1>で囲むことで、文字列「タイトル」が見出しであることを伝えます。

<h1>タイトル</h1>

*2番目の</h1>は閉じタグといって「h1」の前に「/」をつけます

また、黒い点が先頭に付いたテキストが並んでいる「リスト」を見かけることがあると思いますが、「みかん・メロン・バナナ」のリストを表現するには下記のようにします。

<li>みかん</li>

<li>メロン</li>

<li>バナナ</li>

このようにHTMLは文書の情報を整理することができ、ブラウザを使ったウェブサイトの表示を可能にしています。また、Googleなどの検索エンジンがサイトの構造を知る用途にも使われているため、検索の上位で表示させるためには、適切なHTMLタグを使う必要があります。

CSS

web design qualification

HTMLがサイトの構造を記述する言語であるのに対して、CSSは見た目(デザイン)を制御する言語です。HTMLタグで囲んだ文字や各要素の色や大きさ、配置(レイアウト)などを指定することができます。

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

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

CSSはカスケーディング・スタイルシートの略称です。スタイルシートは表示を制御する仕組みのことを指します。

CSSはHTMLの中に組み込んで使用することもできますが、通常は別のファイルに分けて記述します。例えば、<h1>で囲んだ文字を緑色で表示させたいとします。その場合、HTMLに<h1>タイトル</h1>と記述した上で、CSSに以下のように記載します。

h1 { color: green; }

上記は、h1タグに対して色を緑にするという意味になります。このようにCSSでは装飾したいタグを指定し、タグに対して何をどのようにしたいのかを記述します。

JavaScript

ブラウザがウェブページを読み込んだ後、文章や写真が静止しているページを「静的なページ」と呼びます。これに対し、ポップアップが表示されたり、クリックするとアニメーションが動き出したりするようなページを「動的なページ」と呼びます。

このウェブページの動的な振る舞いを記述している言語がJavaScriptです。最近はユーザーとのインタラクションを考慮したページが増えていて、JavaScriptの需要が伸びています。

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

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

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

JavaScriptではフォームの入力が送信された時など、「イベント」に対してどのような動作をするかを記述することができます。また、ブラウザで実行される言語なので、特別な環境を用意することなく容易に学習を始めることができます。

HTMLCSSJavaScirptはウェブ技術の「フロントエンド」

ここまで各言語の概要について紹介してきました。ここからはもう少し踏み込んでウェブ技術における言語の役割などについて解説していきます。

ウェブ技術の種類

ウェブの技術には様々なものがありますが、代表的なものに「クライアント/サーバーシステム」というものがあります。このシステムは、一つのアプリケーションをクライアントとサーバーに分けるものです

ウェブサイトを閲覧する時には、クライアント(ユーザー)が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)の頭文字を組み合わせた略称で、オープンソースで開発できる環境として人気があります。

インフラについてより詳しく知りたい方は、以下の記事を参考にしてみてください。

インフラエンジニアの仕事内容や収入、必要な資格・スキルなどを解説

この記事のハッシュタグ

HTMLCSSJavaScriptの学習におすすめの入門書・参考書 5

最後にフロントエンドの言語を学ぶための書籍を紹介していきます。書籍で勉強して不足分をネットで補う方法がおすすめですが、一人で学習するのが困難になった場合はプログラミングスクールの受講を検討しましょう。

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

書籍はHTML・CSS・JavaScriptの学習に必要なことが体系的に解説されています。ネットは無料で学べるコンテンツが多い代わりに、情報の正確性や網羅性に欠けることがあります。

まずは書籍で勉強し、分からないことがあったらネットで検索しましょう。最低でも1冊は基礎的な知識が正確に紹介されている書籍で勉強するのがおすすめです。

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

書籍の内容が理解できず、ネットで情報を補完しようと思っても「ネットに書いてあることがよくわからない」ときは、プログラミングスクールで学習するのがおすすめです。わからない箇所は何でも質問できるため、挫折することなく学習を続けることができます。

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

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

HTML/CSSは、他のプログラミング言語と比べて習得するのは比較的容易ですが、プログラミングを学んだことのない方にとっては理解することが難しいかもしれません。そのため、最初は初心者向けの簡単な書籍から学習するようにしましょう

「スラスラわかるHTML&CSSのきほん」は、知識がまったくない人でも理解できるように書かれています。プログラミング関係の本は、いきなり説明がない関数や用法が突然出てくることがありますが、この本はそんなことはなく一つ一つ丁寧に説明されています。

また、実際にウェブサイトを構築しながら学習を進めるため、「この文法は一体何のために使用するのだろう?」といった疑問が生じることもなく、学んだことをどのように活かすのか理解しながら進めることができます。

HTML5 & CSS3 デザインレシピ集

HTML5 & CSS3 デザインレシピ集

基本的な文法を学んだ後は、実践に即して色々なものを作ることが大切です。その際に役に立つのがレシピ集です。このデザインレシピ集には、ウェブサイトを作る上で必要な部品の作り方が載っています。

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

また、「こういうサイトを作ってみたい」というイメージが頭にある時に読むととても参考になります。基本的な文法をマスターしたけれど、いざウェブサイトを作るとなると細かいことを忘れてしまうといった方にもおすすめです。

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

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

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

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

Bootstrapは、HTMLとCSSの基礎を覚えた後に発展として学ぶべきものです。CSS設計の手間が大幅に削減でき、質の高いデザインを実装することができます。

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

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

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

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

プログラミングの本には、文法を学ぶ本と実例を学ぶ本があります。文法だけを学ぶ本だと、文法をどのように活かすのかイメージすることが難しく、退屈してしまうこともあります。
この本は、文法と実例が適度に組み合わされているので、作る楽しさを味わいながら学習することができます。

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

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

徹底マスター JavaScriptの教科書 プログラミングの教養から、言語仕様、開発技法までが正しく身につく

徹底マスター JavaScriptの教科書 プログラミングの教養から、言語仕様、開発技法までが正しく身につく

現在発売されているJavaScript入門書の中で最もわかりやすい書籍の一つです。ただし、白黒で500ページ以上あるため、初めてJavaScriptに触れる人がいきなり手に取るには敷居が高いです。

ここまで紹介してきた本での学習を終えた後、知識を定着させる目的で読むと良い書籍です。基本から応用まで幅広く扱っていますし、サンプルプログラムの質が高く種類も豊富なので、中級以上のレベルに進む方はこの書籍で学習するのがおすすめです。

TECH::EXPERT 東京・名古屋・大阪・福岡

プログラミング未経験からWebエンジニアとして転職成功まで導くスクール TECH::EXPERT は、挫折しない環境を提供いたします。すべて駅から通いやすい便利な場所。いつでも質問できるメンター(講師)、一緒に頑張る同期がいるから頑張れる。そんな教室を是非見にきてください!

まとめ

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

プログラミングの楽しさは、自分で書いたコードが動くのを見ることだと思いますが、HTMLのタグを覚えたり、CSSの使い方を学んだり、JavaScriptの仕組みを勉強したりと、覚えることが多くて嫌になるかもしれません。

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

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

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

今、需要の高いWebデザイナーへの転職で年収アップ

今の年収に満足していますか? もっと年収を上げたいと思っていませんか?

そんな方には今需要の高いWebデザイナーがおすすめです。

TECH::EXPERT(テック エキスパート)は未経験からのWebデザイナー転職を実現するスクール。効率よくデザインスキル身につけられる教育からあなたのキャリアを叶える転職まで最後までサポートします。
お近くの教室やオンラインでキャリア相談(カウンセリング)を実施中です。大人気ですぐ日程が埋まってしまうので、お早めの予約を!

無料キャリア相談の日程を見る

この記事を書いた人

Yoshi Otobe
Yoshi Otobe
アメリカの大学でジャーナリズムを専攻。帰国後、医療、教育、ビジネス、ITなどの分野でライティング、編集、翻訳業務に携わる。現在はITとプログラミングについて勉強中。「基本情報技術者試験」「ITパスポート」「Webクリエイター能力認定試験」などの資格を所有。