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

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

おためし受講中
  • 授業で使用する教材

    教材はありません

「授業フィードバック」で、授業の感想を教えてください!

チュートリアルは、こちらの「その他のオプション」からいつでも確認いただけます。

コピーしました!

ここには授業中のやりとりが表示されます

生放送でのコメントが再生されています

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

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    全2回 2014年2月8日公開
    Sublimeで書く簡単レスポンシブwebページ制作

    レスポンシブデザインとは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/

    教室画面の機能をご紹介します

    学習機能を活用して、効率よく学習しましょう!