おためし受講中

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

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/

 

学生代表

  • 未定

    未定

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    03:48  (00:12 ~ )
    レスポンシブデザイン理論に軽く触れる
    02:30  (04:00 ~ )
    レスポンシブなスタイルシートについて
    02:20  (06:30 ~ )
    読みにくいサイトの紹介
    02:00  (08:50 ~ )
    読みやすいサイトの紹介
    02:10  (10:50 ~ )
    スマホサイトのための考え方
    02:45  (13:00 ~ )
    PCサイトのための考え方
    02:20  (15:45 ~ )
    CSSを切り替えるにはメディアクエリーを使います
    04:15  (18:05 ~ )
    htmlファイル内に、css切り替えの記述する
    04:40  (22:20 ~ )
    タブレット用からスマホ用のcssを作成する際の注意点
    03:40  (27:00 ~ )
    スマホのUXとPCのUXとの最大の違い
    03:05  (30:40 ~ )
    指で操作する/Flashが使えない点に注意する
    03:30  (33:45 ~ )
    AppleのDesigning Great Apps
    05:17  (37:15 ~ )
    コーディング前のお約束
    02:07  (42:32 ~ )
    sublimeの最大のメリット
    04:34  (44:39 ~ )
    コーディングを始める
    03:47  (49:13 ~ )
    サンプルファイルをsublimeで開く
    04:30  (53:00 ~ )
    各デバイス向けのcssファイルを開く
    04:40  (57:30 ~ )
    タブレットサイズに対応することを確認
    03:10  (1:02:10 ~ )
    記事や複数カラムをスマホ向けに編集する
    04:55  (1:05:20 ~ )
    スマホ向けの表示を確認する
    02:15  (1:10:15 ~ )
    positionの活用で座標を指定する
    02:59  (1:12:30 ~ )
    実際にpositionを指定する
    05:23  (1:15:29 ~ )
    【後半】質疑応答
    Q:先生は世の中の全サイトのRWD化は望ましいと思いますか?
    02:23  (1:21:46 ~ )
    Q:レスポンシブのデザインをする場合、メニューボタンを画像にする場合の注意事項ってありますか?
    02:04  (1:24:09 ~ )
    Q:Bootstrapなどのフレームワークを使うべきか、先生のように自前で作る方がいいのか?どちらがいいですか?
    00:57  (1:26:13 ~ )
    Q:scblimeを開いてDLしたコンテンツをファイルから開いたのですが、、、
    04:10  (1:27:10 ~ )
    Q:カラムの幅の計算方法を教えて下さい。
    08:32  (1:31:20 ~ )
    課題発表
      (1:39:52 ~ )