CSS Nite in Matsuyama vol.1 - session 4

いますぐはじめる！
スマートフォンサイト
サイボウズ株式会社松山開発部
矢野ありす

自己紹介

サイボウズ株式会社松山開発部所属
Office 9やメールワイズなどの開発に従事

カスタムアプリの
スマホビュー

自己紹介

サイボウズ株式会社松山開発部所属
Office 9やメールワイズなどの開発に従事

メールワイズ on cybozu.com
(画像は開発中のものです)

アジェンダ

はじめに
スマートフォンの台頭
スマートフォンと HTML5 & CSS3
スマートフォンサイトを作る
下準備について
HTML5を使ったタグ組み
CSS3を使った装飾

はじめに

スマートフォンが台頭してきている
所有率が1年で16%増加

スマートフォン所有率
(ディーツーコミュニケーションズ調べ)
http://www.d2c.co.jp/news/2012/20120418-1340.html

はじめに

スマートフォンが台頭してきている
出荷台数は2012年で70％に迫る勢い
契約数は2015年までに半数に達するとの予想

スマートフォン契約数の推移・予測
(MM総研調べ)
http://www.m2ri.jp/newsreleases/mai
n.php?id=010120120313500

はじめに

スマートフォンユーザーは
これからも増えていく

はじめに

スマートフォンを使って何をするのか？

端末でよく使う機能の割合
(DAC 調べ)
http://www.dac.co.jp/Contents/pdf
/press/2011_sd_research.pdf

はじめに

Webサイトのスマートフォン対応は急務

はじめに

日本国内におけるスマートフォン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

はじめに

標準ブラウザが
ほぼHTML5＆CSS3に対応

※対応状況
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HT
ML_5)
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Ca
scading_Style_Sheets)


一覧画面
例）ブログやニュースのトップページ

ヘッダー

ナビ

コンテンツ

フッター


DOCTYPE宣言 HTML5

文字エンコーディングの指定 HTML5

viewportの指定スマートフォン


DOCTYPE宣言 HTML5

文書がどの仕様に従って書かれているか
before

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN">

after

<!DOCTYPE html>


文字コードの指定 HTML5

文書の文字コードをブラウザに知らせる
before

<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">

after

<meta charset="utf-8">



<!DOCTYPE html>
ウィンドウサイズ(横)を
<html lang="ja"> デバイスの横サイズにする
<head>
<meta name="viewport" content="width=device-
width, initial-scale=1, minimum-scale=1,
maximum-scale=1">
</head>
<body></body>
</html>



<!DOCTYPE html>
<html lang="ja"> 倍率の初期値を指定
<head>
maximum-scale=1">
</head>
<body></body>
</html>



<!DOCTYPE html>
<html lang="ja"> 倍率の最小値を指定
<head>
maximum-scale=1">
</head>
<body></body>
</html>



<!DOCTYPE html>
<html lang="ja"> 倍率の最大値を指定
<head>
maximum-scale=1">
</head>
<body></body>
</html>


一覧画面
ヘッダー
ナビゲーション
検索ボックス
入力エリア
プレースホルダ
コンテンツ
タイトル
要約部
フッター未装飾状態の画面
http://jsdo.it/alice1551/aHGn


ヘッダー＆ナビゲーション
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>


検索ボックス(入力エリア)
before
<input type="text"
name="SearchText" value="文字
を入力してください">
<input type="submit">

after
<input type="search"
name="SearchText"
placeholder="文字を入力してください
">


検索ボックス(プレースホルダ)
<input type="search" name="SearchText"
placeholder="文字を入力してください">

挙動例）
初期表示では文字は薄灰色
要素にフォーカスが当たるとクリア
ユーザーが入力した文字は黒
文字が入力されなければ初期表示に戻る
submit したときには初期表示文字列では検索されない


検索ボックス(プレースホルダ)
placeholder属性を使わずに同じことをするには
CSSとJavaScriptを使う

<!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)">
</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>

<!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)">
</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>
HTML5
function 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>


コンテンツ
before after

<div class="section"> <section>
<h2>タイトル</h2> <h2>タイトル</h2>
<div class="article"> <article>
要約部要約部
</div> </article>
</div> </section>


フッター
before after

<div id="footer"> <footer>
Footer Footer
</div> </footer>


一覧画面
ヘッダー
ナビゲーション
検索ボックス
入力エリア
プレースホルダ
コンテンツ
タイトル
要約部
フッター装飾後の画面
http://jsdo.it/alice1551/vG8J


ヘッダー装飾のための余分な
要素や画像が必要
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


コンテンツ
角丸

li:first-child {
border-top-left-radius: 5px;
border-top-right-radius:
5px;
}
下側も同様に「li:last-child」(CSS3で追加された
疑似クラス)で装飾

border-radius を使わずに同じことをするには、
テーブルでレイアウトして四隅に角丸の画像を配
置してボックスサイズを調整する、など


コンテンツ
グラデーション
li {
background-image: -webkit-
linear-gradient(bottom,
rgb(237,237,237) 6%,
rgb(240,240,240) 27%,
rgb(252,252,252) 78%);
}

gradient を使わずに同じことをするには、グラ
デ画像を背景に指定する、など


コンテンツ
Web Fonts でアイコン
<link rel="stylesheet" type="text/css"
href="http://fonts.googleapis.com/css?family=Ca
bin+Sketch:700">
Google Web Fonts を使用

section:before {
content: "#";
font-size: 25px;
display: block;
position: absolute;
top: 3px;
left: 5px;
font-family: 'Cabin Sketch', cursive;
}

同じことをするにはアイコン画像を用意


コンテンツ
横幅に合わせて省略表示
section article {
min-width: device-width;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

同じことをするには要素を重ねて「...」の部分を
表示し省略されているように見せる、とか、
Javascript で固定文字数で切って表示する、
など

まとめ

Webサイトのスマートフォン対応は急務
スマートフォンの標準ブラウザはほぼHTML5＆
CSS3に対応
いまから作り始めるならHTML5＆CSS3を使う
とよい
手間が少なくてすむ、かも

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

CSS Nite in Matsuyama vol.1 - session 4

More Related Content

What's hot

Viewers also liked

Similar to CSS Nite in Matsuyama vol.1 - session 4

CSS Nite in Matsuyama vol.1 - session 4