旧版『Bootstrap4入門』〜Webデザインに対して苦手意識を持つエンジニアのための〜
3.5 (25 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
137 students enrolled

旧版『Bootstrap4入門』〜Webデザインに対して苦手意識を持つエンジニアのための〜

レスポンシブWebデザイン対応の見た目に優れたWebサイトを、Visual Studio Codeを利用して効率的に開発する方法を学ぼう!Bootstrap4適用前後の画面の変化を動画で確認することでBootstarp4の魅力再発見!
3.5 (25 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
137 students enrolled
Last updated 10/2018
Japanese
Current price: $41.99 Original price: $59.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3 hours on-demand video
  • 1 article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • レスポンシブデザインで見た目がいい見栄えのするWebページを作るために必要なテクニックを身につけることができます。
  • カルーセルやナビゲーションなどBootstrap4の魅力的なコンポーネントが使いこなせるようになり、Webデザインの苦手意識を乗り越えることができます。
  • 実用的なサンプルアプリを作り上げることで、開発現場におけるWebデザインの即戦力が身に付きます。
  • Visual Studio Code を使用した効率的なHTML作成テクニックを身につけることができます。
Course content
Expand all 22 lectures 02:46:50
+ 【1日目】Bootstrapについて
11 lectures 01:03:22
Bootstrap4の利用方法
04:44
学習環境(Mac)の構築
06:05
学習環境(Windows)の構築
08:59
VSCode(Visual Studio Code)のセットアップ
01:14
学習用アプリケーションの事前準備
08:17
Bootstrap4の基本的な雛形
06:52
Bootstrap4のクラス適用
05:51
グリッドシステムについて
05:41
画面サイズに応じたレイアウト
05:56
コンテナの適用
06:22
+ 【2日目】基本的なコンポーネント
4 lectures 49:54
ジャンボトロン
05:25
フォームの基本
23:50
フォームの応用
13:32
+ 【3日目】動きがあるコンポーネント
4 lectures 45:55
ナビゲーションバー
15:42
モーダルダイアログ
09:13
タブ切り替え
09:41
カルーセル
11:19
Requirements
  • HTMLとCSSの基本的な知識
  • JavaScriptの基本的な知識
  • PCの基本的な知識
Description

本コースは旧版です。増補改訂版のご受講をお願いします。

2019/7/28 増補改訂版のリリースに伴い、本コースは旧版となりました。

増補改訂版『Bootstrap4入門』〜Webデザインに対して苦手意識を持つエンジニアのための〜

※ ご興味がある方は「増補改訂版『Bootstrap4入門』」で検索をお願いします。

増補改訂版をリリースするに至った経緯

  • 旧版は私がUdemyで初めてリリースしたコースで、以下に示す様々な問題が存在するため

  • セクション構成が「1日目」「2日目」「3日目」で、レクチャーを追加しにくい構成であるため

  • VSCodeエディタでの省力入力(emmet)説明の占める比重が大きいため

  • emmetの長い入力文のスペルを全て読み上げているため

  • 中級レベル以上のnpmによるBootstrap4のインストールの説明に時間を要しているため

  • コース改善のためのメンテナンスしづらい、セクション・レクチャー構成であるため

増補改訂のポイント

  • Bootstrap4の説明に注力

  • 公式HPを参考にしたシンプルなセクション構成を採用

  • レクチャーの追加をしやすいセクション構成

  • エディタにとらわれないコース構成

  • VSCodeやemmetの説明を排除

  • npmによるBootstrap4のインストール説明を排除

  • スペーシングやシャドウなど旧版には無かった多くのユーティリティ説明を追加

  • カードやメディアオブジェクトなど旧版には無かった多くのコンポーネント説明を追加

  • レクチャー単位にスライドで説明しエディタとブラウザでデモするスタイルを採用


==============================

以下は旧版のコース紹介です。

==============================

このコースは、Webデザインに苦手意識を持っているエンジニアが、Webデザインの苦手意識を乗り越えた現役エンジニアから、3日間でBootstrap4を学び、苦手意識を乗り越えてもらうコースです。

本講座の作成にあたり、動画の力を活かし楽しんで受講できるように2つの工夫を盛り込みました。

1つは、Bootstrap4適用前後の画面の変化を動画によりリアルタイムに確認できることです。Bootstrap4の魅力を動画により再発見できると思います。

2つは、受講によって即戦力を身につけることを目的に、一覧画面や詳細画面、入力フォームを盛り込んだ見た目に優れたサンプルアプリを用意したことです。完成をイメージできるので、プラモデルを組み立てるような感覚で楽しく学ぶことができると思います。

Bootstrap4でカッコいいサイトを作れるようになりたい方は、ぜひ受講してみてください。

受講対象

  • デザインが苦手だけど、見た目に優れたWebサイトを作成方法を短時間にマスターしたいエンジニア

  • 1つのサイトで様々な画面サイズに対応できるレスポンシブWebデザインの効率的な作成方法を学びたいエンジニア

  • 縦に2分割や3分割したレイアウトをfloatなどのCSSを使って作ることに苦労した経験があるエンジニア

学習内容

  • 【1日目】Bootstrap4の基本とページレイアウト

  • 【2日目】Bootstrap4の基本的なコンポーネント

  • 【3日目】Bootstrap4の動きがある

コースの特徴

  • サンプルアプリにより開発現場の即戦力を身につけることができる

  • 完成イメージを提示するためゴールが明確である

  • Bootstrap適用前後の画面の変化を動画で確認できる

  • Visual Studio Code による効率的なHTML開発が習得できる

必要とする知識やツール

  • HTMLとCSSの基本的な知識

  • JavaScriptの基本的な知識

  • 初歩的なPC操作の知識


Who this course is for:
  • デザインが苦手だけど、見た目に優れたWebサイトを作成方法を短時間にマスターしたいエンジニア
  • 1つのサイトで様々な画面サイズに対応できるレスポンシブWebデザインの効率的な作成方法を学びたいエンジニア
  • 縦に2分割や3分割したレイアウトをfloatなどのCSSを使って作ることに苦労した経験があるエンジニア