入門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 3

自己紹介(1/3)

4 名前森　史憲（もり　ふみのり）

4 生年月日昭和51年6月9日

4 出身・現住所鹿児島県鹿児島市

4 容姿丸メガネ


自己紹介(2/3)

4 Webサイト制作4 Web関連技術講師4 Web関連書籍執筆4 イベント運営


自己紹介(3/3)

4 カレーLOVE!!⭐カレー屋匠#匠盛

4 ビールLOVE!!⭐城山観光ホテル#スタウトエール黒糖

4 チョコレートLOVE!!⭐パティスリーヤナギムラ#薩摩チョコチップス


入門HTML5/CSS3


入門HTML5/CSS3HTML5そもそも話


入門HTML5/CSS3

HTML5そもそも話4 HTML5は「アプリ開発」を意図した言語と言われてます


入門HTML5/CSS3

HTML5そもそも話4 HTML5は「アプリ開発」を意図した言語と言われてます

アプリで使う言語…


iOSアプリObjective-C,Swift


Androidアプリ

Java© Coding Design, 2015 12

HTML5アプリHTMLCSS

JavaScript© Coding Design, 2015 13

iOSアプリ　　: 1言語Androidアプリ : 1言語HTML5アプリ: 3言語


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 入力値を保存できる


入門HTML5/CSS3

骨組みとしてのHTML5


入門HTML5/CSS3 [骨組みとしてのHTML5]

セクションと見出し4 文書全体の構造を作る（章、節みたいな）4 HTML4: 見出しで構造を作る4 HTML5: セクション or 見出しで構造を作る


HTML4, HTML5:<h1>入門HTML5/CSS3</h1>

<h2>骨組みとしてのHTML5</h2>

<h3>セクションと見出し</h3>


HTML5:<section> <h1>入門HTML5/CSS3</h1>

<section> <h2>骨組みとしてのHTML5</h2>

<section> <h3>セクションと見出し</h3>

</section> </section></section>



セクションと見出しセクションを作る要素は4つarticle, aside, nav, section

4 blockquote, body, fieldset, figure, td要素はセクショニングルート（根っこ）をつくる特殊な要素



セクションと見出し4 article:　ページ内の主題を扱う4 aside:　主題に関連する話題を扱う4 nav:　主なリンクの集まり4 section:　汎用セクション



[特殊な性質]セクションごとにh1要素からはじめてOK4 見出しはすべてh1要素？4 SEO的に1ページにh1要素は1つだけがよい？


見出しはすべてh1要素？

すべてh1要素は変。


SEO的に1ページにh1要素は1つだけがよい？

筋の通ってるマークアップならh1が複数でもOK


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


4 article, nav, asideなど意味的セクション　　セクション要素を使う＆h1要素から始める4 ブログ投稿等WYSIWYGで編集するセクション　　外枠だけセクション要素を使ってh1-h2-h3


h1要素の利用は複数でもOKただ、意味がおかしくならない範囲で


HTML5アプリ実装サンプルhttp://cdpn.io/e/xGYZRGCodePenというオンラインエディタを使います


http://cdpn.io/e/xGYZRG

http://cdpn.io/e/xGYZRGextra GYoZa Rice is God.特・餃子ライスは神。



入門HTML5/CSS3

よいユーザー体験のためのCSS3


入門HTML5/CSS3 [よいユーザー体験のためのCSS3]

box-sizingボックスモデルの変更box-sizing: border-box; /* 幅と高さにborder, paddingを含める */

box-sizing: content-box; /* 幅と高さにborder, paddingを含めない */

box-sizing: inherit; /* 親要素を継承 */

詳細はcaniuseで確認


http://caniuse.com/#feat=css3-boxsizing




デフォルトはcontent-box



ボーダーも含めて、幅100px、高さ100px



calc()異なる単位の計算をすることができるheight: calc(100% - 50px);



http://caniuse.com/#feat=calc




calc()



box-shadowボックスの外側・内側に影を入れる。カンマ(,)区切りで複数指定可能。box-shadow: 0 0 5px 0 #000 inset;/* x軸 y軸ぼかし広がり色 (inset) */



http://caniuse.com/#feat=css-boxshadow




box-shadow


HTML5アプリ実装サンプルhttp://cdpn.io/e/xGYZRG



http://cdpn.io/e/xGYZRG特・餃子ライス ...　　　



入門HTML5/CSS3

機能実装のためのJavaScript


入門HTML5/CSS3 [機能実装のためのJavaScript]

Web Storage4 キー＆値のセットでブラウザに保存する4 2種類ある4 localStorage（スクリプトで削除しない限り消えない）

4 sessionStorage（ウインドウを閉じたら消える）



Web Storage使い方localStorage.setItem("key","value"); // 保存localStorage.getItem("key"); // 参照localStorage.removeItem("key"); // 削除localStorage.clear(); // 全部削除



Web Storage4 オリジン（プロトコル://ドメイン名:ポート番号）単位で保存

4 cookieよりも容量が大きい4 有効期限の設定なし4 保存できるのはテキストだけ詳細はcaniuseで確認© Coding Design, 2015 57

http://caniuse.com/#feat=namevalue-storage



HTML5アプリ実装サンプルhttp://cdpn.io/e/xGYZRG



http://cdpn.io/e/xGYZRG特・餃子 ... クドくてすみません。



まとめ© Coding Design, 2015 60

HTML5はアプリ開発を意識した言語！


3言語覚えるのはめんどうだけど


HTML5で機能が増えていくとっても面白い時期！


手を動かして楽しみましょう！


Enjoy HTML5!


ご清聴ありがとうございましたッッ！


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

Technology