スマートフォン向け...
TRANSCRIPT
![Page 1: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/1.jpg)
益子 貴寛2013年5月25日 土曜日ベルサール九段
ましこ たかひろ
スマートフォン向けサイト制作の基本
CSS Nite LP, Disk 27
スマートフォン対応サイト制作(3)
![Page 2: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/2.jpg)
益子 貴寛株式会社サイバーガーデン
ましこ たかひろ
![Page 3: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/3.jpg)
このセッションの内容
かんたんな確認ツール
viewport など HTML の設定
CSS メディアクエリ
Fluid Images
CSS レイアウトの基本
HTML5 フォーム
脱ビットマップ画像の時代に
![Page 4: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/4.jpg)
CSS Nite in SAPPOROhttp://cssnite-sapporo.jp/
![Page 5: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/5.jpg)
CSS Nite in SAPPOROhttp://cssnite-sapporo.jp/
768px
![Page 6: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/6.jpg)
768px
CSS Nite in SAPPOROhttp://cssnite-sapporo.jp/
320px
![Page 7: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/7.jpg)
かんたんな確認ツール
![Page 8: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/8.jpg)
Firefox のデフォルト機能レスポンシブデザインビュー
![Page 9: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/9.jpg)
なお、デバイスの幅ではなく表示領域の幅に応じた
レスポンシブWebデザイン であれば
ブラウザのウィンドウ幅をせばめればOK
![Page 10: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/10.jpg)
Adobe Edge Inspecthttp://html.adobe.com/edge/inspect/
マシンの画面とスマートフォンの画面を同期
![Page 11: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/11.jpg)
各種シミュレータの利用
Xcode/iOSシミュレータhttps://itunes.apple.com/jp/app/xcode/id497799835?mt=12
![Page 12: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/12.jpg)
viewport など HTML の設定
![Page 13: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/13.jpg)
viewport
<meta name="viewport"content="width=device-width, initial-scale=1" />
デバイスの幅に応じて 初期の大きさは等倍(1倍)で
iPhoneでは幅 980px
iPhoneでは幅 320px
![Page 14: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/14.jpg)
ほか
<link rel="apple-touch-icon"href="shared/img/icon114x114.png" />
<meta name="format-detection" content="telephone=no, address=no, email=no" />
![Page 15: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/15.jpg)
レスポンシブWebデザインを前提にした
CSSメディアクエリの設定
![Page 16: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/16.jpg)
CSSメディアクエリ
@media only screen and (max-width: 768px) {
...スマートフォン向けのスタイル...
}
ブレークポイント
ブレークポイントは 768px が一般的
max-width と指定することで、表示領域の幅で切り替え(max-device-width と指定すると、デバイスの幅で切り替え)
![Page 17: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/17.jpg)
768px <
< 769px
![Page 18: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/18.jpg)
Fluid Images
![Page 19: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/19.jpg)
Fluid Images
img { max-width: 100%; height: auto; line-height: 0;}
表示領域の幅に応じて画像を自動的に縮小
![Page 20: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/20.jpg)
縮小前と縮小後
はみ出し
![Page 21: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/21.jpg)
スマートフォンサイトのための
CSSレイアウトの基本
![Page 22: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/22.jpg)
ボックスを "width: auto" に
#header-inner,#global-nav ul,#lead,#wrapper,#main,#main .highlight,#side { width: auto;}
ボックスをリキッド(流動的)に
![Page 23: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/23.jpg)
ボックスを "float: none" に
#main { float: none; ...}
#side { float: none; ...}
フロートを解除してリニア(線形的)なレイアウトに
![Page 24: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/24.jpg)
#page-footer ul,body#category #lead,#main h1 + p { display: none;}
不要な UI を "display: none" で消す
![Page 25: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/25.jpg)
.smartphone-ui { display: none; /* hide* /}
@media only screen and (max-width: 768px) { .desktop-ui { display: none; /* hide * / } .smartphone-ui { display: block; /* show* / }}
もし UI をゴソッと変更するなら
![Page 26: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/26.jpg)
CSS3セレクタの積極利用
#global-nav ul li a { width: 33.3%;}#global-nav ul li:nth-child(4) a,#global-nav ul li:nth-child(5) a { width: 50%;}
![Page 27: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/27.jpg)
text-shadowbox-shadowborder-radiuslinear-gradient()transform
CSS3プロパティの積極利用
![Page 28: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/28.jpg)
ほか
/* デバイスの向きによってテキストの大きさを変えない */
body { -webkit-text-size-adjust: 100%;}
/* タップ時のハイライトカラー */
a { -webkit-tap-highlight-color: rgba(204, 0, 0, 0.5);}
![Page 29: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/29.jpg)
アドレスバーを自動的に隠す
<script>setTimeout(function(){ window.scrollTo(0, 1);}, 1000);</script>
![Page 30: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/30.jpg)
HTML5 フォーム
![Page 32: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/32.jpg)
脱ビットマップ画像の時代に
![Page 33: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/33.jpg)
ビットマップ画像の弱点
デバイスの表示領域の多様化
Retina Display
ズーム操作によって、ぼやける
GIF、JPEG、PNG など
![Page 34: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/34.jpg)
ベクター表現の代表例
CSS3によるエフェクト
フォント
SVG
![Page 35: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/35.jpg)
PNG CSS3とフォント
![Page 36: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/36.jpg)
PNG SVG
![Page 37: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/37.jpg)
SVG のサポート状況
Internet Explorer 9+
Firefox 3.0+
Google Chrome 4.0+
Safari 3.2+
Opera 9.0+
iOS Safari 3.2+
Android Browser 3.0+
![Page 38: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/38.jpg)
SVG の埋め込み例
<a href="http://cybergarden.jp/"><img alt="..."src="images/logo.svg"type="image/svg+xml"width="240" height="46" />
</a>
Adobe Illustrator などが SVG 書き出しに対応
![Page 39: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/39.jpg)
まとめ
![Page 40: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/40.jpg)
スマートフォン対応は
レイアウトがシンプルなサイトはそれほどむずかしくない
(これまでのCSSの知識だけで対応できる)
むずかしい話や深く考えるべきポイントはこのあとのセッションで
![Page 41: スマートフォン向け サイト制作の基本cssnite.jp/lp/lp27/CSSNiteLP27-s3-mashiko.pdf · 益子 貴寛 2013年5月25日 土曜日 ベルサール九段 ましこ たかひろ](https://reader034.vdocuments.pub/reader034/viewer/2022042208/5eabfe7986ce123e03430fe9/html5/thumbnails/41.jpg)
ありがとうございました
cybergarden
takahiromashiko