O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島

Mais Conteúdo rRelacionado

Audiolivros relacionados

Gratuito durante 30 dias do Scribd

Ver tudo

入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島

  1. 1. 入門HTML5/CSS3 @HTML5 Conference 2015 in 鹿児島 コーディングデザイン 森 史憲 © Coding Design, 2015 1
  2. 2. 目次 4 自己紹介 4 入門HTML5/CSS3 4 HTML5そもそも話 4 骨組みとしてのHTML5 4 よいユーザー体験のためのCSS3 4 機能実装のためのJavaScript © Coding Design, 2015 2
  3. 3. 自己紹介 © Coding Design, 2015 3
  4. 4. 自己紹介(1/3) 4 名前 森 史憲 (もり ふみのり) 4 生年月日 昭和51年6月9日 4 出身・現住所 鹿児島県鹿児島市 4 容姿 丸メガネ © Coding Design, 2015 4
  5. 5. 自己紹介(2/3) 4 Webサイト制作 4 Web関連技術講師 4 Web関連書籍執筆 4 イベント運営 © Coding Design, 2015 5
  6. 6. 自己紹介(3/3) 4 カレーLOVE!! ⭐カレー屋 匠 #匠盛 4 ビールLOVE!! ⭐城山観光ホテル #スタウトエール黒糖 4 チョコレートLOVE!! ⭐パティスリーヤナギムラ # 摩チョコチップス © Coding Design, 2015 6
  7. 7. 入門HTML5/CSS3 © Coding Design, 2015 7
  8. 8. 入門HTML5/CSS3 HTML5そもそも話 © Coding Design, 2015 8
  9. 9. 入門HTML5/CSS3 HTML5そもそも話 4 HTML5は「アプリ開発」を意図した言語と言 われてます © Coding Design, 2015 9
  10. 10. 入門HTML5/CSS3 HTML5そもそも話 4 HTML5は「アプリ開発」を意図した言語と言 われてます アプリで使う言語… © Coding Design, 2015 10
  11. 11. iOSアプリ Objective-C, Swift © Coding Design, 2015 11
  12. 12. Androidアプリ Java© Coding Design, 2015 12
  13. 13. HTML5アプリ HTML CSS JavaScript © Coding Design, 2015 13
  14. 14. iOSアプリ  : 1言語 Androidアプリ : 1言語 HTML5アプリ: 3言語 © Coding Design, 2015 14
  15. 15. HTML5: 3 © Coding Design, 2015 15
  16. 16. 5:3© Coding Design, 2015 16
  17. 17. 53© Coding Design, 2015 17
  18. 18. 五十三 © Coding Design, 2015 18
  19. 19. 道のり長い © Coding Design, 2015 19
  20. 20. HTML5アプリ 実はめんどい © Coding Design, 2015 20
  21. 21. つまづきやすい ポイントがある © Coding Design, 2015 21
  22. 22. そこで © Coding Design, 2015 22
  23. 23. 唐突ですが © Coding Design, 2015 23
  24. 24. 勉強がてら © Coding Design, 2015 24
  25. 25. 簡単なアプリ © Coding Design, 2015 25
  26. 26. 作って © Coding Design, 2015 26
  27. 27. 帰ろう © Coding Design, 2015 27
  28. 28. ぜっ© Coding Design, 2015 28
  29. 29. 入門HTML5/CSS3 作るのはメモアプリ 4 テキスト入力&出力がある 4 柔軟なレイアウト 4 入力値を保存できる © Coding Design, 2015 29
  30. 30. 入門HTML5/CSS3 骨組みとしての HTML5 © Coding Design, 2015 30
  31. 31. 入門HTML5/CSS3 [骨組みとしてのHTML5] セクションと見出し 4 文書全体の構造を作る(章、節みたいな) 4 HTML4: 見出しで構造を作る 4 HTML5: セクション or 見出しで構造を作る © Coding Design, 2015 31
  32. 32. HTML4, HTML5: <h1>入門HTML5/CSS3</h1> <h2>骨組みとしてのHTML5</h2> <h3>セクションと見出し</h3> © Coding Design, 2015 32
  33. 33. HTML5: <section> <h1>入門HTML5/CSS3</h1> <section> <h2>骨組みとしてのHTML5</h2> <section> <h3>セクションと見出し</h3> </section> </section> </section> © Coding Design, 2015 33
  34. 34. 入門HTML5/CSS3 [骨組みとしてのHTML5] セクションと見出し セクションを作る要素は4つ article, aside, nav, section 4 blockquote, body, fieldset, figure, td要素は セクショニングルート(根っこ)をつくる特殊 な要素 © Coding Design, 2015 34
  35. 35. 入門HTML5/CSS3 [骨組みとしてのHTML5] セクションと見出し 4 article: ページ内の主題を扱う 4 aside: 主題に関連する話題を扱う 4 nav: 主なリンクの集まり 4 section: 汎用セクション © Coding Design, 2015 35
  36. 36. 入門HTML5/CSS3 [骨組みとしてのHTML5] [特殊な性質] セクションごとにh1要素からはじめてOK 4 見出しはすべてh1要素? 4 SEO的に1ページにh1要素は1つだけがよい? © Coding Design, 2015 36
  37. 37. 見出しはすべてh1要素? すべてh1要素は変。 © Coding Design, 2015 37
  38. 38. SEO的に1ページにh1要素は1つだけがよい? 筋の通ってる マークアップなら h1が複数でもOK © Coding Design, 2015 38
  39. 39. if there's a logical reason to have multiple sections, it's not so bad to have multiple H1s. — Matt Cutts(Googleの中の人) © Coding Design, 2015 39
  40. 40. 入門HTML5/CSS3 [骨組みとしてのHTML5] 4 article, nav, asideなど意味的セクション   セクション要素を使う&h1要素から始める 4 ブログ投稿等WYSIWYGで編集するセクション   外枠だけセクション要素を使ってh1-h2-h3 © Coding Design, 2015 40
  41. 41. h1要素の利用は複数でもOK ただ、意味がおかしくならない範囲で © Coding Design, 2015 41
  42. 42. HTML5アプリ実装サンプル http://cdpn.io/e/xGYZRG CodePenというオンラインエディタを使います © Coding Design, 2015 42
  43. 43. http://cdpn.io/e/xGYZRG extra GYoZa Rice is God. 特・餃子ライスは神。 © Coding Design, 2015 43
  44. 44. 入門HTML5/CSS3 よいユーザー体験 のためのCSS3 © Coding Design, 2015 44
  45. 45. 入門HTML5/CSS3 [よいユーザー体験のためのCSS3] box-sizing ボックスモデルの変更 box-sizing: border-box; /* 幅と高さにborder, paddingを含める */ box-sizing: content-box; /* 幅と高さにborder, paddingを含めない */ box-sizing: inherit; /* 親要素を継承 */ 詳細はcaniuseで確認 © Coding Design, 2015 45
  46. 46. 入門HTML5/CSS3 [よいユーザー体験のためのCSS3] デフォルトはcontent-box © Coding Design, 2015 46
  47. 47. 入門HTML5/CSS3 [よいユーザー体験のためのCSS3] ボーダーも含めて、幅100px、高さ100px © Coding Design, 2015 47
  48. 48. 入門HTML5/CSS3 [よいユーザー体験のためのCSS3] calc() 異なる単位の計算をすることができる height: calc(100% - 50px); 詳細はcaniuseで確認 © Coding Design, 2015 48
  49. 49. 入門HTML5/CSS3 [よいユーザー体験のためのCSS3] calc() © Coding Design, 2015 49
  50. 50. 入門HTML5/CSS3 [よいユーザー体験のためのCSS3] box-shadow ボックスの外側・内側に影を入れる。 カンマ(,)区切りで複数指定可能。 box-shadow: 0 0 5px 0 #000 inset; /* x軸 y軸 ぼかし 広がり 色 (inset) */ 詳細はcaniuseで確認 © Coding Design, 2015 50
  51. 51. 入門HTML5/CSS3 [よいユーザー体験のためのCSS3] box-shadow © Coding Design, 2015 51
  52. 52. HTML5アプリ実装サンプル http://cdpn.io/e/xGYZRG © Coding Design, 2015 52
  53. 53. http://cdpn.io/e/xGYZRG 特・餃子ライス ...    © Coding Design, 2015 53
  54. 54. 入門HTML5/CSS3 機能実装のための JavaScript © Coding Design, 2015 54
  55. 55. 入門HTML5/CSS3 [機能実装のためのJavaScript] Web Storage 4 キー&値のセットでブラウザに保存する 4 2種類ある 4 localStorage(スクリプトで削除しない限 り消えない) 4 sessionStorage(ウインドウを閉じたら 消える) © Coding Design, 2015 55
  56. 56. 入門HTML5/CSS3 [機能実装のためのJavaScript] Web Storage 使い方 localStorage.setItem("key","value"); // 保存 localStorage.getItem("key"); // 参照 localStorage.removeItem("key"); // 削除 localStorage.clear(); // 全部削除 © Coding Design, 2015 56
  57. 57. 入門HTML5/CSS3 [機能実装のためのJavaScript] Web Storage 4 オリジン(プロトコル://ドメイン名:ポート番 号)単位で保存 4 cookieよりも容量が大きい 4 有効期限の設定なし 4 保存できるのはテキストだけ 詳細はcaniuseで確認 © Coding Design, 2015 57
  58. 58. HTML5アプリ実装サンプル http://cdpn.io/e/xGYZRG © Coding Design, 2015 58
  59. 59. http://cdpn.io/e/xGYZRG 特・餃子 ... クドくてすみません。 © Coding Design, 2015 59
  60. 60. まとめ © Coding Design, 2015 60
  61. 61. HTML5はアプリ開発を 意識した言語! © Coding Design, 2015 61
  62. 62. 3言語覚えるのは めんどうだけど © Coding Design, 2015 62
  63. 63. HTML5で機能が増えていく とっても面白い時期! © Coding Design, 2015 63
  64. 64. 手を動かして 楽しみましょう! © Coding Design, 2015 64
  65. 65. Enjoy HTML5! © Coding Design, 2015 65
  66. 66. ご清聴ありがとう ございましたッッ! © Coding Design, 2015 66

×