レスポンシブコーディング編【イシジマミキのデザイン実践ゼミ】

レスポンシブコーディング編【イシジマミキのデザイン実践ゼミ】

第1回:2014年9月15日公開

90min

レスポンシブコーディング編【イシジマミキのデザイン実践ゼミ】

おためし受講する(5分)

コース概要

実際に作ってみる!それが一番勉強になります。本授業では簡単なシングルページを作成することで、今必要とされている中でも特に基本的な技術に対して丁寧に解説していきます。

第1回はドキュメントも充実しているBootstrapでのレスポンシブコーディング

現在のWeb制作はアプリなどの需要も増え、早い段階で動くWebページを見せることが必要になってきています。そのためにBootstrapでモックアップのようにコーディングしていき、それらが実際に各デバイスで動かすとどうなるか。このフローを何度も繰り返すことが増えていきます。

「良く聞く話だし、重要性も分かってるけど、みんな実際にどうやってるの?」という疑問を持っている方たちに向けて、お話していきますので普段の疑問をぶつけてみてくださいね。

■授業中に使うデータ

■必要なもの

* Bootstrap
* Edge Inspect

■学べること

* フレームワークの実践的な利用方法
* フレームワークを利用した簡単レスポンシブコーディング
* 便利な無償アプリを使った検証方法

■デザイン実践ゼミ全3回

レスポンシブコーディング編【イシジマミキのデザイン実践ゼミ】
デザインツール利用編【イシジマミキのデザイン実践ゼミ】
簡単なjQuery実装編【イシジマミキのデザイン実践ゼミ】

 

こんな人にオススメ

Webデザインの実作業を効率化したい方

担当の先生

パーソナリティ

  • 未定

    未定

参加したい受講生 : 781

カテゴリー

タグ

サンプルファイル

授業で使用するファイル

※授業以外での利用は禁止します。

月額980円で、4,600本以上の授業が見放題

授業リスト

レスポンシブコーディング編【イシジマミキのデザイン実践ゼミ】

2014年9月15日公開

90min.

実際に作ってみる!それが一番勉強になります。本授業では簡単なシングルページを作成することで、今必要とされている中でも特に基本的な技術に対して丁寧に解説していきます。

第1回はドキュメントも充実しているBootstrapでのレスポンシブコーディング

現在のWeb制作はアプリなどの需要も増え、早い段階で動くWebページを見せることが必要になってきています。そのためにBootstrapでモックアップのようにコーディングしていき、それらが実際に各デバイスで動かすとどうなるか。このフローを何度も繰り返すことが増えていきます。

「良く聞く話だし、重要性も分かってるけど、みんな実際にどうやってるの?」という疑問を持っている方たちに向けて、お話していきますので普段の疑問をぶつけてみてくださいね。

■授業中に使うデータ

■必要なもの

* Bootstrap
* Edge Inspect

■学べること

* フレームワークの実践的な利用方法
* フレームワークを利用した簡単レスポンシブコーディング
* 便利な無償アプリを使った検証方法

■デザイン実践ゼミ全3回

レスポンシブコーディング編【イシジマミキのデザイン実践ゼミ】
デザインツール利用編【イシジマミキのデザイン実践ゼミ】
簡単なjQuery実装編【イシジマミキのデザイン実践ゼミ】

 

  • 自己紹介&アジェンダ
  • 02:26
  • 今回の授業で覚えられること
  • 03:10
  • Bootstrapのサイトに行き、Source codeをダウンロードしよう
  • 00:42
  • index.htmlの作成をしよう
  • 06:42
  • ナビゲーションバーの追加をしよう
  • 02:36
  • lessのコンパイラをインストールしよう
  • 09:06
  • lessファイルをcssに変換しよう
  • 07:46
  • cssが反映されていないので、修正して反映させよう
  • 06:14
  • ナビゲーションバーのカスタマイズをしよう
  • 03:28
  • ナビゲーションのデザインを変更してみよう
  • 00:42
  • @navbar-default-bgの色を変更しよう
  • 02:06
  • ナビゲーションの文字の色を変更しよう
  • 04:03
  • アクティブの色を変更しよう
  • 03:10
  • コンタクトボタンの色を変更しよう
  • 01:10
  • htmlを弄ろう
  • 04:12
  • 画像ファイルを入れてみよう
  • 05:19
  • navbar-navにpadding-top: 20px;を適用させよう
  • 08:30
  • Q:イシジマ先生はBootstrapをどうやって習得しましたか?
  • 01:13
  • Q:lessはcssより定番なのでしょうか?
  • 02:59
  • Q:navのフォントサイズについて
  • 01:11
  • Q:Bootstrapなど新しい技術がwebではどんどん出てきますが、イシジマ先生がこの技術は今後発展するとか、直ぐに廃れるとかの見分け方ってありますか?
  • 02:39
  • Q:htmlとlessを触れれば、どんな仕様のサイトでもBootstrapで作れるものなんでしょうか?
  • 02:41
  • Q:Bootstrap以外にもおすすめのフレームワークはありますか?
  • 01:09
  • Q:IE8のサポートが不要になった場合、アニメーションなどcss3で何とかなることはjQueryで行なわなくなるのでしょうか?
  • 04:56
  • レポート課題発表

スライド資料

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