Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

4.022 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Bildung
  • Als Erste(r) kommentieren

イマドキの「タグ=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/ セミナー告知&スライド公開

×