Uploaded byMori Kazue
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
10月4日に大阪で開催された「Co:Labo NambaJelly」にて登壇し、HTMLとCSSがどう変わったのか？や、この勉強会についてご紹介しました。 [ 勉強会詳細： ] ( http://r360studio.com/coworklabo/ )
More Related Content
Similar to イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
- 1. Co:Labo NambaJelly 2014年10月4日(土) 森和恵 イマドキのタグとスタイルシートを知ろう HTML＆CSSの今を学ぶきっかけづくり
- 2. r360studio 森和恵 • Web系のセミナー講師（iMedio） • 書籍執筆「 よくわかるFireworksの教科書 」 • 勉強会「 ガチンコバトル勉強会 in 大阪 」 • r360studio.com • Twitter @r360studio
- 3.
- 4.
- 5.
- 6.
- 7.
- 8. 創成期に、Web仕事を始めました • 1996年Yahoo! がスタート • 1997年 Microsoft FrontPage で制作開始 • 1997年 Internet Explorer 4 が登場 • 1998年 Adobe Dreamweaver2 に変更（テーブルレイアウト） • 1998年 Google がスタート • 2006年 Web標準の日（CSSレイアウト） • 2008年 iPhone発売（モバイル対応レイアウト）
- 9.
- 10.
- 11. せっかく、覚えたのに • 新しい表現が増えた • 流行が変わった • 仕様が変更になった • 表示機器が増えた …などの理由で、 既存テクニックが使えなくなる ことは日常茶飯事 by a tai
- 12. 制作者は、日々勉強が必要 • 流行遅れでは、通用しない • 腕のいい人に、仕事は集まる • 新しいことにチャレンジする 楽しみ • 業界の成熟を近くで見られる by Vince Alongi
- 13. 今日お話しすること • HTMLとは？＆今昔 • CSSとは？＆今昔 • スキルアップの必要性 • Co:Laboセミナー告知 by Dennis
- 14.
- 15. タグ＝HTMLとは？ Webページの骨組み・基礎を指定する言語。HTML5が最新 <title>コワーキングスペースCo:Labo </title> <link rel="shortcut icon" href="favicon.ico">
- 16.
- 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.
- 22.
- 23. スタイルシート＝CSSとは？ Webページの見ためを指定する言語。CSS3が最新 <div>Samplebox</div> div{ font-size:2em; color:red; }
- 24. CSSコーディングの今昔 例：グラデーション色指定 CSSGradients
- 25. グラデーション色指定は、背景画像で <div class="box1">Samplebox</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.
- 31.
- 32.
- 33. スキルアップしたら、こんなにいいね！ • ブラウザや検索サイトに、正しく評価される • できることが増え、表現の幅が広がる • 作業の無駄が減り、作業の効率化・時間短縮 …知らないと損することばかり
- 34. 怖いのは、変わったことを 誰も教えてくれないこと ・学校の勉強とは違う 受け身ではダメ
- 35.
- 36.
- 37.
- 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/ セミナー告知＆スライド公開