おためし受講中

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/

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

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