chevron_left

挫折した人のための 初心者速習HTML/CSS基礎

PREMIUM
第3回

挫折した人のための、初心者速習html+css【同一サイトがデバイスで切り替わる!レスポンシブ編】

2014年4月13日 90min

スライド資料

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

1 / 49

授業の概要

html+cssを挫折した全ての人に贈るシリーズ 全5回

このシリーズは1回で完結していますが、 1回から5回まで同じサイトがどんどん完成して行く形になっています。
1回づつ完結した出来上がり見本付きの演習ファイルがダウンロードできます。

第3回:初心者速習html+css【同一サイトがデバイスで切り替わる!レスポンシブ編】

初めてコーディングを学ぶ人や、本を読んだり参考サイトを見ながらコーディングしても 崩れてしまってうまく行かなかった人のために、レスポンシブデザインを易しく解説して演習します。
レスポンシブデザインとは、今や無くてはならないPC、スマホ、タブレットなど、見ているデバイズによってデザインを切り変える手法です。

 

■ 必要なもの■

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

2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。
(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/

 

授業で使用する教材

※授業以外での使用は禁止します

チャプター

play_arrow
自己紹介&アジェンダ
03:48
play_arrow
レスポンシブデザイン理論に軽く触れる
02:30
play_arrow
レスポンシブなスタイルシートについて
02:20
play_arrow
読みにくいサイトの紹介
02:00
play_arrow
読みやすいサイトの紹介
02:10
play_arrow
スマホサイトのための考え方
02:45
play_arrow
PCサイトのための考え方
02:20
play_arrow
CSSを切り替えるにはメディアクエリーを使います
04:15
play_arrow
htmlファイル内に、css切り替えの記述する
04:40
play_arrow
タブレット用からスマホ用のcssを作成する際の注意点
03:40
play_arrow
スマホのUXとPCのUXとの最大の違い
03:05
play_arrow
指で操作する/Flashが使えない点に注意する
03:30
play_arrow
AppleのDesigning Great Apps
05:17
play_arrow
コーディング前のお約束
02:07
play_arrow
sublimeの最大のメリット
04:34
play_arrow
コーディングを始める
03:47
play_arrow
サンプルファイルをsublimeで開く
04:30
play_arrow
各デバイス向けのcssファイルを開く
04:40
play_arrow
タブレットサイズに対応することを確認
03:10
play_arrow
記事や複数カラムをスマホ向けに編集する
04:55
play_arrow
スマホ向けの表示を確認する
02:15
play_arrow
positionの活用で座標を指定する
02:59
play_arrow
実際にpositionを指定する
05:23
play_arrow
Q:先生は世の中の全サイトのRWD化は望ましいと思いますか?
02:23
play_arrow
Q:レスポンシブのデザインをする場合、メニューボタンを画像にする場合の注意事項ってありますか?
02:04
play_arrow
Q:Bootstrapなどのフレームワークを使うべきか、先生のように自前で作る方がいいのか?どちらがいいですか?
00:57
play_arrow
Q:scblimeを開いてDLしたコンテンツをファイルから開いたのですが、、、
04:10
play_arrow
Q:カラムの幅の計算方法を教えて下さい。
08:32
play_arrow
課題発表