10月4日に大阪で開催された「Co:Labo NambaJelly」にて登壇し、HTMLとCSSがどう変わったのか？や、この勉強会についてご紹介しました。 [ 勉強会詳細： ] ( http://r360studio.com/coworklabo/ )

1. Co:Labo NambaJelly
2014年10月4日(土)
森和恵
イマドキのタグとスタイルシートを知ろう
HTML＆CSSの今を学ぶきっかけづくり

2. r360studio 森和恵
•
Web系のセミナー講師（iMedio）
•
書籍執筆「 よくわかるFireworksの教科書 」
•
勉強会「 ガチンコバトル勉強会 in 大阪 」
•
r360studio.com
•
Twitter @r360studio

3. 本日、堺筋本町近くで開催中…

4. 17:45～18:15に登壇

5. iMedioにてお申込み受付中

6. Co:Laboで10月～12月に開催

7. ホームページ Webサイトを作る ための技術を教えています

8. 創成期に、Web仕事を始めました
•
1996年 Yahoo! がスタート
•
1997年 Microsoft FrontPage で制作開始
•
1997年 Internet Explorer 4 が登場
•
1998年 Adobe Dreamweaver2 に変更（テーブルレイアウト）
•
1998年 Google がスタート
•
2006年 Web標準の日（CSSレイアウト）
•
2008年 iPhone発売（モバイル対応レイアウト）

9. 華やかそうな仕事に見えますが…

10. Web制作の技術の入れ替わりは速い

11. せっかく、覚えたのに
•
新しい表現が増えた
•
流行が変わった
•
仕様が変更になった
•
表示機器が増えた
…などの理由で、 既存テクニックが使えなくなる ことは日常茶飯事
by a tai

12. 制作者は、日々勉強が必要
•
流行遅れでは、通用しない
•
腕のいい人に、仕事は集まる
•
新しいことにチャレンジする 楽しみ
•
業界の成熟を近くで見られる
by Vince Alongi

13. 今日お話しすること
•
HTMLとは？＆今昔
•
CSSとは？＆今昔
•
スキルアップの必要性
•
Co:Laboセミナー告知
by Dennis

14. HTMLとは？

15. タグ＝HTMLとは？
Webページの骨組み・基礎を指定する言語。HTML5が最新
<title>コワーキングスペース Co:Labo </title>
<link rel="shortcut icon" href="favicon.ico">

16. HTMLマークアップの今昔
例：画像を表示するimg要素

17. 画像を表示する<img>
•
img要素
•
src属性で表示する画像ファイルを指定
•
alt属性で表示できなかった時の代替テキストを指定
•
width属性とheight属性で原寸でも表示サイズを指定
<img src=“画像ファイル指定“ alt=“代替テキスト”
width=“高さ” height=“幅”>

18. <img src=“img/coworklabo-exterior.jpg” alt=“Co:Labo難波の外観写真 “ width=“150” height=“200”>

19. HTML5になり変更後の<img>
•
img要素
•
src属性で表示する画像ファイルを指定
•
サイズ指定は不要
•
alt属性で表示できなかった時の代替テキスト （置き換えても同等となるテキスト情報）を指定
•
alt属性が文脈的に不要であれば、空文字列を指定
<img src=“画像ファイル指定“ alt=“代替テキスト”>

20. <img src="img/coworklabo-exterior.jpg" alt="Co:Labo難波の外観写真です。一階にはローソンがあり、 二階にCo:Labo難波があります。壁面に緑の大きな看板がかかげ られています。“>

21. <img src="img/coworklabo-gate.jpg" alt="">

22. CSSとは？

23. スタイルシート＝CSSとは？
Webページの見ためを指定する言語。CSS3が最新
<div>Sample box</div>
div{
font-size:2em;
color:red;
}

24. CSSコーディングの今昔
例：グラデーション色指定 CSS Gradients

25. グラデーション色指定は、背景画像で
<div class="box1">Sample box</div>
.box1{
background:url(gradimg.png);
}
gradimg.png

26. グラデーション色指定 CSS3 Gradients
<div class="box2">Sample box</div>
.box2{
background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#FFFF4D));
}
※旧機種のスマホなど

27. 仕様変更後１の CSS3 Gradients
<div class="box2">Sample box</div>
.box2{
background: -webkit-linear-gradient(top, #00FFFF, #FFFF4D);
}
※スマホ、Safari、Chromeなど

28. 仕様変更後２の CSS3 Gradients
<div class="box2">Sample box</div>
.box2{
background: linear-gradient(to bottom, #00FFFF , #FFFF4D);
}
※ほぼすべての最新環境で共通

29. 現在の CSS3 Gradients
<div class="box2">Sample box</div>
.box2{
background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#FFFF4D));
background: -webkit-linear-gradient(top, #00FFFF, #FFFF4D);
background: linear-gradient(to bottom, #00FFFF , #FFFF4D);
}

30. HTML＆CSS ソースコードに制作者の腕がでる

31. スキルアップの必要性

32. 新しい技術を勉強するメリット

33. スキルアップしたら、こんなにいいね！
•
ブラウザや検索サイトに、正しく評価される
•
できることが増え、表現の幅が広がる
•
作業の無駄が減り、作業の効率化・時間短縮
…知らないと損することばかり

34. 怖いのは、変わったことを 誰も教えてくれないこと ・ 学校の勉強とは違う 受け身ではダメ

35. この業界で生きていくなら “今”を知っておこう！

36. Co:Laboセミナー告知

37. Co:Laboで10月～12月に開催
http://r360studio.com/coworklabo/

38. 10月 HTML
第１回 10月18日 14～16時 HTML（1）
第２回 10月28日 19～21時 HTML（2）

39. 11月 CSS
第３回 11月12日 19～21時 CSS（1）
第４回 11月26日 19～21時 CSS（2）

40. 12月 資格試験 HTML5レベル1
第５回 12月10日 19～21時 資格試験 HTML5レベル1（1）
第６回 12月17日 19～21時 資格試験 HTML5レベル1（2）

41. スタート記念で受講料無料
•
コワーキング施設 Co:Labo 1日利用料金 1,000円 を入室時にお支払いください
•
ノートパソコンをお持込くだ さい
•
テキストエディターとChrome を準備してください

42. 2014年10月4日(土)
森和恵
http://r360studio.com/coworklabo/
セミナー告知＆スライド公開