ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/911/room ーーーーーーーーーーーーーーーーーーーーーーー

2. 本日のアジェンダ
DreamWeaverのセッティング
制作仕様書に基づいてhtmlを
宿題と質問
5分
20分
5分

3. html+cssを挫折した全ての人のための基礎実習
http://schoo.jp/class/390
!
挫折した人のための初心者速習html+css【2カラムボックスモデル編】
http://schoo.jp/class/518
前提知識が
必要な授業なの
にゃ

4. 前提知識が
必要な授業なの
にゃ
はじめてHTML5でコーディングする時に注意したい
アウトラインとかいろいろ
http://webdesignrecipes.com/semantic-html5-with-outline/
HTML5でサイトをつくろう
http://www.html5-memo.com/first-html5/html5-01/

10. 2.
3.
4.
5.
6.
7.

12. ワイヤーフレーム
http://akikito.com/schoo/
20140520/wireframe.png
!
制作仕様書
http://akikito.com/schoo/
20140520/naming.png
制作仕様書を
みるにゃ
にゃ
素材ダウンロード↓
http://akikito.com/schoo/20140520/html.zip
!

13. http://akikito.com/schoo/20140520/サンプル
はこちら

15. 本日のアジェンダ
DreamWeaverのセッティング
制作仕様書に基づいてhtmlを
宿題と質問
5分
20分
5分
本日のアジェンダ
DreamWeaverでcssを書く
ワイヤーフレームを下書きに
宿題と質問
5分
20分
5分

16. html+cssを挫折した全ての人のための基礎実習
http://schoo.jp/class/390
!
挫折した人のための初心者速習html+css【2カラムボックスモデル編】
http://schoo.jp/class/518
下の授業は
フリーチケで
公開中にゃ

17. 前提知識が
必要な授業なの
にゃ
CSSでレイアウトするなら絶対覚えておきたい配置のルール：
フロートや絶対配置、z-index とかいろいろ
http://webdesignrecipes.com/css-visual-formating-model/
意外と知らない!?CSSセレクタ20個のおさらい
http://weboook.blog22.fc2.com/blog-entry-268.html
html+cssを初めて学ぶ人は、

23. 今日の完成サンプルは、
こちら
!
http://akikito.com/schoo/
20140522/
見比べて
みるにゃ自分の
cssと

26. 本日のアジェンダ
DreamWeaverのセッティング
制作仕様書に基づいてhtmlを
宿題と質問
5分
20分
5分
本日のアジェンダ
cssはうまくあたっていますか？
おさらいと、カンプ制作準備
宿題と質問
5分
20分
5分

27. html+cssを挫折した全ての人のための基礎実習
http://schoo.jp/class/390
!
挫折した人のための初心者速習html+css【2カラムボックスモデル編】
http://schoo.jp/class/518
下の授業は
フリーチケで
公開中にゃ

28. 前提知識が
必要な授業なの
にゃ
CSSでレイアウトするなら絶対覚えておきたい配置のルール：
フロートや絶対配置、z-index とかいろいろ
http://webdesignrecipes.com/css-visual-formating-model/
意外と知らない!?CSSセレクタ20個のおさらい
http://weboook.blog22.fc2.com/blog-entry-268.html
html+cssを初めて学ぶ人は、

36. chromeに
この拡張機能を
いれるにゃ
http://goo.gl/YxzxtNスクロール
でスクショ
するにゃ便利にゃ
!
http://akikito.com/schoo/20140522/
完成見本はこちらにゃ↓

39. 本日のアジェンダ
DreamWeaverのセッティング
制作仕様書に基づいてhtmlを
宿題と質問
5分
20分
5分
本日のアジェンダ
コーディングルールについて
カンプからスライス切り出した
画像を配置しよう
宿題と質問
5分
25分
!
5分

46. サンプルhttp://akikito.com/schoo/20140610/

48. 本日のアジェンダ
DreamWeaverのセッティング
制作仕様書に基づいてhtmlを
宿題と質問
5分
20分
5分
本日のアジェンダ
css3でグラフィックを作ろう
!
「上にもどるボタン」
をcss3で設置してみよう
!
宿題と質問
5分
20分
5分

52. 今日使用するボタンジェネレーター
http://css3button.net/
!
今日のサンプルページ
http://behomazn.com/schoo/20140617/
!
!
!

56. 本日のアジェンダ
DreamWeaverのセッティング
制作仕様書に基づいてhtmlを
宿題と質問
5分
20分
5分
本日のアジェンダ
課題の添削
「上にもどるボタン」カスタマイズ
!
宿題と質問
15分
10分
5分

57. サンプルページ
http://behomazn.com/schoo/20140619/
!