MENU

おすすめキーワード
一覧から探す
目的から探す
ソリューションから探す
職種から探す
コースから探す
track givery

Webアプリ開発(フロントエンド, CSSやJavaScriptの演習) 基礎講座 実践編

最終更新日:2024年01月22日

Webアプリ開発(フロントエンド, CSSやJavaScriptの演習) 基礎講座 実践編

Webアプリ開発(フロントエンド, CSSやJavaScriptの演習) 基礎講座 実践編の講座詳細

Webアプリ開発(フロントエンド, CSSやJavaScriptの演習) 基礎講座 実践編

「Webアプリ開発(フロントエンド, CSSやJavaScriptの演習) 基礎講座 実践編」は、デジタルスキル標準に準拠したTrack Trainingのリスキリング講座です。JavaScriptとCSS、jQueryの基本から動的Webパーツの開発までを実践的に学びます。

受講対象者

DX推進人材 共通スキル

受講可能形態

集合研修
オープン研修
個別指導研修
eラーニング

想定受講時間(eラーニング)

21.5時間

講座日数(研修)

3

スキル

  • 必要となる前提知識

    HTML/CSS/JavaScript

  • 習得できるスキル・知識

    プログラミング力

対応資格

基本情報技術者試験

デジタルスキル標準項目

DX推進スキル標準

学習項目
テクノロジー(ソフトウェア開発)

Webアプリケーション基本技術

フロントエンドシステム開発

Webアプリ開発(フロントエンド, CSSやJavaScriptの演習) 基礎講座 実践編とは?

この講座では、JavaScriptを使って動的なWebパーツや小さなWebアプリを開発するブックを多数ご用意しています。パーツやアプリの開発を通じて、JavaScriptの基本的な仕組み、JavaScriptとCSSの連携、jQueryの使い方などを学ぶことができます。1つのブックは1つのパーツやアプリとして完結しているので、いくつかをピックアップして学ぶこともできます。JavaScriptの基礎を修めた後に実践的に使ったり、実際にアプリを開発しながら基礎から学ぶ入門講座として使ったりと、いろいろなニーズに合わせてお使いいただけます。


Webアプリ開発(フロントエンド, CSSやJavaScriptの演習) 基礎講座 実践編のゴール

この講座では、JavaScriptについて、基礎的な開発知識を習得することを目的としています。たくさんの問題を解くことでプログラミングスキルの土台を築きます。

Webアプリ開発(フロントエンド, CSSやJavaScriptの演習) 基礎講座 実践編のカリキュラム

1

スタイル

演習
ブック

想定時間

120分

JavaScriptでつくるHigher or Lower

このブックでは、HTMLとJavaScriptを活用して 「Higher or Lower」というゲームを作成します。実際に一つのプログラムを作成してゆく中で、HTMLとJSを連携させたプログラミングがどのように行われるかを理解することが可能です。

2

スタイル

演習
ブック

想定時間

60分

JavaScriptでつくるおみくじ

このブックでは、HTMLとJavaScriptを活用して簡単なおみくじを作成します。実際に一つのプログラムを作成してゆく中で、HTMLとJSを連携させたプログラミングがどのように行われるかを理解することが可能です。

3

スタイル

演習
ブック

想定時間

60分

JavaScriptでつくる残り文字数表示

このブックでは、HTMLとJavaScriptを活用して簡単な残り文字数表示を作成します。実際に一つのプログラムを作成してゆく中で、HTMLとJSを連携させたプログラミングがどのように行われるかを理解することが可能です。

4

スタイル

演習
ブック

想定時間

60分

JavaScriptでつくるポップアップ

このブックでは、HTMLとJavaScriptを活用して クリックで開閉するメッセージボックスを作成します。実際に一つのプログラムを作成してゆく中で、HTMLとJSを連携させたプログラミングがどのように行われるかを理解することが可能です。

5

スタイル

演習
ブック

想定時間

90分

JavaScriptでつくるタイマー

このブックでは、HTMLとJavaScriptを活用して簡単なカウントダウンタイマーを作成します。実際に一つのプログラムを作成してゆく中で、HTMLとJSを連携させたプログラミングがどのように行われるかを理解することが可能です。

6

スタイル

演習
ブック

想定時間

120分

HTML&CSS&JSでつくるサムネイルグリッド

このブックでは、HTML, CSS, JavaScriptを使用して、並べられた縮小店舗イメージ画像にマウスを乗せる事で 大きな画像が表示されるような、サムネイルグリッド型のレイアウトを作成していきます。

7

スタイル

演習
ブック

想定時間

60分

CSS3+jQueryでつくるスライドショー

このブックでは、当サイトのコンテンツである「はじめてのCSS/CSS3」および「はじめてのJavaScript/jQuery」の学習を完了した方を対象として、CSS3とjQueryを使用した簡単なスライドショーを作成します。

