chevron_left

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

PREMIUM

スライド資料

会員登録して、全てのスライドを見よう

1 / 8

授業の概要

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

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

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

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

■授業中に使うデータ

■必要なもの

* Bootstrap
* Edge Inspect

■学べること

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

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

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

 

こんな人にオススメ

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

授業で使用する教材

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

チャプター

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