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

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

PREMIUM

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

1 / 70

授業の概要

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

チャプター

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