k ú m Â µ ¿ ½ · 魚の目...

鷹野雅弘（スイッチ）

虫の目近いところで、複眼をつかってさまざまな角度から注意深く見る

鳥の目高いところから俯瞰（ふかん）する目のこと

魚の目水の流れや潮の満ち干、つまり、世の中の流れを敏感に感じる目

2004-2006年

テーブルレイアウト

2004-2006年

テーブルレイアウト

CSSレイアウト（Web標準）

自宅に固定電話やインターネット回線を引かない

若年層

タブレット

LOVE！！

シニア

インターネットにアクセスする端末としてのPCの比率が下がるのは必至

2012年4月スティーブン・シノフスキー氏（Windows 8開発責任者）

マルチデバイス/タッチデバイス対応

CSS3

FluidPE

RWD

CPP

スマートフォン、どのように持って使いますか？

Quiz

片手で持つには大きい

1. 左手で持って、左親指で操作2. 左手で持って、右手の指で操作3. 両手で持って、両親指で操作4. それ以外（タッチペンとか）


1. 左手で持って、左親指で操作2. 左手で持って、右手の指で操作3. 両手で持って、両親指で操作4. それ以外（タッチペンとか）

あなたのサイト／アプリを使うユーザーは？


このワークショップのスタディ

自分流の使い方がすべてではない持ち方によって、見えにくいところ、

タッチしにくい（届かない）領域が存在する実機検証が大切！

#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

日本語版は延期

Samsung GalaxyS IV

Nexus 7

Samsung GalaxyNote II

Nexus 4

HTC One

画像：親要素に対してのパーセント指定

div.wrapper { width: 940px;}

div.wrapper { width: 90％;}

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


.main-column

.sub-column

.sub-column

.main-column


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


.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


.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


.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

サービス　会社概要　サポート　お問い合わせ

サービス

会社概要サポート

お問い合わせ

.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;

まとめ

ありがとうございました。

k ú m Â µ ¿ ½ · 魚の目...

Documents