Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう

3,948 views

Published on

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

Published in: Education
  • Be the first to comment

イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう

  1. 1. Co:Labo NambaJelly 2014年10月4日(土) 森和恵 イマドキのタグとスタイルシートを知ろう HTML&CSSの今を学ぶきっかけづくり
  2. 2. r360studio 森和恵 • Web系のセミナー講師(iMedio) • 書籍執筆「 よくわかるFireworksの教科書 」 • 勉強会「 ガチンコバトル勉強会 in 大阪 」 • r360studio.com • Twitter @r360studio
  3. 3. 本日、堺筋本町近くで開催中…
  4. 4. 17:45~18:15に登壇
  5. 5. iMedioにてお申込み受付中
  6. 6. Co:Laboで10月~12月に開催
  7. 7. ホームページ Webサイトを作る ための技術を教えています
  8. 8. 創成期に、Web仕事を始めました • 1996年 Yahoo! がスタート • 1997年 Microsoft FrontPage で制作開始 • 1997年 Internet Explorer 4 が登場 • 1998年 Adobe Dreamweaver2 に変更(テーブルレイアウト) • 1998年 Google がスタート • 2006年 Web標準の日(CSSレイアウト) • 2008年 iPhone発売(モバイル対応レイアウト)
  9. 9. 華やかそうな仕事に見えますが…
  10. 10. Web制作の技術の入れ替わりは速い
  11. 11. せっかく、覚えたのに • 新しい表現が増えた • 流行が変わった • 仕様が変更になった • 表示機器が増えた …などの理由で、 既存テクニックが使えなくなる ことは日常茶飯事 by a tai
  12. 12. 制作者は、日々勉強が必要 • 流行遅れでは、通用しない • 腕のいい人に、仕事は集まる • 新しいことにチャレンジする 楽しみ • 業界の成熟を近くで見られる by Vince Alongi
  13. 13. 今日お話しすること • HTMLとは?&今昔 • CSSとは?&今昔 • スキルアップの必要性 • Co:Laboセミナー告知 by Dennis
  14. 14. HTMLとは?
  15. 15. タグ=HTMLとは? Webページの骨組み・基礎を指定する言語。HTML5が最新 <title>コワーキングスペース Co:Labo </title> <link rel="shortcut icon" href="favicon.ico">
  16. 16. HTMLマークアップの今昔 例:画像を表示するimg要素
  17. 17. 画像を表示する<img> • img要素 • src属性で表示する画像ファイルを指定 • alt属性で表示できなかった時の代替テキストを指定 • width属性とheight属性で原寸でも表示サイズを指定 <img src=“画像ファイル指定“ alt=“代替テキスト” width=“高さ” height=“幅”>
  18. 18. <img src=“img/coworklabo-exterior.jpg” alt=“Co:Labo難波の外観写真 “ width=“150” height=“200”>
  19. 19. HTML5になり変更後の<img> • img要素 • src属性で表示する画像ファイルを指定 • サイズ指定は不要 • alt属性で表示できなかった時の代替テキスト (置き換えても同等となるテキスト情報)を指定 • alt属性が文脈的に不要であれば、空文字列を指定 <img src=“画像ファイル指定“ alt=“代替テキスト”>
  20. 20. <img src="img/coworklabo-exterior.jpg" alt="Co:Labo難波の外観写真です。一階にはローソンがあり、 二階にCo:Labo難波があります。壁面に緑の大きな看板がかかげ られています。“>
  21. 21. <img src="img/coworklabo-gate.jpg" alt="">
  22. 22. CSSとは?
  23. 23. スタイルシート=CSSとは? Webページの見ためを指定する言語。CSS3が最新 <div>Sample box</div> div{ font-size:2em; color:red; }
  24. 24. CSSコーディングの今昔 例:グラデーション色指定 CSS Gradients
  25. 25. グラデーション色指定は、背景画像で <div class="box1">Sample box</div> .box1{ background:url(gradimg.png); } gradimg.png
  26. 26. グラデーション色指定 CSS3 Gradients <div class="box2">Sample box</div> .box2{ background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#FFFF4D)); } ※旧機種のスマホなど
  27. 27. 仕様変更後1の CSS3 Gradients <div class="box2">Sample box</div> .box2{ background: -webkit-linear-gradient(top, #00FFFF, #FFFF4D); } ※スマホ、Safari、Chromeなど
  28. 28. 仕様変更後2の CSS3 Gradients <div class="box2">Sample box</div> .box2{ background: linear-gradient(to bottom, #00FFFF , #FFFF4D); } ※ほぼすべての最新環境で共通
  29. 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. 30. HTML&CSS ソースコードに制作者の腕がでる
  31. 31. スキルアップの必要性
  32. 32. 新しい技術を勉強するメリット
  33. 33. スキルアップしたら、こんなにいいね! • ブラウザや検索サイトに、正しく評価される • できることが増え、表現の幅が広がる • 作業の無駄が減り、作業の効率化・時間短縮 …知らないと損することばかり
  34. 34. 怖いのは、変わったことを 誰も教えてくれないこと ・ 学校の勉強とは違う 受け身ではダメ
  35. 35. この業界で生きていくなら “今”を知っておこう!
  36. 36. Co:Laboセミナー告知
  37. 37. Co:Laboで10月~12月に開催 http://r360studio.com/coworklabo/
  38. 38. 10月 HTML 第1回 10月18日 14~16時 HTML(1) 第2回 10月28日 19~21時 HTML(2)
  39. 39. 11月 CSS 第3回 11月12日 19~21時 CSS(1) 第4回 11月26日 19~21時 CSS(2)
  40. 40. 12月 資格試験 HTML5レベル1 第5回 12月10日 19~21時 資格試験 HTML5レベル1(1) 第6回 12月17日 19~21時 資格試験 HTML5レベル1(2)
  41. 41. スタート記念で受講料無料 • コワーキング施設 Co:Labo 1日利用料金 1,000円 を入室時にお支払いください • ノートパソコンをお持込くだ さい • テキストエディターとChrome を準備してください
  42. 42. 2014年10月4日(土) 森和恵 http://r360studio.com/coworklabo/ セミナー告知&スライド公開

×