速習!フレームワークを活用した HTML5・CSSコーディング

「Bootstrap」でつくるレスポンシブWEBデザイン(マルチデバイス対応、グリッドレイアウト)

learn

こんなことを学びます

HTML・CSSコーディングの初級者から中級者を対象にした講座です。

■ 概要
全くゼロからWEBコーディングを行うのではなく、成熟したフォーマットをベースにすることで、洗練された手法を知ることが出来るようになり、正しいコーディングとは何か?について理解を深めます。

今回のセッションでは、人気のCSSフレームワーク「Twitter Bootstrap」をフルに活用して、グリッドレイアウトシステムやマルチデバイス対応のレスポンシブWEBデザインを構築して行きたいと思います。
さらにBootstrapで用意されたJavaScriptを使用したリッチなコンテンツにもチャレンジします。

また、HTML4.0.1やXHTML1.0からHTML5へ移行する際のポイントやCSS3の新規機能、ブラウザー毎の挙動の違いなどについても解説いたします。

半日という短いセッションですが、これから学習を始める方とって、この先の参考となる内容をご用意しております。

必要なものはLANにつながるパソコンだけです。

!今回のセッションでは、WEBデザイン(色彩、キャラクター)については触れません。WEBコーディングに的を絞った内容となっております。

■ 内容
・学習環境の準備(共有フォルダ、サンプルテキスト)
・当セッションの進め方
・HTMLの基本的な構造
・CSSの基本的な構造
・HTML5のコンテンツモデルとカテゴリー
・HTML5・CSS3の追加機能
・CSSフレームワーク「Bootstrap」
・グリッドレイアウト(デザイン)システムについて
・レスポンシブWEBデザインについて
・JAVAスクリプトについて
・Bootstrap.jsの活用方法の紹介

■ 学習環境
以下の環境(設備)は、こちらで用意してあります。参加者が事前に構築する必要はありません。

・インターネット接続
・電源(延長コード)、LANケーブル(有線LANの場合)
・WEBサーバー
・ファイルサーバー

■ 必要な準備
当セッションに持ち込めるPCをご用意ください。

・パソコン(Windows,MacどちらでもOK)
・LAN接続(無線LAN、有線LANどちらでもOK)
・ブラウザ(IE,FireFox,Safari,Chrome)
・テキストエディター(文字コード:UTF-8に対応の)
WindowsOSは、WindowsXP以上を推奨いたします。IE(Internet Explorer)は、v8.0以上を推奨いたします。
MacOSは、10.5以上を推奨いたします。

テキストエディターにつきましては、文字コード「UTF-8」が編集可能なものをご用意ください。WindowsXPに標準搭載の「メモ帳」などは、UTF-8に対応していない場合がございます。「秀丸エディタ」「サクラエディタ」「EMエディター」などがお勧めです。

■ 対象とする方
HTML・CSSについて学びたい方
パソコンをお持ちの方(推奨:ノートPC)
予め用意された、HTMLテキストを使用して講座を進めます。HTML・CSSについての予備知識としては、編集作業(部分的な)を行ったことがある方でしたら無理なく進めることが可能かと存じます。

■ 担当
田中、柳澤

講座についてのご質問はコチラ

先生に問い合わせる

開催予定の日程一覧

  • 開催予定

    開催予定エリア:渋谷・恵比寿

    受講料:¥ 3,000

Tanaka Syoichi さんの他の講座

teacher

この講座の先生

Tanaka Syoichi

バックエンド系WEBディレクション

20~30:自動車ディーラー(技術・営業)
30~40:派遣・アウトソーシング(営業・SEサポート)
40~現在:SE(主にディレクションを担当)
主に小〜中規模のWEBサイトを制作
技術-営業-SE-PGと普通とは逆の順序で仕事内容が変わっております。... もっと見る >>

detail

講座詳細

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

    11:15〜 受付開始
    12:00〜 セッション開始 HTML5 CSS3
    13:30〜 Bootstrap活用
    14:30〜 Bootstrap Components活用
    15:45〜 Bootstrap JavaScriptの紹介
    〜16:30 セッション終了
  • こんな方を対象としています

    ・HTML5・CSSについて学びたい方(初級者〜中級者)
    ・最強フレームワーク「BootStrap」について知りたい方
    ・WEBコーディングについて学びたい方
    予め用意された、HTMLテキストを使用して講座を進めます。HTML・CSSについての予備知識としては、編集作業(部分的な)を行ったことがある方でしたら無理なく進めることが可能かと存じます。
  • 受講料の説明

    テキスト・サンプルファイル
    ※領収書が必要な方は、当日、その旨お伝えください。
  • 受講する際は以下をお読み下さい

    電源アダプターを持参頂いた方が良いかと思います。(バッテリー切れの予防)

review

感想

  • 男性 30代

    この講座は「勉強になります!」でした

    非常に簡潔明瞭で行く価値があります。

  • M2

    男性 40代

    この講座は「Bootstrap が使えるようになる講座」でした

    Bootstrap は難しい印象がありましたが、一歩一歩教えていただき、だいぶハードルが下がりました。
    自分で試行錯誤するよりやはり最初の導入は教わると楽だと思いました。

  • M2

    男性 30代

    この講座は「Bootstrapを知るために最適な講座」でした

    内容に関してはHTML5、CSS3の基礎を理解している事を前提ではあったものの、Bootstrapを使用しコーディングを行う事のノウハウを御教授頂けたので非常に満足しています。

  • 女性

    この講座は「便利なツールが手に入る講座」でした

    便利らしいと聞きつつ今まで手付かずだったBootstrapでしたが、色々教えていただいて、自分でも気軽に使えるツールな気がしました。今後のHP制作に活かしていきたいと思います。

  • 男性 30代

    この講座は「Bootstrapを使い始めるのにちょうどいい講座」でした

    情報量も多すぎず、少なすぎず、実際に使い始めたいと思っているときにちょうどいい講座でした。手を動かしてサンプルのコードを編集し、ブラウザで動作を確認する流れでBootstrapの効果を体感できるので、演習時間は積極的にいじるとより勉強になると思います。(その方が疑問も沸くので)

  • 男性

    この講座は「Bootstrapの入門講座」でした

    Bootstrapについての入門講座でした。HTMLやCSSの事前知識があったほうが、より講座を理解しやすいと思います。自分でもBootstrapを使って、コーディングしてみたいと思います。

  • 男性

    この講座は「興味のあったbootstrapを一から知る事ができました」でした

    とても勉強になった時間でした。教えていただいた事を今後のウェブ作りの参考にさせていただきます

  • 男性 40代

    この講座は「Bootstrapを知る」でした

    Bootstrapはとっつきにくいと思っていたのですが、今回いってみて
    なるほど、、、と考え方がわかりました。

    Version2.3とVersion3.0がどのように異なるのかなどを教えていただきました。
    深くよりは、大まかにどのように利用できるのかを教わりました。

    学べたのは
    Bootstrap+HTML5+CSS3 です。
    HTMLとCSSの知識は必要になります。
    (そうしないと、言っていることがよくわからない、、、となります)

    渋谷の開場でしたが、綺麗で非常に良い会場でした。

  • 女性

    この講座は「満足」でした

    わかりやすく、スピード感あり、欲しい情報をたくさんきけて、実践できました。
    ありがとございました。
    他の講座も、是非うけたいです。

  • 女性

    この講座は「すぐに使えてとても便利」でした

    教室で取り上げていた「twitter Bootstrap」が直ぐに使えてとても便利でしたので、早速、活用させて頂きます。
    導入の際のポイントについても理解できました。
    また、フレームワークの概念についての説明がとても印象的でした。