Bootstrap研修

レスポンシブデザインの実現

研修概要

Bootstrapは、ウェブデザインのフレームワークであり、レスポンシブデザインを実現するための便利なツールです。初めて使用する際には少し戸惑うかもしれませんが、基本的な知識を身につけることで素晴らしいウェブデザインを実現できます。この研修では、実際に作業を行ったファイルを基に追加の実装を行います。受講者は、Bootstrapの基本から応用までの知識を実際のプロジェクトに反映させ、実践的なスキルを習得することができます。

目的

• Webアプリケーションフレームワークの基本理解
• レイアウト技術を学ぶ
• 基本的なスタイリング技術を学ぶ
• レスポンシブデザインの実践

対象者

• ウェブデザイナー
• フロントエンドエンジニア
• レスポンシブデザインや各種コンポーネントの利用方法を学びたい人
• ウェブ開発やデザインに興味があり、実践的なスキルを身につけたい学生や研修生

環境要件

• Windows、macOS、またはLinux

テキスト

オリジナルテキスト
※または市販書籍

研修内容

1. イントロダクション
   • Web アプリケーションフレームワークの基本
   • Bootstrapの特徴
   • Bootstrapの歴史
   • Bootstrapの導入
   • Bootstrap Iconsの利用
2. Bootstrapのレイアウト
   • Bootstrapのグリッドシステム
   • カラムの自動レイアウト
   • レスポンシブなグリッドシステム
   • カラムの整列
   • カラムの並べ替え
   • レイアウトのためのユーティリティ
   • 演習：Web基礎の演習をBootstrap化してみる
3. 基本的なスタイリング
   • タイポグラフィ
   • コード
   • 画像
   • テーブル
   • 図表
   • Reboot（リブート）による初期設定
   • 演習：Web基礎の演習をBootstrap化してみる
4. 基本的なコンポーネント
   • アラート
   • バッジ
   • プログレス
   • カード
   • スピナー
   • プレースホルダー
   • 演習：Web基礎の演習をBootstrap化してみる
5. フォームとボタンのコンポーネント
   • フォーム
   • 入力グループ
   • ボタン
   • ボタングループ
   • ドロップダウン
   • 演習：Web基礎の演習をBootstrap化してみる
6. JavaScriptを利用したコンポーネント
   • JavaScriptの基本内容
   • BootstrapのJavaScriptプラグイン
   • カルーセル
   • 折り畳み
   • モーダル
   • オフキャンバス
   • ポップオーバー
   • スクロールスパイ
   • トースト
   • ツールチップ
   • 演習：Web基礎の演習をBootstrap化してみる
7. 最終章
   • 作業内容の明示（作業をしたファイルをコピーして、追加実装する）

研修日数

1〜3日間

備考

本研修はお客様のご要望によって内容のアレンジも可能ですので、お気軽にご相談ください。

お申し込み・お問い合わせ

下記のリンクより申込み・お問い合わせください。（別のタブが開きます）

・お問い合わせ

・研修導入の流れ