Webアプリ開発(フロントエンド, HTML/CSSの演習) 基礎講座 実践編
（最終更新日：2024年01月22日）
Webアプリ開発(フロントエンド, HTML/CSSの演習) 基礎講座 実践編のゴール
この講座では、HTMLとCSSについて、基礎的な開発知識を習得することを目的としています。たくさんの問題を解くことでプログラミングスキルの土台を築きます。
Webアプリ開発(フロントエンド, HTML/CSSの演習) 基礎講座 実践編の詳細
講座詳細
- 受講対象者DX推進人材 共通スキル
- 受講可能形態集合研修・オープン研修・個別指導研修・eラーニング
- 想定受講時間（eラーニング）28時間
- 講座日数（研修）4日
習得スキル
- 必要となる前提知識HTML/CSS
- 習得できるスキル・知識プログラミング力
- 対応資格基本情報技術者試験
デジタルスキル標準項目
- 標準DX推進スキル標準
- 学習項目テクノロジー（ソフトウェア開発）
- Webアプリケーション基本技術
- フロントエンドシステム開発
カリキュラム詳細
STEP
1
フロントエンド演習 HTMLとCSSで作るWeb名刺
- スタイル演習ブック
- 想定時間60分
- このブックではHTMLとCSSを利用してWeb名刺をつくりながら，HTML構造の作成方法や画像に関連するスタイリングについて深く学習することができます。 最終的に自分のオリジナル名刺を作成できることを目標にしています。
STEP
2
HTML&CSSでつくるスマホ風メニュー
- スタイル演習ブック
- 想定時間120分
- このブックでは「はじめてのHTML」及び「はじめてのCSS」を学習した人を対象として、クリックすると大項目のリストが開き小項目のリストが表示される「スマホ風メニュー」を作成していきます。
STEP
3
HTML&CSSでつくるリボン型見出し
- スタイル演習ブック
- 想定時間90分
- このブックでは「はじめてのHTML」及び「はじめてのCSS」を学習した人を対象として、「リボン型の見出し」を作成していきます。 このブックを通して、要素の特別な配置の仕方や 特別な枠線の使い方を学ぶことができます。
STEP
4
HTML&CSSでつくる三段組レイアウト
- スタイル演習ブック
- 想定時間90分
- このブックでは、HTMLとCSSを使用して「三段組レイアウト」を作成します。このブックを通して、応用的なWebデザインを行う上での基礎を固めることができます。
STEP
5
HTML&CSSでつくるナビゲーションバー
- スタイル演習ブック
- 想定時間60分
- このブックでは、HTMLとCSSを使用してナビゲーションバーを作成します。ナビゲーションバーとは、ホームページ上でユーザを サイト内の別ページに誘導するためのリンクのリストを指します。このブックを通して実際にレイアウトを作成していく中で、実際の開発現場で利用されるナビゲーションのつくり方を学ぶことが可能です。
STEP
6
HTML&CSSでつくるノートPC風デザイン
- スタイル演習ブック
- 想定時間120分
- このブックでは、HTMLとCSSを使用してノートパソコンのようなレイアウトを作成します。
STEP
7
HTML&CSSでつくるドロップダウンメニュー
- スタイル演習ブック
- 想定時間120分
- このブックでは、CSSを利用して「ドロップダウンメニュー」をつくります。ドロップダウンメニューは当サイトのコンテンツである「ナビゲーションバー」に似ていますが、ナビゲーションバーと異なる点は、ドロップダウンメニューに「マウスカーソルが乗った時にメニュー項目を表示する」役割が存在する点です。このブックを通して、実務でよく利用されるドロップダウンメニューの概要とそのつくり方について学ぶことができます。
STEP
8
HTML&CSSでつくるブログ記事一覧レイアウト
- スタイル演習ブック
- 想定時間90分
- このブックでは、HTMLとCSSを使用して「ブログ記事の一覧ページ」のようなレイアウトを作成します。このブックを通して、HTMLとCSSを組み合わせた応用的なWebデザインを行う上での基礎を固めることができます。
STEP
9
HTML&CSSでつくるグリッドレイアウト
- スタイル演習ブック
- 想定時間60分
- このブックでは、HTMLとCSSを使用してグリッドレイアウトを作成します。グリッドレイアウトとは、いくつものコンテンツがタイルのように敷き詰められたようなレイアウトの事を指します。このブックを通して実際にレイアウトを作成していく中で、実際の開発現場で利用される横並びレイアウトの方法、グリッドのつくり方を学ぶことが可能です。
STEP
10
HTML&CSSでつくる進捗ゲージ
- スタイル演習ブック
- 想定時間60分
- このブックでは、HTMLとCSSを使用して簡単な進捗ゲージを作成します。このようなゲージは汎用性が高く、様々な場面で使われています。
STEP
11
HTML&CSSでつくる登録フロー
- スタイル演習ブック
- 想定時間60分
- このブックでは、HTMLとCSSを使用して フォームページによく見られる「登録フロー」の作成を行います。
STEP
12
HTML&CSSでつくるWebページ
- スタイル演習ブック
- 想定時間60分
- このブックでは、HTMLとCSSを使用してシンプルなWebページを作成します。このブックを通して、Webサイトが一般的にどのような構成になっているのかを理解し、更に応用的なWebデザインを行う上での基礎を固めることができます。
STEP
13
HTML&CSSでつくる新聞の１ページ
- スタイル演習ブック
- 想定時間60分
- このブックでは、HTMLとCSSを使用して簡単なボタンのレイアウトを作成します。実際に一つのレイアウトを作成してゆく中で、HTMLとCSSを連携させた実用的なプログラミングがどのように行われるかを理解することが可能です。
STEP
14
HTML&CSSでつくる光るボタン
- スタイル演習ブック
- 想定時間60分
- このブックでは、HTMLとCSSを使用して簡単なボタンのレイアウトを作成します。実際に一つのレイアウトを作成してゆく中で、HTMLとCSSを連携させた実用的なプログラミングがどのように行われるかを理解することが可能です。
STEP
15
HTML&CSSでつくるメニューの作り方
- スタイル演習ブック
- 学習時間60分
- このブックでは、HTMLとCSSを活用して「カフェのページのメニュー」を表現したレイアウトの実装を行います。実際に一つのレイアウトを作成してゆく中で、HTMLとCSSを連携させた実用的なプログラミングがどのように行われるかを理解することが可能です。
STEP
16
フロントエンド演習 HTMLとCSS3でつくるお天気パネル
- スタイル演習ブック
- 想定時間60分
- このブックでは，HTMLとCSS3を利用してお天気パネルをつくりながら，FlexBoxを使ったレイアウトの方法について学習することができます。 最終的に自分のお天気パネルを作成できることを目標にしています。
STEP
17
HTML&CSS3でつくる飛び出るボタン
- スタイル演習ブック
- 想定時間60分
- このブックでは、CSS3を利用して マウスを乗せた際に飛び出るボタンを作成します。このブックを通して、CSS3による「アニメーション」の応用について学習することができます。
STEP
18
HTML&CSS3でつくるポップなメニュー
- スタイル演習ブック
- 想定時間60分
- このブックでは、当サイトのコンテンツである「はじめてのHTML」、「はじめてのCSS」及び「はじめてのCSS3」の学習を終えた人を対象として、マウスカーソルが乗せられたら色が変わって大きくなる「ポップなメニュー」をつくります。
STEP
19
HTML&CSSでつくるトグルスイッチ
- スタイル演習ブック
- 想定時間60分
- このブックでは、HTMLとCSS3を利用してトグルスイッチをつくりながら、実践的なCSS3アニメーションとCSSセレクタの実例について学習することができます。 最終的に自分のトグルスイッチを作成できることを目標にしています。
STEP
20
HTML&CSSでつくるパンくず
- スタイル演習ブック
- 想定時間60分
- このブックでは、HTMLとCSS3を利用してパンくずをつくりながら、CSS3で三角形を表現する方法や細かなアニメーションTipsについて学習することができます。 最終的に自分のパンくずを作成できることを目標にしています。
STEP
21
HTML&CSSでつくるホバー時に動くア二メーションリンク
- スタイル演習ブック
- 想定時間30分
- このブックでは、HTMLとCSS3を利用してマウスホバー時にアニメーションするリンクをつくりながら、CSS3での様々なアニメーションの表現方法について学習することができます。 最終的に自分のリンクを作成できることを目標にしています。
STEP
22
HTML&CSSで作る通知ベル
- スタイル演習ブック
- 想定時間60分
- このブックでは、HTMLとCSS3を利用して新着通知時にアニメーションする通知ベルを作成します。カラーテーマやアニメーションのキーフレームの作成方法などを学習することができます。 最終的に自分の通知ベルを作成できることを目標にしています。
STEP
23
HTML&CSSでつくるクルクル回転するローディング
- スタイル演習ブック
- 想定時間30分
- このブックでは、HTMLとCSS3を利用してスピナーをつくりながら、簡単なkeyframeアニメーションの方法について学習することができます。 最終的に自分のオリジナルスピナーを作成できることを目標にしています。
STEP
24
HTML&CSSで作るホバー時に動くアニメーションボタン
- スタイル演習ブック
- 想定時間60分
- このブックでは、HTMLとCSSを利用してマウスホバー時に動くボタンをいくつか作成し、その中でベースのスタイリングや様々なアニメーションの実装方法及び実装上の注意点などを学習することができます。 最終的に自分のアニメーションボタンを作成できることを目標にしています。
他の講座を見る
生成AI関連講座
資格取得対策講座
DXリテラシー標準領域
CONTACT
ご相談・ご要望など、お気軽にお問い合わせください
