2019.07.04>>エンジニア養成プログラムNo.1未経験からのITエンジニア転職ならテックエキスパートWebサイトやアプリケーションの開発に興味があるけれど、何から勉強していいかわからない。HTMLやCSSを少しだけ書いたことがあるけれど、よく理解していないといったことはありませんか?この記事では、Web開発の基本であるHTMLやCSS、そしてJavaScriptについて解説していきます。この記事を読むことで、フロントエンドの言語について理解を深めることができます。まとめHTML・CSS・JavaScriptとは最初にHTML、CSS、JavaScriptについて概要を説明していきます。これらの言語に触れたことのない人にもわかりやすいように記述していきます。HTML、CSS、JavaScriptの特徴は以下のようなものですので、これらを意識して読むとより理解が進むでしょう。HTMLはサイトの基本的構造を記述CSSはサイトの表示やレイアウトなどを制御JavaScriptは各要素の動作を制御HTMLHTMLはウェブページの構造を記述するための言語です。「タグ」と呼ばれる記号を使って、ここからここまでは見出し、ここからが文章、ここには写真を入れる等といった指示を出してサイトの構造を作ります。HTMLで作られたコードがブラウザで読み込まれることによって、ウェブページが表示されます。ブラウザがChromeであれば、画面の上で右クリックを押すと「ページのソースを表示」という項目が出てきます。これをクリックすると出てくるのがHTMLのコードです。どのようなウェブページであっても、HTMLのソースコードに従って表示されています。Language」の略称です。ハイパーテキストとは、複数のテキストを結びつける仕組みのことで、ウェブページにハイパーリンクを埋め込むことができます。ハイパーリンクとは、テキストを結びつける参照のことで、クリックすると別のウェブページに移動する下線の付いたリンクのことです。マークアップとはマークアップとは目印をつけるという意味です。ウェブページにおいて文書の各要素がどのような役割を担うのか示します。HTMLの<h1>というタグは見出しという意味ですが、文字列の「タイトル」を下記のように<h1>で囲むことで、文字列「タイトル」が見出しであることを伝えます。<h1>タイトル</h1>*2番目の</h1>は閉じタグといって「h1」の前に「/」をつけますまた、黒い点が先頭に付いたテキストが並んでいる「リスト」を見かけることがあると思いますが、「みかん・メロン・バナナ」のリストを表現するには下記のようにします。<li>みかん</li><li>メロン</li><li>バナナ</li>このようにHTMLは文書の情報を整理することができ、ブラウザを使ったウェブサイトの表示を可能にしています。Googleなどの検索エンジンがサイトの構造を知る用途にも使われているため、検索の上位で表示させるためには、適切なHTMLタグを使う必要があります。CSSHTMLがサイトの構造を記述する言語であるのに対して、CSSは見た目(デザイン)を制御する言語です。HTMLタグで囲んだ文字や各要素の色や大きさ、配置(レイアウト)などを指定することができます。HTMLとCSSという2つの言語があることによって、文書の構造と見た目を分離して記述することができます。Sheets)CSSはカスケーディング・スタイルシートの略称です。スタイルシートは表示を制御する仕組みのことを指します。CSSはHTMLの中に組み込んで使用することもできますが、通常は別のファイルに分けて記述します。<h1>で囲んだ文字を緑色で表示させたいとします。その場合、HTMLに<h1>タイトル</h1>と記述した上で、CSSに以下のように記載します。}上記は、h1タグに対して色を緑にするという意味になります。このようにCSSでは装飾したいタグを指定し、タグに対して何をどのようにしたいのかを記述します。JavaScriptブラウザがウェブページを読み込んだ後、文章や写真が静止しているページを「静的なページ」と呼びます。これに対し、ポップアップが表示されたり、クリックするとアニメーションが動き出したりするようなページを「動的なページ」と呼びます。このウェブページの動的な振る舞いを記述している言語がJavaScriptです。最近はユーザーとのインタラクションを考慮したページが増えていて、JavaScriptの需要が伸びています。ウェブページの各要素の動作を制御する言語JavaScriptはウェブページの動作を記述すると説明しましたが、具体的には次のようなものを指します。メールアドレスのフォームへの入力を求める際、メールアドレスが正しい形式で入力されているかどうかをチェックする検索フォームにテキストカーソルを自動的に表示させるウェブサイト上に複数枚の写真をスライド状に表示させるJavaScriptではフォームの入力が送信された時など、「イベント」に対してどのような動作をするかを記述することができます。ブラウザで実行される言語なので、特別な環境を用意することなく容易に学習を始めることができます。HTML・CSS・JavaScirptはウェブ技術の「フロントエンド」ここまで各言語の概要について紹介してきました。ここからはもう少し踏み込んでウェブ技術における言語の役割などについて解説していきます。ウェブ技術の種類ウェブの技術には様々なものがありますが、代表的なものに「クライアント/サーバーシステム」というものがあります。このシステムは、一つのアプリケーションをクライアントとサーバーに分けるものです。ウェブサイトを閲覧する時には、クライアント(ユーザー)がHTMLをくださいという要求を出し、サーバーがそれに応える形でHTMLを返しています。クライアントの要求を「リクエスト」と呼び、サーバーの応答を「レスポンス」と呼びます。「クライアント/サーバーシステム」はウェブサイトにおける重要な技術なので、専門書を参考にするなどして理解を深めておくといいでしょう。JavaScript)フロントエンドとは「クライアント・サーバーシステム」におけるクライアント側の技術全般を指します。ウェブページの構造を決めるHTML、ページを装飾するCSS、ページの動的な部分を担うJavaScriptといった言語を用いて実装を行います。フロントエンドはウェブアプリケーションの表側の部分を担っています。以前はHTML/CSSと簡単なJavaScriptを書いて終わりといったページも多かったようですが、最近ではフロントエンドにも多様な機能が求められるようになり、エンジニアに要求される知識が増えてきています。JavaScriptではAngularやReactといったフレームワークが台頭しており、より良いエンジニアになるためには、それらのフレームワークも併せて学習することが必要とされています。フロントエンドについてより詳しく知りたい方は、以下の記事を参考にしてみてください。Javaなど)サーバーサイドは、ウェブアプリケーションの裏側を担っています。Javaなどで、クライアントからのリクエストに対してレスポンスするための処理を実装します。クライアントが図書館の本を検索する場合、サーバーサイドでは、クライアントのリクエストに合致した本の情報をデータベースから取り出してきて表示したりしています。ショッピングサイトにおいては、ユーザーの情報を認証したり、ユーザーの選択した商品に関する情報を保持したりしています。インフラ(Linuxなど)ウェブアプリケーションを稼働させるためには、サーバーなどのインフラが必要です。サーバーの他にはLinuxなどのOS、Apacheなどのサーバーソフトウェア、MySQLなどのデータベースが必要です。サーバーは、社内に設置するオンプレスミス型と、AWS(アマゾン・ウェブサービス)などに設置するクラウド型があります。OSとミドルウェアに関しては、ウェブアプリケーションの開発でよく利用される「LAMP」というものがあります。PHP(Perl)の頭文字を組み合わせた略称で、オープンソースで開発できる環境として人気があります。インフラについてより詳しく知りたい方は、以下の記事を参考にしてみてください。最後にフロントエンドの言語を学ぶための書籍を紹介していきます。書籍で勉強して不足分をネットで補う方法がおすすめですが、一人で学習するのが困難になった場合はプログラミングスクールの受講を検討しましょう。初心者は「書籍で独学→分からない箇所はネットで補完」がおすすめ書籍はHTML・CSS・JavaScriptの学習に必要なことが体系的に解説されています。ネットは無料で学べるコンテンツが多い代わりに、情報の正確性や網羅性に欠けることがあります。書籍で勉強し、分からないことがあったらネットで検索しましょう。最低でも1冊は基礎的な知識が正確に紹介されている書籍で勉強するのがおすすめです。それでも分からないときはプログラミングスクールの受講も検討しよう書籍の内容が理解できず、ネットで情報を補完しようと思っても「ネットに書いてあることがよくわからない」ときは、プログラミングスクールで学習するのがおすすめです。わからない箇所は何でも質問できるため、挫折することなく学習を続けることができます。第2版HTML/CSSは、他のプログラミング言語と比べて習得するのは比較的容易ですが、プログラミングを学んだことのない方にとっては理解することが難しいかもしれません。そのため、最初は初心者向けの簡単な書籍から学習するようにしましょう。「スラスラわかるHTML&CSSのきほん」は、知識がまったくない人でも理解できるように書かれています。プログラミング関係の本は、いきなり説明がない関数や用法が突然出てくることがありますが、この本はそんなことはなく一つ一つ丁寧に説明されています。実際にウェブサイトを構築しながら学習を進めるため、「この文法は一体何のために使用するのだろう?」といった疑問が生じることもなく、学んだことをどのように活かすのか理解しながら進めることができます。基本的な文法を学んだ後は、実践に即して色々なものを作ることが大切です。その際に役に立つのがレシピ集です。このデザインレシピ集には、ウェブサイトを作る上で必要な部品の作り方が載っています。テキストの整形、リンクと画像の作り方、テーブルやフォームのデザインなど、実例を通してウェブサイトの部品について学ぶことができます。「こういうサイトを作ってみたい」というイメージが頭にある時に読むととても参考になります。基本的な文法をマスターしたけれど、いざウェブサイトを作るとなると細かいことを忘れてしまうといった方にもおすすめです。レシピ集なので、脱初心者~中級程度のレベルの方が対象の本です。ウェブサイトを作るためのフレームワークです。フレームワークとは、色々な機能を一つにまとめたパッケージのようなもので、簡単なコードを書くだけで複雑な処理をしてくれます。Bootstrapは、HTMLとCSSの基礎を覚えた後に発展として学ぶべきものです。CSS設計の手間が大幅に削減でき、質の高いデザインを実装することができます。Bootstrapはコード一つで簡単に見栄えのよい部品を作ることができるので、HTMLの理解は深まったけれど「CSSを生かした格好いいデザインができない」といった場合に特に効果的です。Bootstrapはページの幅を均等にわける「グリッドシステム」を採用しており、スマートフォンに対応したウェブページを作るのに適しています。Bootstrap4ファーストガイド―CSS設計の手間を大幅に削減!確かな力が身につくJavaScript「超」入門プログラミングの本には、文法を学ぶ本と実例を学ぶ本があります。文法だけを学ぶ本だと、文法をどのように活かすのかイメージすることが難しく、退屈してしまうこともあります。この本は、文法と実例が適度に組み合わされているので、作る楽しさを味わいながら学習することができます。JavaScriptを初めて学ぶ場合は、どのようにウェブサイトで使用されているのかわかりにくいので、この本のようにサンプルを通して学べる書籍をおすすめします。文章もわかりやすく、説明も丁寧ですので、HTMLとCSSを学んだ後にこの書籍でJavaScriptを学ぶといいでしょう。正しく身につく現在発売されているJavaScript入門書の中で最もわかりやすい書籍の一つです。白黒で500ページ以上あるため、初めてJavaScriptに触れる人がいきなり手に取るには敷居が高いです。ここまで紹介してきた本での学習を終えた後、知識を定着させる目的で読むと良い書籍です。基本から応用まで幅広く扱っていますし、サンプルプログラムの質が高く種類も豊富なので、中級以上のレベルに進む方はこの書籍で学習するのがおすすめです。未経験からIT業界に挑戦するポイントをまとめた資料を公開しています。以下のような疑問はありませんか。読むだけで転職が有利になる限定資料をダウンロードしてみてください。まとめ以上、HTML、CSS、JavaScriptについて、言語の特徴や役割、おすすめの書籍について解説してきました。プログラミングの楽しさは、自分で書いたコードが動くのを見ることだと思いますが、HTMLのタグを覚えたり、CSSの使い方を学んだり、JavaScriptの仕組みを勉強したりと、覚えることが多くて嫌になるかもしれません。努力してプログラミングを身につけると、物を作ることの楽しさを味わうことができますし、自分に付加価値を付けることもできます。IT業界で働く場合、ウェブアプリケーションは需要が多く、今後も必要とされることから、その基本的な言語であるHTML、CSS、JavaScriptを理解することはとても大切なことです。line今、需要の高いWebデザイナーへの転職で年収アップ今の年収に満足していますか?もっと年収を上げたいと思っていませんか?そんな方には今需要の高いWebデザイナーがおすすめです。エキスパート)は未経験からのWebデザイナー転職を実現するスクール。効率よくデザインスキル身につけられる教育から、あなたのキャリアを叶える転職まで最後までサポートします。エキスパート)の強みやミッションをまとめたサービス資料をぜひみてください。他のサービスとの違いがわかります。ビジネス、ITなどの分野でライティング、編集、翻訳業務に携わる。ITパスポート」「Webクリエイター能力認定試験」などの資格を所有。前職は靴の販売接客業。エキスパート)を受講やりたいと思った時がやり時!20代前半で転職を成功させた僕の場合スキル0から最速でエンジニア転職を実現。エンジニア紹介TECH::NOTEはこれらのサービスを運営する株式会社divのオウンドメディアです。記事で紹介している情報は更新時・公開時のものです。スクールやサービスの最新情報は、必ずその公式サイトをご確認ください。