8

スタイル

演習
ブック

想定時間

90分

CSS3+jQueryでつくる2Dゲームモーション

このブックでは、CSS3とjQueryを活用してキャラクターの2Dゲームモーションを作成します。このブックを通して、「CSSスプライト」と呼ばれるコーディング技法を学習できます。

9

スタイル

演習
ブック

想定時間

60分

jQueryとCSSでつくるスクロールすると隠れるヘッダー

このブックでは、スクロールダウンすると隠れるヘッダーメニューを作ります。 jQueryを使ったスクロールイベントの処理方法やCSSクラスを使った要素の表示/非表示の方法について深く学習することができます。

10

スタイル

演習
ブック

想定時間

60分

フロントエンド演習 jQueryとCSS3で作るアコーディオンパネル

このブックでは,jQueryとCSS3を利用して簡単なアコーディオンパネルを作成します。 アコーディオンの開閉状態の変化に応じてアイコンを回転させるアニメーションを追加します。

11

スタイル

演習
ブック

想定時間

60分

jQueryとCSS3で作るコンタクトフォーム

このブックでは、HTML,CSSとjQueryを利用してコンタクトフォームを作りながら、スクロールイベントの検知やCSSクラスを使った表示/非表示の方法など実践的な内容を学習することができます。 最終的に自分のコンタクトフォームを作成できることを目標にしています。

12

スタイル

演習
ブック

想定時間

90分

jQuery UIでつくる ドラッグ&ドロップリスト

このチャプターでは jQueryの拡張ライブラリ(機能群)である「jQueryUI」を使用して、ドラッグ & ドロップで操作ができるリストを作成します。

13

スタイル

演習
ブック

想定時間

90分

jQueryでつくるタブ切り替え

このブックでは、jQueryを使用して タブをクリックすると中身が切り替わるレイアウトの学習を行います。

14

スタイル

演習
ブック

想定時間

60分

jQueryでつくるパララックス

「パララックス」は、スクロールをした際に要素ごとに移動速度をずらすことで視覚的な効果を生じさせる技法です。パララックスを活用することにより、表現力豊かなサイトを作成することが可能になります。このブックでは、パララックスの基礎的な仕組みと簡単な実装についてjQueryで学習します。

15

スタイル

演習
ブック

想定時間

90分

jQueryで作る数独ソルバ Part.1

このブックでは数独パズルの正解を計算するソルバプログラムを作成します。 手がかりの少ない難しい数独パズルを解くためにはバックトラックという手法が必要になりますが、このブックではバックトラックは扱わず簡単な数独問題のみ解答できるソルバの作成をゴールとします。 (バックトラックについてはPart.2で扱います。) 配列操作を多用するので、先に「JavaScriptの配列操作を理解する」を読んでおくことをおすすめします。

16

スタイル

演習
ブック

想定時間

60分

jQueryで作る数独ソルバ Part.2

Part.1では単純な方法で簡単な数独パズルを解くプログラムを作成しました。 しかし、手がかりの少ない難しい数独パズルを解くためにはそれだけでは不十分です。 ここではバックトラックという手法を用いて難しい数独パズルも解けるようにプログラムを改良していきます。

17

スタイル

演習
ブック

想定時間

60分

フロントエンド演習 jQueryでつくるシンプルなマークダウンエディタ

このブックでは,jQueryとさまざまなオープンソースライブラリを組み合わせてマークダウンエディタを作ってみます。 オープンソースライブラリを多く利用するためかなり実践的です。事前に「JavaScript基礎 jQuery編」「CSS基礎 margin padding編」を学習しておくとよいでしょう。

この講座と合わせて受講すると良い講座

次のステップとして、関連するスキルを広げるための講座を検討してみませんか?

自社に最適な研修を設計しませんか?

Trackの法人研修は、社員のスキルに応じたカスタマイズ研修を提供します。
研修設計から運営、振り返りまで、すべてをサポートいたします。

  1. 1

    まずはスキル診断から

    社員のスキルを把握し、最適な研修プランを提案します。

  2. 2

    オーダーメイドの研修設計

    自社にピッタリの研修プログラムを一緒に作り上げましょう

  3. 3

    研修の振り返りと評価

    研修後には振り返りを行い、学習効果の評価や今後の改善点を明確にします。

今すぐお問い合わせください

お見積もりやご相談はお気軽にどうぞ。お待ちしております。

導入事例

累計200社・30,000人以上が利用する
Trackの法人向けデジタル人材研修サービス

デジタルスキルの向上に興味がある方は、 「Webアプリ開発(フロントエンド, CSSやJavaScriptの演習) 基礎講座 実践編」のご相談・お見積りはこちら ご相談・ご要望など、お気軽にお問い合わせください