おためし受講中

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

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

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

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

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

■授業中に使うデータ

■必要なもの

* Bootstrap
* Edge Inspect

■学べること

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

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

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

 

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

学生代表

  • 未定

    未定

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    02:26  (00:12 ~ )
    今回の授業で覚えられること
    03:10  (02:38 ~ )
    Bootstrapのサイトに行き、Source codeをダウンロードしよう
    00:42  (05:48 ~ )
    index.htmlの作成をしよう
    06:42  (06:30 ~ )
    ナビゲーションバーの追加をしよう
    02:36  (13:12 ~ )
    lessのコンパイラをインストールしよう
    09:06  (15:48 ~ )
    lessファイルをcssに変換しよう
    07:46  (24:54 ~ )
    cssが反映されていないので、修正して反映させよう
    06:14  (32:40 ~ )
    ナビゲーションバーのカスタマイズをしよう
    03:28  (38:54 ~ )
    ナビゲーションのデザインを変更してみよう
    00:42  (42:22 ~ )
    @navbar-default-bgの色を変更しよう
    02:06  (43:04 ~ )
    ナビゲーションの文字の色を変更しよう
    04:03  (45:10 ~ )
    アクティブの色を変更しよう
    03:10  (49:13 ~ )
    コンタクトボタンの色を変更しよう
    01:10  (52:23 ~ )
    htmlを弄ろう
    04:12  (53:33 ~ )
    画像ファイルを入れてみよう
    05:19  (57:45 ~ )
    navbar-navにpadding-top: 20px;を適用させよう
    08:30  (1:03:04 ~ )
    【後半】質疑応答
    Q:イシジマ先生はBootstrapをどうやって習得しましたか?
    01:13  (1:12:17 ~ )
    Q:lessはcssより定番なのでしょうか?
    02:59  (1:13:30 ~ )
    Q:navのフォントサイズについて
    01:11  (1:16:29 ~ )
    Q:Bootstrapなど新しい技術がwebではどんどん出てきますが、イシジマ先生がこの技術は今後発展するとか、直ぐに廃れるとかの見分け方ってありますか?
    02:39  (1:17:40 ~ )
    Q:htmlとlessを触れれば、どんな仕様のサイトでもBootstrapで作れるものなんでしょうか?
    02:41  (1:20:19 ~ )
    Q:Bootstrap以外にもおすすめのフレームワークはありますか?
    01:09  (1:23:00 ~ )
    Q:IE8のサポートが不要になった場合、アニメーションなどcss3で何とかなることはjQueryで行なわなくなるのでしょうか?
    04:56  (1:24:09 ~ )
    レポート課題発表
      (1:29:05 ~ )