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