PRO COURSE
フロントエンドエンジニアになりたい人のHTML/CSS/JavaScript入門講座
Webの仕事に関わる人に必須の HTML/CSS とJavaScriptの知識をこれ一本で。基礎からjQuery/Vue.jsまで学べるフロントエンドエンジニアを目指す人にピッタリのコース。
フロントエンドエンジニアの最初の一歩は
このコースで決まり!!
フロントエンド(表示される画面に関わる要素)を操るエンジニアを「フロントエンドエンジニア」と呼びます。この講座では、そんなフロントエンドエンジニアになるための基礎知識となる、HTMLと CSS、プログラミング言語の JavaScriptを総合的に学びます。
HTMLとCSS、JavaScriptなどの Webの知識は、今や Webに関わる仕事はもちろんのこと、アプリ開発やメディア制作など、あらゆる仕事に必要になっています。
スマートデバイスに対応した「レスポンシブWebデザイン」での、サイト制作や「CSSフレームワーク」を用いて、簡単に Webサイトデザインを行なう方法、そして JavaScriptでは「Ajax通信」や「jQuery/Vue.js」などの「JavaScriptフレームワーク」を用いたプログラミング開発まで学ぶことができます。
なお、このコースは本コースの講師の著書『これからWebをはじめる人のHTML&CSS, JavaScriptのきほんのきほん(マイナビ出版刊)』に基づいた映像講義です。本コース単独でも学ぶことができますが、書籍を手元に置けばより理解が深まることでしょう。合わせてご利用ください。
こんな方にオススメ
- Web制作を学びたい方
- アプリ制作等でHTMLと CSSおよび、JavaScriptの知識が必要な方
- フロントエンドエンジニアを目指している方
このコースを修了すれば、簡単な Webページなら自分の力で組み上げることができるようになるでしょう。また、他のチームメンバーが作った Webページの構造を理解し、変更したり、制作に参加することもできるようになります。
フロントエンドエンジニアとしての最初の一歩を踏み出しましょう!
Course content
Total
10 hours 23 minutes
Preview
You can preview lectures with this label
Section 1:はじめに【2023年改訂】 | ||||
1 | Webの開発環境を整えよう(macOS編) | Preview | 6:55 | |
2 | Webの開発環境を整えよう(Windows編) | Preview | 4:28 | |
Section 2:入会フォームを HTML/CSSで作成しよう【2023年改訂】 | ||||
3 | HTMLファイルを作ってみよう | Preview | 4:09 | |
4 | HTMLタグを書いてみよう | 8:14 | ||
5 | 「属性」でHTMLタグを調整しよう | 9:55 | ||
6 | パスワード入力欄を作ろう | 3:27 | ||
7 | HTMLの基本タグを挿入しよう | 5:28 | ||
8 | HTMLのheadタグに文字コードやタイトルを挿入しよう | 4:48 | ||
9 | タグの入れ子構造と、空要素の書き方 | 2:54 | ||
10 | CSSを書いてみよう | 4:33 | ||
11 | Webで利用する単位 | 3:12 | ||
12 | CSSを内部参照で書こう | 4:45 | ||
13 | CSSを外部参照で書こう | 4:59 | ||
14 | ファイルのパスについて知ろう | Preview | 5:14 | |
15 | sanitize.cssでブラウザーごとのCSSの差異をなくそう | 4:35 | ||
16 | サニタイズとリセットの違いを知ろう | 3:28 | ||
17 | CSSの優先順位を知ろう | 2:20 | ||
18 | @importでCSSを読み込もう | 3:02 | ||
19 | divタグでレイアウトを調整しよう | 6:42 | ||
20 | Webで色を指定するカラーコードを知ろう | 8:03 | ||
21 | marginプロパティで余白を調整しよう | 6:42 | ||
22 | borderプロパティで枠線を引こう | 2:16 | ||
23 | paddingプロパティで内側の余白を調整しよう | 1:39 | ||
24 | テキスト入力フィールドのスタイルを整えよう | 2:28 | ||
25 | ボタンのスタイルを調整しよう | 5:52 | ||
26 | テキストフィールドにラベルを設定しよう | 6:39 | ||
27 | 必須項目ラベルを追加しよう | 4:45 | ||
28 | 入会申し込みフォームを仕上げよう | Preview | 2:38 | |
Section 3:レスポンシブWebデザインで、スマホ対応のサイトを作ろう【2023年改訂】 | ||||
29 | CDアルバムの紹介ページを作ろう | 0:58 | ||
30 | HTMLの基本タグを作成しよう | 5:32 | ||
31 | セクショニングコンテンツでエリアを分けよう | 4:41 | ||
32 | CSSでスタイルを整えよう | 7:24 | ||
33 | 子孫型セレクターで要素を指定しよう | 3:53 | ||
34 | imgタグで画像を入れ込もう | 4:04 | ||
35 | Webで使える画像の種類 | 3:35 | ||
36 | floatプロパティで画像と文章を回り込ませよう | 7:51 | ||
37 | Flexible Boxで柔軟なレイアウトをしよう | 8:22 | ||
38 | ol, liタグでリストを作ろう | 4:38 | ||
39 | aタグでリンクを設置しよう | 5:26 | ||
40 | CSS Gridでグリッドレイアウトをしよう | 3:08 | ||
41 | 収録曲リストのスタイルを整えよう | 3:12 | ||
42 | 文字参照でコピーライトを挿入しよう | 3:36 | ||
43 | Webフォントでフォントを変更しよう | 7:19 | ||
44 | メディアクエリーでスマホ向けレイアウトを作ろう | 7:46 | ||
45 | max-widthプロパティで画面幅に沿うリキッドレイアウトにしよう | 2:29 | ||
46 | 全体のスタイルを整えて仕上げよう | 2:32 | ||
47 | CSS Transitionでアニメーションを作ろう① | 4:01 | ||
48 | CSS Transitionでアニメーションを作ろう② | 4:44 | ||
Section 4:Flexible Boxと CSS Grid Layoutをより詳しく学ぼう【2023年改訂】 | ||||
49 | Flexbox:各プロパティを学ぼう | 14:18 | ||
50 | Flexbox:各子要素のプロパティを学ぼう | 5:46 | ||
51 | CSSGrid:グリッドレイアウトの各プロパティを学ぼう | 5:28 | ||
52 | CSSGrid:各子要素のプロパティを学ぼう | 3:34 | ||
53 | CSSGrid:セルをまたいだセルを作ろう | 3:42 | ||
54 | CSSGrid:grid-template-areasプロパティを利用した指定をしよう | 5:36 | ||
Section 5:Bootstrapで素早く Webページを作ろう【2023年改訂】 | ||||
55 | Bootstrapで簡単にフォームを作ろう | 4:24 | ||
56 | CDNでBootstrapを使おう | 2:36 | ||
57 | Containerを使って画面幅を調整しよう | 4:32 | ||
58 | Spacingを使って、余白を簡単に調整しよう | 4:45 | ||
59 | 背景やテキスト色をBootstrapで調整しよう | 2:29 | ||
60 | Bootstrapのグリッドシステムを理解しよう | 9:49 | ||
61 | Containerを分けて、全画面幅の要素を追加しよう | 2:08 | ||
62 | テキストフィールドを使おう | 3:43 | ||
63 | テキストフィールドのさまざまな種類 | 5:58 | ||
64 | セレクトボックスを使おう | 8:15 | ||
65 | チェックボックスを使おう | 6:52 | ||
66 | ラジオボタンを使おう | 6:29 | ||
67 | フレキシブルボックスをBootstrapで簡単に使おう | 4:24 | ||
68 | テキストエリアを使おう | 2:11 | ||
69 | ボタンを使おう | 3:43 | ||
70 | バッヂを使って、必須ラベル・任意ラベルを追加しよう | 3:40 | ||
Section 6:JavaScriptで今日の日付を表示しよう | ||||
71 | HTML CSS:画面を作り上げよう | Preview | 10:29 | |
72 | JavaScript:オブジェクト・メソッド・パラメーター | 11:52 | ||
73 | JavaScript:文字列・数字と四則演算、文字列連結 | 9:46 | ||
74 | JavaScript:変数の扱い | 12:52 | ||
75 | JavaScript:オブジェクトとインスタンス | 6:05 | ||
76 | JavaScript:Dateオブジェクトを使ったプログラム | 3:51 | ||
Section 7:イベントドリブンな、ストップウォッチプログラムを作成しよう | ||||
77 | HTML CSS:画面の見た目を作成しよう | Preview | 10:49 | |
78 | JavaScript:getElementByIdによる要素の書きかえ | 11:30 | ||
79 | JavaScript:if構文で条件に沿ったプログラムを作ろう | 9:28 | ||
80 | JavaScript:function(関数)定義をしよう | 12:34 | ||
81 | JavaScript:イベントドリブンなプログラムを作成しよう | 7:15 | ||
82 | JavaScript:setIntervalによる定期実行 | 10:39 | ||
83 | JavaScript:変数のスコープを理解しよう | 10:43 | ||
84 | JavaScript:秒数から、分と時を計算しよう | 6:58 | ||
85 | JavaScript:thisを使って、STOPボタンを実装しよう | 13:24 | ||
Section 8:Ajax通信でフォトライブラリーを作成しよう | ||||
86 | HTML/CSS:ページを形作ろう1 | Preview | 13:36 | |
87 | HTML/CSS:ページを形作ろう2 | 5:33 | ||
88 | JavaScript:JSONデータを配列で操ろう | 11:25 | ||
89 | JavaScript:createElementとappendChild | 12:12 | ||
90 | JavaScript:for構文で繰り返し処理をしよう | 10:09 | ||
91 | JavaScript:Ajax通信を行なおう | 9:54 | ||
92 | JavaScript:Ajax通信と論理演算子 | 13:31 | ||
93 | JavaScript:画面を仕上げよう | 6:25 | ||
Section 9:JavaScriptライブラリを利用しよう | ||||
94 | jQuery:jQueryを使ってみよう | Preview | 13:42 | |
95 | jQuery:Ajax通信を行なってプログラムを仕上げよう | 13:22 | ||
96 | Vue.js:Vue.jsを使ってみよう | Preview | 8:50 | |
97 | Vue.js:Vue.jsで画面を作り上げよう | 12:20 |