Bootstrap 4入門 セットアップ・レイアウト編|生明塾

代表的CSSフレームワークBootstrap。その最新バージョンの導入方法とレイアウト機能の使い方を解説する、セミハンズオンの入門講座。

learn

こんなことを学びます

Bootstrapは、webのフロントエンドに向けたCSSのフレームワークです。
Bootstrapをwebデザインの基盤に導入すると、瞬く間にグリッドレイアウトされた高機能なレスポンシブwebデザインを制作することが可能です。

CSSフレームワーク(海外ではFrontend Framework)とは、よく調整された高度なCSSのデザインやJabaScriptの機能が予め用意されたライブラリ集です。
CSSフレームワークを用いれば、基礎工程が終わった状態からwebデザイン作業を始めることができ、時間や労力を大きく削減することができます。
もちろん、オリジナルのビジュアルデザインを載せることも可能です。

Bootstrap 使用事例 - Responsive Web Design JP
http://responsive-jp.com/category/technique/bootstrap

Bootstrapは数あるCSSフレームワークでのなかで、人気No. 1の大定番。
かつてはTwitter社内で作られ、Twitter Bootstrapと呼ばれていました。
2011年の誕生以来、世界中で愛用されています。
MIT License で商用利用も可能、もちろん無料です。

先日の2018年1月18日に、長い開発期間を経た最新バージョンのBootstrap 4がリリース。
Flexboxの採用や基本単位を「rem」に変更するなど、現代のwebデザインに対応した仕様で生まれ変わりました。

Bootstrap 4のリリースを記念して、この入門講座を企画しました。
主に、Bootstrapの使い始め方と、レスポンシブwebデザインに対応したとても便利なレイアウト機能を解説。

CSSフレームワークの扉を開いて、賽の河原の子供たちやシーシュポスのような仕事の在り方から脱却してください。

Bootstrap オフィシャルサイト(ダウンロードページ)
https://getbootstrap.com

Bootstrap - ウィキペディア
https://ja.wikipedia.org/wiki/Bootstrap

「Bootstrap 4」が正式リリース――IE10以降、iOS 7以降、Android 5.0以降に対応
http://www.atmarkit.co.jp/ait/articles/1801/23/news092.html

● 当講座で学べること
○ CSSフレームワークとBootstrapの概要
○ Bootstrap 4の導入方法
○ Bootstrap 4のレイアウト関連の機能
○ Bootstrap 4を用いたレスポンシブwebデザインの制作方法
○ Bootstrap 4を用いたタイポグラフィーや画像、テーブルなどの設定方法

● 当講座で得られること
○ webデザインの高機能な基礎ライブラリ(フレームワーク)
○ 超高速なwebデザイン作業を具現化するためのソースと方法
○ 作業効率の大幅な向上とコスト削減
○ 競合他社への競争力 など
※ 各種受講証明書への署名・発行に対応します。

● 当講座の特徴
○ 手ぶらの座学受講も可能な、セミ・ハンズオン形式です。
○ 実践的な知識や方法を、要点をまとめて、わかりやすく解説します。
○ 講義後に、質疑応答の時間を設けます。

● 主催者
AZM Design
続きを読む

日程・開催時間を選ぶ

開催リクエスト受付中

開催予定エリア

新宿・代々木

価格

¥3,800

受けたい
45人が受けたい登録しています

teacher

この講座の先生

グラフィックデザインとwebデザインの現役プロ講師

東京で活動するアートディレクター,グラフィックデザイナー,webクリエーター,クリエイティブコンサルタント,講師。

ブランディングやSP広告などのグラフィックデザイン、webサイト、UI/UX、動画、eラーニングなど多数のクリエーションを手掛ける。

広告戦略や制作システムに関するコンサルテーションも行い、さまざまな企業の研修に講師として招請されている。

最新技術の啓蒙や後進の育成に従事し、教育機関で講師を務めるほか、Adobe MAXやCSS Niteなどの大規模なイベントを始め、宣伝会議やデジタルハリウッドなどの専門講座にも多数登壇している。

ソフトバンク・テクノロジー株式会社と共同で、有名クリエーターを招く定例のデザインイベント『FONTPLUS DAYセミナー』を企画。開催は十数回に及ぶ。

AZM Design 代表

