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