CSS Nite in Matsuyama vol.1 - session 4

1,492 views

Published on

CSS Nite in Matsuyama vol.1 - session 4
http://cssnite-matsuyama.com/vol01/profile/#yano

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,492
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

CSS Nite in Matsuyama vol.1 - session 4

  1. 1. いますぐはじめる!スマートフォンサイト サイボウズ株式会社 松山開発部 矢野 ありす
  2. 2. 自己紹介サイボウズ株式会社 松山開発部 所属Office 9やメールワイズなどの開発に従事 カスタムアプリの スマホビュー
  3. 3. 自己紹介サイボウズ株式会社 松山開発部 所属Office 9やメールワイズなどの開発に従事 メールワイズ on cybozu.com (画像は開発中のものです)
  4. 4. アジェンダはじめにスマートフォンの台頭スマートフォンと HTML5 & CSS3スマートフォンサイトを作る下準備についてHTML5を使ったタグ組みCSS3を使った装飾
  5. 5. はじめにスマートフォンが台頭してきている所有率が1年で16%増加 スマートフォン所有率 (ディーツー コミュニケーションズ 調べ) http://www.d2c.co.jp/news/2012/20120418-1340.html
  6. 6. はじめにスマートフォンが台頭してきている出荷台数は2012年で70%に迫る勢い契約数は2015年までに半数に達するとの予想 スマートフォン契約数の推移・予測 (MM総研 調べ) http://www.m2ri.jp/newsreleases/mai n.php?id=010120120313500
  7. 7. はじめにスマートフォンユーザーは これからも増えていく
  8. 8. はじめにスマートフォンを使って何をするのか? 端末でよく使う機能の割合 (DAC 調べ) http://www.dac.co.jp/Contents/pdf /press/2011_sd_research.pdf
  9. 9. はじめにWebサイトのスマートフォン対応は急務
  10. 10. はじめに日本国内におけるスマートフォンOS スマートフォンOS別シェア (コムスコア 調べ) http://www.comscore.com/Press_Events /Press_Releases/2012/4/1_in_5_Mobile_ Phone_Users_in_Japan_Now_Owns_a_S martphone
  11. 11. はじめに 標準ブラウザが ほぼHTML5&CSS3に対応※対応状況http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
  12. 12. スマートフォンサイトを作る一覧画面例)ブログやニュースのトップページ ヘッダー ナビ コンテンツ フッター
  13. 13. スマートフォンサイトを作る下準備についてDOCTYPE宣言 HTML5文字エンコーディングの指定 HTML5viewportの指定 スマートフォン
  14. 14. 下準備について DOCTYPE宣言 HTML5 文書がどの仕様に従って書かれているかbefore <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">after <!DOCTYPE html>
  15. 15. 下準備について 文字コードの指定 HTML5 文書の文字コードをブラウザに知らせるbefore <meta http-equiv="Content-Type" content="text/html; charset=utf-8">after <meta charset="utf-8">
  16. 16. 下準備についてviewportの指定 スマートフォン <!DOCTYPE html> ウィンドウサイズ(横)を <html lang="ja"> デバイスの横サイズにする <head> <meta charset="utf-8"> <meta name="viewport" content="width=device- width, initial-scale=1, minimum-scale=1, maximum-scale=1"> </head> <body></body> </html>
  17. 17. 下準備についてviewportの指定 スマートフォン <!DOCTYPE html> <html lang="ja"> 倍率の初期値を指定 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device- width, initial-scale=1, minimum-scale=1, maximum-scale=1"> </head> <body></body> </html>
  18. 18. 下準備についてviewportの指定 スマートフォン <!DOCTYPE html> <html lang="ja"> 倍率の最小値を指定 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device- width, initial-scale=1, minimum-scale=1, maximum-scale=1"> </head> <body></body> </html>
  19. 19. 下準備についてviewportの指定 スマートフォン <!DOCTYPE html> <html lang="ja"> 倍率の最大値を指定 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device- width, initial-scale=1, minimum-scale=1, maximum-scale=1"> </head> <body></body> </html>
  20. 20. HTML5を使ったタグ組み一覧画面ヘッダーナビゲーション検索ボックス 入力エリア プレースホルダコンテンツ タイトル 要約部フッター 未装飾状態の画面 http://jsdo.it/alice1551/aHGn
  21. 21. HTML5を使ったタグ組み一覧画面ヘッダーナビゲーション検索ボックス 入力エリア プレースホルダコンテンツ タイトル 要約部フッター 未装飾状態の画面 http://jsdo.it/alice1551/aHGn
  22. 22. HTML5を使ったタグ組みヘッダー&ナビゲーションbefore after<div id="header"> <header> <h1>Header</h1> <h1>Header</h1> <div id=“nav”> <nav> <ul> <ul> <li>nav1</li> <li>nav1</li> <li>nav2</li> <li>nav2</li> </ul> </ul> </div> </nav></div> </header>
  23. 23. HTML5を使ったタグ組み一覧画面ヘッダーナビゲーション検索ボックス 入力エリア プレースホルダコンテンツ タイトル 要約部フッター 未装飾状態の画面 http://jsdo.it/alice1551/aHGn
  24. 24. HTML5を使ったタグ組み 検索ボックス(入力エリア)before <input type="text" name="SearchText" value="文字 を入力してください"> <input type="submit">after <input type="search" name="SearchText" placeholder="文字を入力してください ">
  25. 25. HTML5を使ったタグ組み検索ボックス(プレースホルダ) <input type="search" name="SearchText" placeholder="文字を入力してください">挙動例) 初期表示では文字は薄灰色 要素にフォーカスが当たるとクリア ユーザーが入力した文字は黒 文字が入力されなければ初期表示に戻る submit したときには初期表示文字列では検索されない
  26. 26. HTML5を使ったタグ組み検索ボックス(プレースホルダ)placeholder属性を使わずに同じことをするにはCSSとJavaScriptを使う
  27. 27. HTML5を使ったタグ組み<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> before<head> http://jsdo.it/alice1551/ntub<meta http-equiv="Content-Language" content="ja"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>placeholder demo</title><style type="text/css">.default { color: #999; }.entry { color: #000; }</style></head><body><form onsubmit="return PreSubmit()"><input type="text" name="SearchText" value="文字を入力してください" class="default" onfocus="OnFocus(this)"onblur="OnBlur(this)" onkeypress="OnKeyPress(this)"><input type="submit"></form><script type="text/javascript">var g_default = "文字を入力してください";var g_state = false;function OnFocus(el) { el.value = ; }function OnBlur(el) { if( el.value == ) { g_state = false; } if( ! g_state ) { el.value = g_default; el.className = "default"; }}function OnKeyPress(el) { g_state = true; el.className = "entry";}function PreSubmit() { if( ! g_state ) { return false; } return true;}</script></body></html>
  28. 28. HTML5を使ったタグ組み<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> before<head> http://jsdo.it/alice1551/ntub<meta http-equiv="Content-Language" content="ja"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>placeholder demo</title><style type="text/css">.default { color: #999; }.entry { color: #000; }</style></head><body><form onsubmit="return PreSubmit()"><input type="text" name="SearchText" value="文字を入力してください" class="default" onfocus="OnFocus(this)"onblur="OnBlur(this)" onkeypress="OnKeyPress(this)"><input type="submit"></form><script type="text/javascript">var g_default = "文字を入力してください";var g_state = false;function OnFocus(el) { el.value = ; }function OnBlur(el) { if( el.value == ) { g_state = false; } if( ! g_state ) { el.value = g_default; el.className = "default"; }}function OnKeyPress(el) { g_state = true; el.className = "entry";}function PreSubmit() { if( ! g_state ) { return false; } return true;}</script></body></html>
  29. 29. HTML5を使ったタグ組み<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> before<head> http://jsdo.it/alice1551/ntub<meta http-equiv="Content-Language" content="ja"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>placeholder demo</title><style type="text/css">.default { color: #999; }.entry { color: #000; }</style></head><body><form onsubmit="return PreSubmit()"><input type="text" name="SearchText" value="文字を入力してください" class="default" onfocus="OnFocus(this)"onblur="OnBlur(this)" onkeypress="OnKeyPress(this)"><input type="submit"></form><script type="text/javascript">var g_default = "文字を入力してください";var g_state = false;function OnFocus(el) { el.value = ; }function OnBlur(el) { after if( el.value == ) { g_state = false; } if( ! g_state ) { <!DOCTYPE html> el.value = g_default; <html lang="ja"> el.className = "default"; <head> } <meta charset="utf-8">} <title>placeholder demo</title> </head> HTML5function OnKeyPress(el) { g_state = true; <body> <form> なら! el.className = "entry";} <input type="search" name="SearchText"function PreSubmit() { placeholder="文字を入力してください"> if( ! g_state ) { return false; } </form> return true; </body>} </html></script></body></html>
  30. 30. HTML5を使ったタグ組み一覧画面ヘッダーナビゲーション検索ボックス 入力エリア プレースホルダコンテンツ タイトル 要約部フッター 未装飾状態の画面 http://jsdo.it/alice1551/aHGn
  31. 31. HTML5を使ったタグ組みコンテンツbefore after<div class="section"> <section><h2>タイトル</h2> <h2>タイトル</h2><div class="article"> <article>要約部 要約部</div> </article></div> </section>
  32. 32. HTML5を使ったタグ組み一覧画面ヘッダーナビゲーション検索ボックス 入力エリア プレースホルダコンテンツ タイトル 要約部フッター 未装飾状態の画面 http://jsdo.it/alice1551/aHGn
  33. 33. HTML5を使ったタグ組みフッターbefore after<div id="footer"> <footer>Footer Footer</div> </footer>
  34. 34. CSS3を使った装飾一覧画面ヘッダーナビゲーション検索ボックス 入力エリア プレースホルダコンテンツ タイトル 要約部フッター 装飾後の画面 http://jsdo.it/alice1551/vG8J
  35. 35. CSS3を使った装飾 ヘッダー 装飾のための余分な 要素や画像が必要before after <div id="header-wrapper"> <header> <div id="header"> <h1>Header</h1> <h1>Header</h1> </header> </div> </div> #header-wrapper { header padding-bottom: 5px; { background: box-shadow: 0 0 5px #333; url(shadow.png) repeat-x left } bottom; }http://jsdo.it/alice1551/lF9L
  36. 36. CSS3を使った装飾一覧画面ヘッダーナビゲーション検索ボックス 入力エリア プレースホルダコンテンツ タイトル 要約部フッター 装飾後の画面 http://jsdo.it/alice1551/vG8J
  37. 37. CSS3を使った装飾コンテンツ 角丸li:first-child { border-top-left-radius: 5px; border-top-right-radius:5px;}下側も同様に「li:last-child」(CSS3で追加された疑似クラス)で装飾 border-radius を使わずに同じことをするには、 テーブルでレイアウトして四隅に角丸の画像を配 置してボックスサイズを調整する、など
  38. 38. CSS3を使った装飾コンテンツ グラデーションli {background-image: -webkit-linear-gradient(bottom,rgb(237,237,237) 6%,rgb(240,240,240) 27%,rgb(252,252,252) 78%);} gradient を使わずに同じことをするには、グラ デ画像を背景に指定する、など
  39. 39. CSS3を使った装飾コンテンツ Web Fonts でアイコン<link rel="stylesheet" type="text/css"href="http://fonts.googleapis.com/css?family=Cabin+Sketch:700">Google Web Fonts を使用section:before { content: "#"; font-size: 25px; display: block; position: absolute; top: 3px; left: 5px; font-family: Cabin Sketch, cursive;} 同じことをするにはアイコン画像を用意
  40. 40. CSS3を使った装飾コンテンツ 横幅に合わせて省略表示section article { min-width: device-width; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 同じことをするには要素を重ねて「...」の部分を 表示し省略されているように見せる、とか、 Javascript で固定文字数で切って表示する、 など
  41. 41. まとめWebサイトのスマートフォン対応は急務スマートフォンの標準ブラウザはほぼHTML5&CSS3に対応いまから作り始めるならHTML5&CSS3を使うとよい手間が少なくてすむ、かも
  42. 42. ご清聴ありがとうございました

×