テーマ別研修

CSSフレームワーク研修 Bootstrap開発入門 | 効率のよいWebデザインを学ぶ

ハンズオン形式でCSSフレームワークであるBootstrapの使い方について理解する

公開
講座

本研修では、CSSフレームワークであるBootstrapの使い方について、ハンズオン形式の講義を通して学びます。また、グリッドレイアウトやGUIコンポーネント、デザインのためのユーティリティ機能、スクリプト利用による操作などについて一通り習得します。

研修コード:100197

本研修の対象 エンジニア

  • レスポンシブデザイン対応のサイトを作成したい方
  • プログラム経験の少ないWebデザイナーやプログラマーの方
  • CSSフレームワークに対する知見を伸ばしたい方

よくあるお悩みや課題

  • Bootstrapの基礎を1日で学んでしまいたい
  • CSSフレームワークを使用した見やすいWebサイトを作りたいが知見がない
  • 独学にしてもどこから手を付けたら良いのかわからず、周りに詳しい人が居ない

本研修の狙い

CSSフレームワーク Bootstrapの使い方について理解できる研修となります。Bootstrapを使い、レスポンシブデザイン対応のサイトを作成します。

研修概要

スマホ時代に必須の機能である「レスポンシブデザイン」。本研修では、スマホ時代のWebデザインの基本的な考え方を学んだうえで、CSSフレームワークの中でも代表的なBootstrapの使い方を習得します。

Bootstrapの基本レイアウト機能である「グリッドデザイン」や、Bootstrapに多数用意されているGUIコンポーネントやデザインのためのユーティリティ機能ついて理解し、レスポンシブデザイン対応のサイト作成の仕方を身に付けます。基本的なGUIコンポーネントについては、JavaScriptの中からアクセスをして操作する方法も併せて学習します。

3つの特徴

スマホ時代のWebデザインの基本的な考え方が理解できる

どんなデバイスにも対応できるレスポンシブデザインについて理解し、スマホ時代のWebデザインについて学びます。

Bootstrapを使用し、レスポンシブデザイン対応のサイト作成ができる

実際にBootstrapを使用し、多様なサイズ・解像度に応じて柔軟に表示を行うレスポンシブデザイン対応のサイト作成の仕方を習得します。

JavaScriptによるスクリプト制御ができる

JavaScript(jQuery)の中からアクセスしてしてスクリプトによるBootstrapの操作もできるようにします。

研修時間

7時間

研修カリキュラム

1. Bootstrapの基礎知識 【ゴール】レスポンシブデザインおよびBootstrapの特徴であるグリッドレイアウトシステムを理解する
  • スマホ時代のWebデザイン
  • Bootstrapとは
  • Bootstrapのダウンロード
  • グリッドレイアウトの基本構成タグと基本コード
  • Webサイトの基本構成とサンプル作成
  • 列数と画面サイズ
  • 複数の幅指定
2. コンテンツの基本デザイン 【ゴール】Bootstrapに用意されている、コンテンツの基本的なデザインについて理解する
  • コンテンツの基本要素
  • コンテンツとコードの記述
  • リストの表示と定義リスト
  • スタイル・ユーティリティとは
  • フォームの基本
  • フォームレイアウト
3. オリジナルGUIの利用 【ゴール】Bootstrapに多数用意されているGUIコンポーネントの中から主なものを使えるようにする
  • ボタンコンポーネント
  • ドロップダウン、プログレスバー、バッジ
  • リストグループ
  • カルーセル
4. ナビゲーション 【ゴール】Bootstrapのナビゲーション関係するコンポーネントについて理解する
  • Navコンポーネントとは
  • 垂直リストとタブ表示
  • NavBar
  • パンくずリストとは
  • スクロールスパイ
5. スクリプトによる操作 【ゴール】JavaScriptのスクリプトによる利用の基本操作をできるようにする
  • 基本フォームのスクリプト利用
  • ポップオーバー
  • アラート
  • モーダルダイアログ
  • 独自GUIのスクリプト利用
6. Bootstrap実践演習 【ゴール】演習を通してBootstrapの使い方を習得する
  • 課題演習
  • 講師からのフィードバック

研修金額

明瞭価格で実施できます。

29,800 円 (税抜)/1人   定員:各回 18名

  • 通常価格となります。スケジュール・会場により異なる場合がありますので、下のスケジュールに記載された受講料をご確認ください
  • 最少催行人数に達しなかった場合には中止となる可能性がございます。万が一、中止となる場合の連絡は開講日の1週間前に行います

無料で使える研修管理システム
Recurrent Cloudからのお申込みなら

受講料 29,800円
27,300 円/1人

学びを止めないキャンペーンにより通常時より割引額が大幅UP中!

スケジュール・お申込み

お申込み関連情報

開催スケジュール

開催日 時間 会場 受講料 残席 お申込み
日程は調整中です。最新日程を確認したい方はお問い合わせください。
すぐにご連絡いたします。
お問い合わせ

一社での研修実施

一社での研修実施も多くの企業様からご依頼いただいています。

  • 貴社会場での講師派遣による実施
  • 弊社会場での一社研修実施

いずれも承っています。お問い合わせは下記から。

リカレントの研修は様々な企業様にご利用頂いています

研修実績

研修のお問い合わせはこちら

リカレントのサービスに関する
お見積もり、お問い合わせはこちらから

お電話はこちら

0120-80-9217

0120-80-9217

受付時間:平日9:30-21:30/土日祝9:30-18:30

お問い合わせ
お問い合わせ
0120-80-9217 メールでのお問い合わせ