学校法人専門学校 東洋美術学校 講師
東京デザインプレックス研究所 講師


Profile Photo by イイダマサユキ + 続きを読む

detail

講座詳細

  • 当日の流れとタイムスケジュール

    ■ 所要時間
    約1.5 - 2時間程度(途中参加、途中退出も可能です)

    ■ 講座の流れ(予定)
    1. 講座概要説明(約5分)
    2. 解説(約35 - 50分)
    3. 休憩(約5分)
    4. 解説(約35 - 50分)
    5. 質疑応答(約10分)
    ※ 講義時間や時間割は、変更する可能性があります。
    ※ 予定よりも早く終了、または長引く可能性があります。
  • こんな方を対象としています

    □ web制作関連職の方
    □ webデザイン学習者の方
    □ 超高速なwebデザインを求められている方
    □ webデザインの作業効率とコスト削減を求めている方
    □ 毎回ゼロからwebデザインの作業をすることに疲れ果てている方
  • 受講料の説明

    参加費に場所代は含まれています。
    参加費の他に、一切費用はかかりません。
  • 受講する際は以下をお読み下さい

    ■ ご持参いただくもの
    □ ハンズオン受講の方は、コンピューター
     (セミ・ハンズオン講座なので、座学受講での参加も可能です)
    □ Adobe Brackets、Atom、Sublime text、Adobe Dreamweaverなど、ご自身が使い慣れたモダンエディタやwebオーサリングツール
      ※ テキストエディタの使用に関するサポートは行いません。
    □ メモを取るための筆記用具やデバイスなどはご持参ください。
    □ 筆記用具だけで受講は可能ですが、コンピュータのご持参・使用も自由です。

    ■ その他
    □ 講義中の録音などは、ご遠慮ください。
    □ お名刺をお持ちでしたら、ぜひ、交換させてください。

review

レビュー

  • 13

  • 楽しかった!( 10 )

  • 勉強になった!( 12 )

  • 行く価値あり!( 9 )

  • 男性

    この講座は「『ホームページ作成が楽になる講座』」でした

    Bootstrap4のグリッドデザインを駆使したホームページ作成は目から鱗の機能でした。自分が作成する際に使ってみようと思います。また、ホームページだけでなくワードプレス転用などの講座が欲しいです。よろしくお願い致しますm(_ _)m

  • 女性 40代

    この講座は「Bootstrap 4入門 セットアップ・レイアウト編|生明塾」でした

    仕事でwebデザインに携わってしますが、案件の性質上、Bootstrapに触れる機会がないまま今に至っており、乗り遅れた感を持っていました。今後の案件で導入するためのとても良いきっかけになったと感じました。ありがとうございました。

  • 男性

    この講座は「短時間で全体感をつかめる講座」でした

    私自身は、普段仕事でVBAメイン、JAVAが少し分かる程度のノンプログラマー職。
    HP作成に関しては完全に門外漢の人間ですが、短時間で非常に効率よく全体感を把握出来たと感じます。
    私のように、HTML、CSSについて殆ど知識がなく、これから勉強を始めたいと思っている方でも、十分役立つものだと思います。むしろ、兎に角HPを作ってみたい・・・という方は、きっかけに良いと思います。
    講座自体はある程度経験がある事前提に話は進みますが、なんとかなります。

    授業料も良心的な上、短時間で全体感を掴むのに最適です。
    大枠をつかめれば、自分で実践するときの効率があがります。

  • 女性 20代

    この講座は「Bootstrap初心者が導入し、使用できる講座」でした

    Bootstrapは様々なブログサイトでも紹介されてますが、見ながらやっても中々理解できませんでした。こちらの講座を受講したところ、的確かつわかりやすく教えてくださり、導入方法・グリットレイアウトの説明・デザイン反映のさせ方を理解する事が出来ました。
    とても良かったです。また別の講座も受講します。

  • 男性 40代

    この講座は「Bootstrap4入門に最適な講座でした」でした

    最近リリースされたばかりのBootstrap4を分かりやすく学ぶことができました。生明先生は実務経験も豊富でCC道場にも登壇された講師ですので私のようなCSS初心者からコーティングを仕事にしている方まで経験を問わずこの講座で学べると思います。

  • more

    この先生の他の講座

    watching

    この講座を見た人は、こんな講座も見ています