「Webサイトやアプリケーションの開発に興味があるけれど、何から勉強していいかわからない」
「HTMLやCSSを少しだけ書いたことがあるけれど、よく理解していない』
このようなことはありませんか？
この記事では、Web開発の基本であるHTMLやCSS、そしてJavaScriptについて解説していきます。
本記事を読むことで、フロントエンドの言語について理解を深めることができるでしょう。
この記事もオススメ
この記事の目次
HTML・CSS・JavaScriptとは
最初に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
HTMLがサイトの構造を記述する言語であるのに対して、CSSは見た目（デザイン）を制御する言語です。HTMLタグで囲んだ文字や各要素の色や大きさ、配置（レイアウト）などを指定することができます。
HTMLとCSSという2つの言語があることによって、文書の構造と見た目を分離して記述することができます。
カスケーディング・スタイルシート（Cascading Style Sheets）
CSSはカスケーディング・スタイルシートの略称です。スタイルシートは表示を制御する仕組みのことを指します。
CSSはHTMLの中に組み込んで使用することもできますが、通常は別のファイルに分けて記述します。例えば、<h1>で囲んだ文字を緑色で表示させたいとします。その場合、HTMLに<h1>タイトル</h1>と記述した上で、CSSに以下のように記載します。
h1 { color: green; }
上記は、h1タグに対して色を緑にするという意味になります。このようにCSSでは装飾したいタグを指定し、タグに対して何をどのようにしたいのかを記述します。
JavaScript
ユーザーの操作に応じて、要素のアニメーションが作動したり、ポップアップが表示されるサイトを見たことがあると思います。このようなWebサイト上の動作を制御しているのがJavaScriptです。最近はユーザーとのインタラクションを考慮したページが増えていて、JavaScriptの需要が伸びています。
ウェブページの各要素の動作を制御する言語
JavaScriptはウェブページの動作を記述すると説明しましたが、具体的には次のようなものを指します。
- メールアドレスのフォームへの入力を求める際、メールアドレスが正しい形式で入力されているかどうかをチェックする
- 検索フォームにテキストカーソルを自動的に表示させる
- ウェブサイト上に複数枚の写真をスライド状に表示させる
JavaScriptではフォームの入力が送信された時など、「イベント」に対してどのような動作をするかを記述することができます。また、ブラウザで実行される言語なので、特別な環境を用意することなく容易に学習を始めることができます。
【このページを見ている方限定】受講料30,000円OFF
- プログラミングは難しくて挫折しそう
- 独学でちゃんとスキルが身につくのか不安
- 効率的にプログラミングスキルを習得する方法を知りたい
ぜひ無料カウンセリングにお申し込みください！
HTML・CSS・JavaScriptはウェブ技術の「フロントエンド」
ここまで各言語の概要について紹介してきました。ここからはもう少し踏み込んでウェブ技術における言語の役割などについて解説していきます。
ウェブ技術の種類
ウェブの技術には様々なものがありますが、代表的なものに「クライアント／サーバーシステム」というものがあります。このシステムは、一つのアプリケーションをクライアントとサーバーに分けるものです。
ウェブサイトを閲覧する時には、クライアント（ユーザー）が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）の頭文字を組み合わせた略称で、オープンソースで開発できる環境として人気があります。
インフラについてより詳しく知りたい方は、以下の記事を参考にしてみてください。
インフラエンジニアの仕事内容や収入、必要な資格・スキルなどを解説
HTML・CSS・JavaScriptの学習におすすめの入門書・参考書 5選
最後にフロントエンドの言語を学ぶための書籍を紹介していきます。
書籍で勉強して不足分をネットで補う方法がおすすめですが、一人で学習するのが困難になった場合はプログラミングスクールの受講を検討しましょう。
HTMLの勉強法については「HTML勉強法おすすめ10選！無料学習サイト・アプリ・本を紹介」で詳しく解説しています。
この記事もオススメ
初心者は「書籍で独学→分からない箇所はネットで補完」がおすすめ
書籍は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の仕組みを勉強したりと、覚えることが多くて嫌になるかもしれません。
しかし、努力してプログラミングを身につけると、物を作ることの楽しさを味わうことができますし、自分に付加価値を付けることもできます。
特にIT業界で働く場合、ウェブアプリケーションは需要が多く、今後も必要とされることから、その基本的な言語であるHTML、CSS、JavaScriptを理解することはとても大切なことです。
インターネットに興味があり、プログラミングを学んでみたいという人は、HTML、CSSの学習から始めてみてはいかがでしょうか？
関連記事
未経験からの転職の悩みを解決！無料カウンセリング開催中【転職成功人数4400名以上！※1】
こんな不安や疑問はありませんか？
・未経験から転職して、本当に年収が上がるのか
・ITエンジニア転職後の働き方や稼ぎ方が想像できない
・スキルゼロからITエンジニアとしてフリーランスになれるのか
カウンセリングでは、ITエンジニア転職やプログラミング学習を知り尽くしたプロのカウンセラーが、あなたの悩み解決をサポートします。満足度93%※1、累計利用者数は42,000人以上！※2
無料で相談できますので、気軽にご参加ください。【テックキャンプは給付金活用で受講料最大70%オフ※4】
※1.2018年10月24日〜11月16日(N=106) 2.2020年12月時点 3.テックキャンプ エンジニア転職は経済産業省の第四次産業革命スキル習得講座の認定も受けており、条件を満たすことで支払った受講料の最大70％(最大56万円)が給付金として支給されます
