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/
セミナー告知＆スライド公開