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

第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/

    レスポンシブサイトデザインコーディング実習 （全2回）

    担当の先生

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

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