1.
ブロガー勉強会
∼HTML+CSSの超基礎編∼
2015/11/22

2.
自己紹介
✤ okutani
• 25歳
• ブログvdeep運営
• 仕事でHTMLとかPHPとか
• 趣味は吉祥寺巡り

3.
今日のながれ
① Webサイトのしくみ
② HTML…CSS…?ってなに
③ ブログサイトをつくってみよう

4.
アイスブレイクたいむ！

5.
アイスブレイク(5分ぐらい)
① かんたんな自己紹介
② こんなブログやってる(orやりたい)
③ 最近うれしかった・たのしかったこと

6.
① Webサイトのしくみ

7.
Webサイトが見えるしくみ

8.
Webサイトが見えるしくみ
Webサイトを作る

9.
Webサイトが見えるしくみ

10.
Webサイトが見えるしくみ
インターネット上へ
アップロード

11.
Webサイトが見えるしくみ
インターネット上へ
アップロード
サーバー

12.
Webサイトが見えるしくみ

13.
Webサイトが見えるしくみ
Webサイトがみれる
おわり

14.
② HTMLとCSS

15.
HTML
✴ HyperText Markup Language
✴ Webサイトの『構造』を表す
✴ コンピュータが理解できる
✴ 文字とか画像とかリストとか…

16.
HTML
✴ HyperText Markup Language
✴ Webサイトの『構造』を表す
✴ コンピュータが理解できる
✴ 文字とか画像とかリストとか…
今日やるのは
HTML5

17.
CSS
✴ Cascading Style Sheets
✴ Webサイトの『見た目』を決める
✴ 文字の色、影をつけたり…

18.
CSS
✴ Cascading Style Sheets
✴ Webサイトの『見た目』を決める
✴ 文字の色、影をつけたり…
今日やるのは
CSS3

19.
たとえば

20.
HTMLとCSS

21.
CSSが無いと…？

22.
HTMLとCSS

23.
HTMLとCSS

24.
HTMLとCSS
見た目が崩れてしまう

25.
逆に、今残ったのが
「HTML」ということ
(+JavaScriptなど)

26.
もうすこし詳しい説明
↓
勉強会用資料+マニュアル

27.
③ ブログサイトをつくってみよう

28.
ロッククライミングは

29.
やってから
覚えるほうが
覚えやすい

30.
何事もやってみる
(理解はあとでOK)

31.
ブログサイト作成
このサイトを
1からつくってみましょう

32.
サンプルサイトを確認(勉強会用資料参照)

33.
index.htmlをエディタで開いて作業！

34.
続きはWeb講義で

35.
WordPressでHTMLを
書くには…
↓
DEMO

36.
何かありましたらWebで！
本日はありがとうございました。