Webアプリ開発(フロントエンド, HTML/CSS) 基礎講座 実践編
（最終更新日：2024年01月22日）
Webアプリ開発(フロントエンド, HTML/CSS) 基礎講座 実践編のゴール
この講座は、Webプログラミングを行う上で必ず覚えておきたいHTML、CSSの基礎を学習し、次のステップへ進めるようになることを目的としています。
Webアプリ開発(フロントエンド, HTML/CSS) 基礎講座 実践編の詳細
講座詳細
- 受講対象者DX推進人材 共通スキル
- 受講可能形態集合研修・オープン研修・個別指導研修・eラーニング
- 想定受講時間（eラーニング）14時間
- 講座日数（研修）2日
習得スキル
- 必要となる前提知識特になし
- 習得できるスキル・知識プログラミング力
- 対応資格基本情報技術者試験
デジタルスキル標準項目
- 標準DX推進スキル標準
- 学習項目テクノロジー（ソフトウェア開発）
- Webアプリケーション基本技術
- フロントエンドシステム開発
カリキュラム詳細
STEP
1
HTML基礎 HTMLの仕組み編
- スタイル学習ブック
- 想定時間60分
- このブックではHTMLやCSSを少し触ったことがある人を対象に， 実際にテキストをHTMLタグやCSSを用いてマークアップしてみる体験を通じて，HTMLの仕組みや役割について理解を深めていきます。
STEP
2
HTML基礎 基本要素(タグ)編
- スタイル学習ブック
- 想定時間60分
- このブックでは，HTML未経験者を対象にHTMLで使用される用語や基本的HTML要素(タグ)について学習します。 HTMLについての基本的な理解と，いくつかのHTML要素を使えるようになることを目標としています。
STEP
3
シンプルなWebページを作成せよ
- スタイルチャレンジ問題(実装)
- 想定時間30分
- この問題はHTMLの基礎的な理解度を確認します。この問題で満点を取るためには、HTMLの基礎的なタグに対する理解が求められます。
STEP
4
HTML基礎 HTML5編
- スタイル学習ブック
- 想定時間60分
- このブックでは，HTML5で追加された様々な要素について学びます。 最終的に，HTML5の新しい要素を適切に使えるようになることを目標としています。
STEP
5
HTML基礎 フォーム実装編
- スタイル学習ブック
- 想定時間60分
- このブックでは，HTML5で追加された様々なinput関連の属性について学びます。 新しく追加されたTypeや属性の特性を理解して，より適切にinputを使いこなせるようになることを目標としています。
STEP
6
アイデア提出フォームを作成せよ HTML編 (軽量版)
- スタイルチャレンジ問題(実装)
- 想定時間60分
- この問題はHTMLの基礎的な理解度を確認します。この問題で満点を取るためには、HTML5の機能やバリデーション属性に対する理解が求められます。 非軽量版から、videoタグ、入力チェック、autocompleteの指示を無くしています。
STEP
7
(オプショナル) アイデア提出フォームを作成せよ HTML編
- スタイルチャレンジ問題(実装)
- 想定時間60分
- この問題はHTMLの基礎的な理解度を確認します。この問題で満点を取るためには、HTML5の機能やバリデーション属性に対する理解が求められます。
STEP
8
CSS基礎 基本スタイリング編
- スタイル学習ブック
- 想定時間90分
- このブックでは，HTMLに様々な装飾を施すための言語であるCSSについて学習します。 CSSについての基本的な理解と，様々なCSSセレクタを使って基本的なスタイリングができるようになることを目標としています。
STEP
9
CSS基礎 display編
- スタイル学習ブック
- 想定時間60分
- このブックでは，ページレイアウトの重要概念の1つであるdisplayについて，その仕組みについて深く学習することができます。 様々なdispayの指定方法やその特徴を理解した上で，自由にレイアウトができるようになることを目標としています。
STEP
10
CSS基礎 margin padding編
- スタイル学習ブック
- 想定時間60分
- このブックでは，ページレイアウトの重要概念の1つであるmarginとpaddingについて，実際に動作するサンプルを使いながらその仕組みについて深く学習することができます。 ボックスモデルやmarginの相殺が起こる原理を理解した上で，marginとpaddingを扱えるようになることを目標としています。
STEP
11
CSS基礎 position編
- スタイル学習ブック
- 想定時間60分
- このブックでは，ページレイアウトの重要概念の1つであるpositionについて，実際に動作するサンプルを使いながらその仕組みについて深く学習することができます。 様々なpositionの指定方法やfloatを利用する場合の注意点などを理解した上で，positionを扱い自由にレイアウトができるようになることを目標としています。
STEP
12
CSS基礎 CSS3編
- スタイル学習ブック
- 想定時間60分
- このブックでは，「CSS基礎」の他コースを一通り学習した人を対象として，従来のCSSに比べてより多彩な装飾が可能になった「CSS3」について学習します。このブックを通してCSS3で使用できる機能やその使い方を学ぶことができます。
STEP
13
ページのスタイルを完成させよ CSS編 (軽量版)
- スタイルチャレンジ問題(実装)
- 想定時間60分
- この問題はCSSを用いた処理の理解度を確認します。この問題で満点を取るためには、positionやCSS3に対する理解が求められます。 非軽量版から、アニメーションの指示を無くしています。
STEP
14
(オプショナル) ページのスタイルを完成させよ CSS編
- スタイルチャレンジ問題(実装)
- 想定時間60分
- この問題はCSSを用いた処理の理解度を確認します。この問題で満点を取るためには、positionやCSS3に対する理解が求められます。
他の講座を見る
生成AI関連講座
資格取得対策講座
DXリテラシー標準領域
CONTACT
ご相談・ご要望など、お気軽にお問い合わせください
