10/17(Thu)

今日の生放送

レスポンシブサイトデザインコーディング実習

Sublimeで書く簡単レスポンシブwebページ制作

第1回:2014年2月8日公開

90min

Sublimeで書く簡単レスポンシブwebページ制作

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

コース概要

レスポンシブデザインとはPC、スマートフォン、タブレットなど デバイスごとに異なるデザインを 同一htmlファイルで実現するマルチデバイス対応技術です。

授業中には、実際にデバイスごとにデザインを変える、 メディアクエリーというcssの技術を用いて レスポンシブデザインのページを完成させます!

■ 必要なもの■

1)Sublimeと解凍ツールのインストール
手順はこちらのページ参照。→http://schoo.jp/teacher/315
2)授業中ブラウザの開発ツールを使用します。
このページのスライドp30~34参照
3)エミュレーターのインストール(win・Mac共通)
まずAdobe Airをインストールします。
http://get.adobe.com/jp/air/
つづいてMobilizerをインストールします。
http://www.springbox.com/mobilizer/

担当の先生

パーソナリティ

  • 未定

    未定

参加したい受講生 : 1345

カテゴリー

タグ

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

授業リスト

Sublimeで書く簡単レスポンシブwebページ制作

2014年2月8日公開

90min.

レスポンシブデザインとはPC、スマートフォン、タブレットなど デバイスごとに異なるデザインを 同一htmlファイルで実現するマルチデバイス対応技術です。

授業中には、実際にデバイスごとにデザインを変える、 メディアクエリーというcssの技術を用いて レスポンシブデザインのページを完成させます!

■ お話すること■

1) 解像度とデバイスサイズの関係
2) 基本は可変幅のフレキシブルデザイン
3) フルードイメージ、フルードグリット
4) 条件付コメントを記述してIE8、IF7に対応させる
5) ヴューポートの指定
6) スマホエミュレーターで見てみよう

■ 必要なもの■

1)Sublimeと解凍ツールのインストール
手順はこちらのページ参照。→http://schoo.jp/teacher/315
2)授業中ブラウザの開発ツールを使用します。
このページのスライドp30~34参照
3)エミュレーターのインストール(win・Mac共通)
まずAdobe Airをインストールします。
http://get.adobe.com/jp/air/
つづいてMobilizerをインストールします。
http://www.springbox.com/mobilizer/

  • 自己紹介&アジェンダ
  • 00:38
  • レスポンシブデザインとは何か?
  • 02:59
  • schooのサイトをスマホで見てみる
  • 02:54
  • スマートフォン向け検索ランキング変更って?
  • 02:05
  • PCとスマートフォンの画面の違い
  • 04:15
  • スマートフォンの解像度は機種によってどのくらい違うのか
  • 01:16
  • レスポンシブデザインのキーワード一覧
  • 00:40
  • 「ビューポート」とは?(CSSへの組み込み方)
  • 04:04
  • 「フルードイメージ」とは?(CSSへの組み込み方)
  • 01:10
  • 「フルードグリッド」とは?(CSSへの組み込み方)
  • 04:00
  • フルードグリッドを実装する導入におすすめ、便利なフレームワーク
  • 03:39
  • レスポンシブデザインにおいて最も重要な機能「メディアクエリー」とは?
  • 05:04
  • スマホ用のCSSで気をつけること
  • 04:51
  • mobilizerを使ってレスポンシブデザインを作る方法
  • 03:30
  • DLしたファイルの中身の解説
  • 02:02
  • style.cssを開き、内容を確認する
  • 04:01
  • 全選択してコピーしたものをペーストする
  • 04:28
  • ブラウザで確認してみる
  • 03:53
  • スマホ、タブレット、PC用のcssを用意する
  • 01:41
  • sublimeでindex.htmlを開く
  • 04:57
  • html5shiv.jsとrespond.jsって?
  • 04:39
  • レスポンシブデザイン例
  • 00:01
  • レスポンシブデザインを作るのに便利なサイトまとめ
  • 03:36
  • Q:ブレイクポイント毎に文字サイズの調整は必要?
  • 03:44
  • Q:SEOとしてどうするのが、最適なのでしょうか?
  • 02:45
  • Q:レスポンシブ対応サイトはPCサイトに比べて、制作料金はどれ位増しで請求していますか?
  • 02:20
  • Q:@media only screen and (min-width:769px) { @import
  • 01:20
  • Q:スマホでは見せたくないコンテンツは、どのように隠せばいいのでしょうか?
  • 02:00
  • Q:display:none; を書いても画像はリクエストされたりしないでしょうか?
  • 02:17
  • Q:display:none; の場合、Googleから隠しコンテンツとしてペナルティを受けませんか?
  • 03:00
  • 課題発表

スライド資料

レスポンシブなサイトにあっという間にjQueryを実装する

2014年2月17日公開

60min.

レスポンシブサイトデザイン第二段です。
前回の授業「Sublimeで書く簡単レスポンシブwebページ制作」 で制作したページにjQueryを実装します。

前回の授業に出ていない人も完成版をダウンロードできるので、 jQueryの実装を演習する事が出来ます。

サイトに色んな動きをもたらすjQueryは 今やスマホサイトには無くてはならないものに!
スマホサイトは可変幅が前提なのでちょっとしたコツが必要。
そのコツがサクっとわかり、 JavaScriptが分からなくても簡単に設置できるようになります。

■ お話すること■

1) スマホサイトになくてはならないjQuery
2) 動く画像を可変にする業
3) 実習:TOP画像をフェードさせてみよう!
4) 実習:TOP画像をカルーセルさせてみよう!
5) スマホエミュレーターで見てみよう

 

■ 必要なもの■

1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。
インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。

2)エミュレーターのインストール(win・Mac共通)
(※ブラウザでも確認できるのでなくても可)
まずAdobe Airをインストールします。
http://get.adobe.com/jp/air/
つづいてMobilizerをインストールします。
http://www.springbox.com/mobilizer/

 

■演習用素材について

授業資料のp36にある演習素材は、現在ご利用いただけない状態となっております。
素材が準備出来次第公開いたします。

ご迷惑をお掛けいたしますが、ご理解とご了承のほどよろしくお願いいたします。

 

 

 

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