[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門
4.3 (699 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,648 students enrolled

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

Webの仕事に関わる人なら誰でも必要な、「HTML/CSS」とプログラミング言語「JavaScript」の知識をこれ一本で。基礎の基礎から、jQuery/Vue.jsまで学びます。
Bestseller
4.3 (699 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,648 students enrolled
Created by Taniguchi Makoto
Last updated 4/2019
Japanese
Current price: $11.99 Original price: $199.99 Discount: 94% off
4 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10.5 hours on-demand video
  • 3 articles
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • HTML/CSSを用いたWebページの構築
  • JavaScriptを利用したプログラミング

Course content
Expand all 65 lectures 10:37:51
+ はじめに
2 lectures 12:17

本講座で利用する、Visual Studio Codeを日本語版でインストールする方法を紹介します。次のレクチャーと内容がかぶっていますが、こちらに置き換えてご参照ください。

Preview 04:39

ここでは、HTML/CSS/JavaScriptの学習を始めるに当たって、学習しやすい環境を整えます。Webページは、PCさえあればエディタとWebブラウザーで開発を進めることができますが、メモ帳+Edge(Internet Explorer)や テキストエディット+Safariでは、学習しにくいことが多いです。

そこで、ここでは無償で入手可能な Chromeと Visual Studio Codeを入手してセットアップします。本講座でもこれらを使って学習を進めていきますので、合わせておくと良いでしょう。

Preview 07:38
+ 入会フォームを HTML/CSSで作成しよう
13 lectures 02:12:16

ここでは、簡単なHTMLを書いてWebブラウザーに表示してみましょう。タグの書き方や、タグの構成についても学びます。

Preview 11:37

HTMLタグの中には、さまざまな種類があります。ここでは、終了タグが存在しない「空要素」と、同じタグでもその機能などに変化をつけることができる「属性」について学びます。

Preview 12:53

HTMLには、「必ず記述しなければならないタグ」があります。それがなければ、「HTML文書」として認められず、正常に表示されない場合があります。ここでは、HTMLの基本タグについて学びます。

HTMLを作る時に必ず記述する基本要素
10:34

HTMLで記述した文書を、希望するデザインに仕上げていくのがCSSです。ここでは、CSSの基本的な書き方と、複数のタグに同じスタイルを適用できる「内部参照」について学びます。

CSSの基本と内部参照
12:02
sanitize.cssのバージョンとダウンロード場所について
00:01

複数のHTMLファイルで共通した CSSを使う場合は、CSSをファイルとして作成して参照する「外部参照」を使います。また、Webページをデザインするときに、Webブラウザーが標準で持っている CSSをなくす「リセット」作業の方法を学びます

CSS:外部参照と、リセット・ノーマライズ
15:23

ここでは、前のレクチャーの補足として、CSSファイルが別のディレクトリにあったときの対処について紹介します。

補足:パスについて
04:51

HTMLのスタイルを調整していきます。CSSセレクターの種類の1つ「クラス」を使った方法と、色の指定の方法について学びます。

CSS:クラスセレクターと色の指定
10:14
CSS:色指定での16進数記法
08:46
CSS: margin, paddingプロパティと、borderプロパティ
10:10
CSS:フォームパーツのスタイル指定とbox-shadow
13:37
HTML:id属性とlabel要素
08:27

利用するHTMLのタグによっては、余白がうまく効かなかったり、改行されて表示されてしまうことなどがあります。これは、各要素が「inline」と「block」に分かれていて、それぞれ性格が違うため。ここでは、違いや対処法を紹介します。また、inlineの要素であるspanタグを利用します。

HTML/CSS:block, inlineの要素と、spanタグ
13:41
+ レスポンシブWebデザインで、スマホ対応のサイトを作ろう
12 lectures 01:54:53

このセクションでは、CDアルバムを紹介するページを作りながら、RWD(Responsive Web Design)の基本を学びます。まずは、ベース部分の制作を、前のセクションの復習を兼ねて制作していきましょう。

Preview 07:26

Webページにたくさんの要素が入ってくると、それぞれをグループに分類した方が作りやすくなります。そのようなときに便利なのが「セクショニングコンテンツ」と呼ばれる、sectionタグやheader, footerタグです。ここでは、それらの使い方を学びます。

HTML:セクショニングコンテンツ(header, section)
05:17

前のレクチャーで作成したHTMLに、スタイルシートを指定していきます。ここでは、これまでの復習となるスタイルを各種使っていきます。

CSS:タイトルの CSSを整える
10:10
CSS:floatを使った回り込み
10:12
CSS:clearで回り込みを解除する
07:32

箇条書きや順番に沿ったコンテンツを記述するときに利用するのが、「リスト」。HTMLでは olまたは ulタグで記述します。さまざまな属性や CSSプロパティが存在するため、これらについて学びます。

HTML/CSS:ol, ulタグでリストを作る
08:55

レクチャー16で紹介した「float」プロパティを利用して要素を回り込ませると、画面全体が崩れてしまう現象が発生します。これは、floatをした要素の高さがなくなってしまうためですが、これを解消するテクニックが clearfixです。ここでは、全体のスタイルを調整しながら clearfixについて学びます。

CSS:floatの不具合を調整する clearfix
10:18

Webページに欠かせない要素がリンクです。他のページやサイトに自在にリンクを張って行き来することができます。ここでは、リンクを張るための aタグについて学びます。

なお、映像内で利用しているリンク先のURLは次の通りです。
https://www.youtube.com/watch?v=vjqTkOISzeY

HTML: リンクを張る aタグ
07:39
HTML:「実体参照」でコピーライト表記を追加する
04:46
CSS:Webフォントを使う
12:38

RWDのレイアウトを作るためには、「メディアクエリー」という CSSの記述を使って、画面の横幅が狭い環境でレイアウトを変えていきます。ここでは、メディアクエリーの使い方と RWDレイアウトのもう一つの作り方、「リキッドレイアウト」について学びます。

CSS:レスポンシブWebデザイン(RWD)のレイアウトを作る(メディアクエリー・リキッドデザイン・ブレイクポイント)
15:40

CSSでは、簡単なアニメーションを作ることもできます。ここでは、transitionプロパティを利用してアニメーションを実装する方法を学びます。

CSS:CSSアニメーションを使う(Transition)
14:20
+ Bootstrapで素早く Webページを作ろう
10 lectures 01:36:30

Bootstrapを利用するには、ファイルをダウンロードして取り込む方法と、CDN(Content Delivary Network)というしくみを使って、ファイルを直接参照して利用する方法があります。ここでは、基本のHTMLを作ってから CDNを利用して Bootstrapを参照する方法を学びます。

Preview 09:42

Bootstrapで Webページを構成していくには、決められた class属性を付加した要素を入れることで、スタイルを整えていきます。ここでは、最初に使う要素として Containerの使い方を学びます。

Bootstrap:Containerを使う
07:34

Bootstrapの最も特徴的なものが「グリッドシステム」です。画面を12分割にして、自由にエリアを分割する事ができ、さらにスマートフォンなどさまざまな画面サイズに応じて、柔軟にレイアウトを変化させることができます。ここでは、そんなグリッドシステムについて学んでいきましょう。

Bootstrap:グリッドシステムを使う
13:31

Bootstrapのグリッドシステムには、「オフセット」という空欄を作るしくみがあります。ここでは、オフセットの使い方と、またフォームパーツの種類について学びます。

なお、映像内で書き込んでいる formタグの action属性は次の通りです。

https://book.h2o-space.com/html/form.php

Bootstrap/HTML:オフセットとフォームパーツ
14:02
Bootstrap/HTML:フォームのスタイルと placeholder属性
07:07

フォームの中で、多くの選択肢から一つを選ぶときに使われるのが「ドロップダウンリスト」です。ここでは、selectタグの使い方を学びます。

HTML:ドロップダウンリスト(リストボックス)を作る
10:15

複数選択ができる選択肢を準備するときに使われるのが、チェックボックスです。ここでは、labelタグの正しい使い方を含めて学びます。

HTML:チェックボックスを作る
08:34

ここでは、単一の選択肢を選べるラジオボタンを作りながら、CSSでプロパティの優先度を最優先まで引き上げる、!important指定について学びます。

HTML/CSS:ラジオボタンと、!important指定
13:50
Bootstrap 4での Labelから Badgeへの名称変更
00:00

Bootstrapにはボタンなども簡単に作るスタイルが準備されています。色もさまざまなものから選ぶことができます。ここでは、ボタンとラベルの作り方を学びます。

Bootstrap:ボタンとラベルを作る
11:55
+ JavaScriptで今日の日付を表示しよう
6 lectures 54:52

まずは、今回作成する日付表示プログラムの、HTMLとCSSを準備します。Bootstrapを使って、画面を素早く作っていきましょう。

Preview 10:28

JavaScriptの基本は、「オブジェクト」という対象に動作をさせることです。これを「メソッド」といい、またメソッドの細かな情報を伝えるのが「パラメーター」です。ここでは、そんなオブジェクトの操作を通じて各用語について学びます。

JavaScript:オブジェクト・メソッド・パラメーター
11:52

JavaScriptで値を扱うときは、クオーテーション記号(' または ")が前後にあるかないかで、その扱いが大きく異なります。また、「+」の記号も足し算として使われたり、「文字列連結」として使われるなどややこしいです。ここでは、そんな文字や数字の扱いについて学びます。

JavaScript:文字列・数字と四則演算、文字列連結
09:45

プログラミングに欠かせないのが、計算結果などを一時的に保存しておける「変数」です。ここでは、変数の使い方を学びます。

JavaScript:変数の扱い
12:51

JavaScriptでオブジェクトを利用するには、「インスタンス化」をしなければなりません。しかし、documentオブジェクトは最初からインスタンス化されていたり、Mathオブジェクトはそのまま使えるなど、例外も多々あります。ここではそんな、オブジェクトとインスタンスについて学びます。

JavaScript:オブジェクトとインスタンス
06:05
JavaScript:Dateオブジェクトを使ってプログラムを仕上げよう
03:51
+ イベントドリブンな、ストップウォッチプログラムを作成しよう
9 lectures 01:33:16

まずは、このレッスンで使う HTMLや CSSを準備していきましょう。これまでに学んだ、Emmetや Bootstrapなどの知識を使いながら、画面を作っていきます。

Preview 10:48

今回のスクリプトは、画面に文字を出力するだけではなく、その内容を次々に書き換えていかなければなりません。こんな時に使えるのが、「getElementById」メソッドを使った要素の取得です。ここでは、このメソッドの使い方とプロパティについて学びます。

JavaScript:getElementByIdとプロパティで要素を書き換えよう
11:30

プログラミングで基本となるのが「制御構造」という構造です。ここでは、制御構造の1つ「選択」という、ある条件に沿ってプログラムの動作の流れを変えるという手法として、if構文を学びます。

JavaScript:if構文で条件に沿ったプログラムを作ろう
09:28

プログラミングで、同じような記述が複数回登場する場合は「ファンクション(関数)」にまとめておくと便利です。ここでは、ファンクションの定義の方法や使い方を学びます。

JavaScript:function(関数)定義をしよう
12:33

ある要素に、イベントを定義するメソッドが「addEventListener」です。ユーザーのクリックやマウスの移動、キーボードの操作など、さまざまなイベントに対応したプログラムを作成することができます。ここでは、スタートボタンを動作させてみましょう。

JavaScript:イベントドリブンなプログラムを作成しよう
07:14

setIntervalメソッドを使って、間隔を指定すると、画面が表示された後でその内容を定期的に変えていくことができます。

これを使えば、アニメーションを実装したり、ずっとなにかを動かし続けるプログラムを作成できます。ここでは、タイマーの表示部分を実装して行きましょう。

JavaScript:setIntervalで定期的に実行されるプログラムを作ろう
10:39

JavaScriptの変数には、宣言した場所の範囲内でしか利用できない「スコープ」が存在します。全体で使えるようにするには、範囲の外で宣言する「グローバル変数」にする必要があります。ここでは、そんな変数のしくみについて学びましょう。

JavaScript:変数のスコープを理解しよう
10:43

62秒は、1分2秒。128秒は 2分 8秒など、経過秒数から時・分・秒といった記述に変換するには、計算をする必要があります。ここでは、割り算やかけ算を使って、時間を正しく計算してみましょう。

JavaScript:秒数から、分と時を計算しよう
06:58

addEventListenerメソッドの中など、対称の要素が明確な場合、それを簡単に指定できる「this」という記述が利用できます。ここでは、thisの記述と classListなどを使って、STOPボタンを実装していきます

JavaScript:thisを使って、STOPボタンを実装しよう
13:23
+ Ajax通信でフォトライブラリーを作成しよう
8 lectures 01:22:42

ここでは、基本の HTMLを構築していきます。上部のタイトルバーを position: fixedというプロパティを使って画面上部に固定しましょう。

Preview 13:35

positionプロパティには、fixedの他に absoluteと relativeがあります(標準は static)。これらの使い方も学びながら、画面全体のデザインを整えていきましょう。

HTML/CSS:ページを形作っていこう2 - position: relative, absolute
05:33

JSONデータは、簡単な記述でデータを記述できるもので、JavaScriptでも簡単に扱う事ができます。複数の要素は、「配列」という形で取得できるため、ここでは配列についても学んでいきましょう。

JavaScript:JSONデータを配列で操ろう
11:25

JavaScriptで HTMLを作り出す場合は、innerHTMLプロパティに直接タグを書き入れる方法と、createElementメソッドを使って要素を作り、appendChildメソッドで追加する方法があります。ここでは、後者の方法を使って写真部分を作り出しましょう。

JavaScript:createElementと appendChildで HTML要素を作ろう
12:12

JSONデータを読みながら、画面を作っていくには JSONに含まれた件数だけ「繰り返し」処理を行なう必要があります。ここでは、制御構造の1つ「繰り返し」構文の for構文を学びましょう。

JavaScript:for構文で繰り返し処理をしよう
10:09

Ajax通信を行なうには、XMLHttpRequestオブジェクトを利用します。ただし、このオブジェクトは使い方が特殊なので、注意しながら使っていきましょう。ここではまずは基本の使い方を紹介します。

JavaScript:Ajax通信を行なおう
09:53

Ajax通信は「非同期通信」と呼ばれる、バックグラウンドで通信を行なう方式です。そのため、データの受信を待たずに処理が進んでしまうため、データが受信できたかどうかを監視しておかなければなりません。ここでは、onreadystatechangeイベントや、readyStateプロパティを利用して Ajax通信の結果を受け取るプログラムを作成してみましょう。

JavaScript:Ajax通信で受信したデータを処理しよう - 論理演算子
13:30

Ajax通信で得られたデータを使って、画面を作り上げましょう。ここでは、これまで紹介してきて知識の復習となります。

JavaScript:画面を仕上げよう
06:25
+ JavaScriptライブラリーを利用しよう
5 lectures 48:14

JavaScriptは、Ajax通信を行なったり、画面上の要素を操作するのは得意とは言えず、非常に複雑なプログラムになってしまいます。そこで、近年画面の書き換えなどによく使われているのが jQueryです。ここでは、jQueryを実際に導入して体験してみましょう。

Preview 13:41

jQueryで Ajax通信が行えるようなったので、ここでは appendや appendToメソッドを使って画面を作り上げていきましょう。

jQuery:Ajax通信を行なってプログラムを仕上げよう
13:21

jQueryによって、Ajax通信は簡単になりましたが、jQueryでもやはり苦手な部分はあり、HTMLをつくり出すのが苦手です。そこで、これを補うために近年利用されているのが「Vue.js」というビュー専用のライブラリーです。ここでは、Vue.jsを使って HTMLを作り出すプログラムを作成してみましょう。

Preview 08:49

ここでは、作成したプログラムを書き換えて Vue.jsでフォトライブラリーの画面を作り上げて仕上げていきます。

Vue.js:Vue.jsで画面を作り上げよう
12:20
ボーナスレクチャー
00:03
Requirements
  • PCの操作Webブラウザーの操作
  • Webブラウザーの操作
Description

HTMLとCSS、JavaScriptなどの Webの知識は、今や Webに関わる仕事はもちろんの事、アプリ開発やメディア制作など、あらゆる仕事に必要になっています。

これら、フロントエンド(表示される画面に関わる要素)を操るエンジニアを「フロントエンドエンジニア」などと呼びます。この講座では、そんなフロントエンドエンジニアになるための基礎知識となる、HTMLと CSS、プログラミング言語の JavaScriptを総合的に学びます。

スマートデバイスに対応した「レスポンシブWebデザイン」での、サイト制作や「CSSフレームワーク」を用いて、簡単に Webサイトデザインを行なう方法、そして JavaScriptでは「Ajax通信」や「jQuery/Vue.js」などの「JavaScriptフレームワーク」を用いたプログラミング開発まで学ぶことができます。

本講座を修得すれば、簡単な Webページなら自分の力で組み上げることができるようになるでしょう。また、他のチームメンバーが作った Webページの構造を理解し、変更したり、制作に参加するといった事もできます。

なお、本講座は同じ作者の、『これからWebをはじめる人のHTML&CSS, JavaScriptのきほんのきほん(マイナビ出版刊)』に基づいて映像講義にしています。本講座だけでも学ぶことができますが、書籍を手元に置けばより理解が深まることでしょう。合わせてご利用ください。

Who this course is for:
  • Web制作を学びたい方
  • アプリ制作等でHTMLと CSSおよび、JavaScriptの知識が必要な方