鷹野雅弘(スイッチ)
虫の目近いところで、複眼をつかってさまざまな角度から注意深く見る
鳥の目高いところから俯瞰(ふかん)する目のこと
魚の目水の流れや潮の満ち干、つまり、世の中の流れを敏感に感じる目
2004-2006年
テーブルレイアウト
2004-2006年
テーブルレイアウト
CSSレイアウト(Web標準)
Quiz
自宅に固定電話やインターネット回線を引かない
若年層
タブレット
LOVE!!
シニア
インターネットにアクセスする端末としてのPCの比率が下がるのは必至
2012年4月 スティーブン・シノフスキー氏(Windows 8開発責任者)
マルチデバイス/タッチデバイス対応
CSS3
FluidPE
RWD
CPP
スマートフォン、どのように持って使いますか?
Quiz
片手で持つには大きい
1. 左手で持って、左親指で操作2. 左手で持って、右手の指で操作3. 両手で持って、両親指で操作4. それ以外(タッチペンとか)
スマートフォン、どのように持って使いますか?
1. 左手で持って、左親指で操作2. 左手で持って、右手の指で操作3. 両手で持って、両親指で操作4. それ以外(タッチペンとか)
あなたのサイト/アプリを使うユーザーは?
スマートフォン、どのように持って使いますか?
このワークショップのスタディ
自分流の使い方がすべてではない 持ち方によって、見えにくいところ、
タッチしにくい(届かない)領域が存在する 実機検証が大切!
CSS3
#btn {! display:block;! width:300px;! font-size:28px;! font-weight:bold;! text-align:center;! line-height:2em;! height:2em;! text-decoration:none;! border:1px solid #225588;! color:#ffffff;! background:#337fcc;! border-radius:5px;! text-shadow:0 -2px 0px #225588, 0 -2px 0px #225588;background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));! background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));! box-shadow:1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;}#btn:hover {! background:-moz-linear-gradient(rgba(34,85,136,0.4), rgba(34,85,136,0.9));20 background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.4)), to(rgba(119,170,221,0.9)));}
Internet Explorer対応、どうするの??
1月
2005 2006 2007
5月
4月
4月
2004
11月
2003
6月
2002
9月
2001
11月
8.06月
9.010月
9.6
2.010月
3.0
8.010月
9.0
1.011月
1.5 10月
2.0
1.0
1月
7.0
0.1
8月
7.0 7.1 7.2 8.1
6月 1月
[開発終了][配布終了]
[公式サポート終了]
5.2
6.0
8月
6.1
6月
6.011月
12月
5.1
(Phoenix) (Firebird)
7.0
2008
3月
3.1
3月
3月
8.0β11月
9.0β
6月3.0
2009
3月
4.0
3月
8.03月
9.0
3月
4.012月
9.03月
/11.01月
3.6/4.0β7月6月
3.5
2010
6月
5.07月
5.1
9月
10.012月
11.012月
11.6
2011 2012
12月
1.03月
2.0/3.010月 12月
7.0/8.02月 12月
9.0/16.0
Internet Explorer (Mac)
3.0まではMacのみ
Firefox
Netscape
Opera
Safari
Internet Explorer (Win)
Google Chrome
日本語版は延期
1月
2005 2006 2007
5月
4月
4月
2004
11月
2003
6月
2002
9月
2001
11月
8.06月
9.010月
9.6
2.010月
3.0
8.010月
9.0
1.011月
1.5 10月
2.0
1.0
1月
7.0
0.1
8月
7.0 7.1 7.2 8.1
6月 1月
[開発終了][配布終了]
[公式サポート終了]
5.2
6.0
8月
6.1
6月
6.011月
12月
5.1
(Phoenix) (Firebird)
7.0
2008
3月
3.1
3月
3月
8.0β11月
9.0β
6月3.0
2009
3月
4.0
3月
8.03月
9.0
3月
4.012月
9.03月
/11.01月
3.6/4.0β7月6月
3.5
2010
6月
5.07月
5.1
9月
10.012月
11.012月
11.6
2011 2012
12月
1.03月
2.0/3.010月 12月
7.0/8.02月 12月
9.0/16.0
Internet Explorer (Mac)
3.0まではMacのみ
Firefox
Netscape
Opera
Safari
Internet Explorer (Win)
Google Chrome
日本語版は延期
1月
2005 2006 2007
5月
4月
4月
2004
11月
2003
6月
2002
9月
2001
11月
8.06月
9.010月
9.6
2.010月
3.0
8.010月
9.0
1.011月
1.5 10月
2.0
1.0
1月
7.0
0.1
8月
7.0 7.1 7.2 8.1
6月 1月
[開発終了][配布終了]
[公式サポート終了]
5.2
6.0
8月
6.1
6月
6.011月
12月
5.1
(Phoenix) (Firebird)
7.0
2008
3月
3.1
3月
3月
8.0β11月
9.0β
6月3.0
2009
3月
4.0
3月
8.03月
9.0
3月
4.012月
9.03月
/11.01月
3.6/4.0β7月6月
3.5
2010
6月
5.07月
5.1
9月
10.012月
11.012月
11.6
2011 2012
12月
1.03月
2.0/3.010月 12月
7.0/8.02月 12月
9.0/16.0
Internet Explorer (Mac)
3.0まではMacのみ
Firefox
Netscape
Opera
Safari
Internet Explorer (Win)
Google Chrome
日本語版は延期
Samsung GalaxyS IV
Nexus 7
Samsung GalaxyNote II
Nexus 4
HTC One
画像: 親要素に対してのパーセント指定
div.wrapper { width: 940px;}
div.wrapper { width: 940px;}
div.wrapper { width: 90%;}
div.wrapper { width: 90%;}
18px940px
.main_column
690px.sub_column
217px
18px940px
.main_column
690px.sub_column
217px
1.875%90-95%
.main_column
74.53%.sub_column
23.5937%
img { max-width: 100%; height: auto;}
画像: 親要素に対してのパーセント指定
画像: 親要素に対してのパーセント指定
メディアクエリー: デバイスの幅に応じて、CSSを調整
• A flexible grid (リキッド・レイアウト)• Flexible images (画像:可変)• Media Queries (メディアクエリー)
• A flexible grid (リキッド・レイアウト)• Flexible images (画像:可変)• Media Queries (メディアクエリー)
.main-column
.sub-column
.sub-column
.main-column
.column2-left .column2-right
.main-column
.sub-column
.column2-right
.main-column
.column2-left
.main-column
.sub-column
.sub-column
.main-column
.column2-left .column2-right
.main-column
.sub-column
.sub-column
.main-column
.column2-left .column2-right
float: right;
.main-column
.sub-column
.column2-right
.main-column
.column2-left
float: none;
.main-column
.sub-column
.column2-right
.main-column
.column2-left
.sub-column
.main-column
.sub-column
.column2-right
.main-column
.column2-left
.main-column
.sub-column
.column2-right
.main-column
.column2-left
.sub-column
display: none;
メディアクエリー
.main-column
.sub-column
.sub-column
.main-column
.column2-left .column2-right
.main-column
.sub-column
.column2-right
.main-column
.column2-left
.main-column
.column2-right
.main-column
768px 320px
.main-column
.sub-column
.sub-column
.main-column
.column2-left .column2-right
.main-column
.sub-column
.column2-right
.main-column
.column2-left
.main-column
.column2-right
.main-column
768px 320px
phone.css
CSS
tablet.css
CSS
pc.css
CSS
.main-column
.sub-column
.sub-column
.main-column
.column2-left .column2-right
.main-column
.sub-column
.column2-right
.main-column
.column2-left
.main-column
.column2-right
.main-column
768px 320px
phone.css
CSS
tablet.css
CSS
pc.css
CSS
<link href="cs/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" />
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" />
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" />
phone.css
CSS
tablet.css
CSS
pc.css
CSS
<link href="cs/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" />
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" />
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" />
min-width max-width
768px 320px
Quiz
サービス 会社概要 サポート お問い合わせ
サービス 会社概要 サポート お問い合わせ
サービス 会社概要 サポート お問い合わせ
サービス
会社概要サポート
お問い合わせ
サービス
会社概要サポート
お問い合わせ
サービス
会社概要サポート
お問い合わせ
Quiz
.navigation { color: $blue;}
.border { color: $blue;}
.navigation { color: #3bbfce;}
.border { color: #3bbfce;}
$blue: #3bbfce;
.navigation { color: #3bbfce;}
.border { color: #3bbfce;}
.navigation { color: $blue;}
.border { color: $blue;}
$blue: #3bbfce;
まとめ
ありがとうございました。