Submit Search
Upload
Responsive design
•
0 likes
•
1,614 views
Tomoyuki Kashiro
Follow
Technology
Report
Share
Report
Share
1 of 13
Download now
Download to read offline
Recommended
プレゼン勉強会
プレゼン勉強会
Junki Hadano
レスポンシブウェブデザインの今後を考える
レスポンシブウェブデザインの今後を考える
Akinori Kawamitsu
近年のwebデザインについて
近年のwebデザインについて
比留木 武泰
Phone gap
Phone gap
Tomoyuki Kashiro
CSM5 Timtable
CSM5 Timtable
Tim Land
Dowling Middle School Campus S Ta R Chart Power Point Presentation
Dowling Middle School Campus S Ta R Chart Power Point Presentation
Kenneth Sanders
Mobile Monday Amsterdam: Free To Be Human!
Mobile Monday Amsterdam: Free To Be Human!
David Orban
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
亮 門屋
Recommended
プレゼン勉強会
プレゼン勉強会
Junki Hadano
レスポンシブウェブデザインの今後を考える
レスポンシブウェブデザインの今後を考える
Akinori Kawamitsu
近年のwebデザインについて
近年のwebデザインについて
比留木 武泰
Phone gap
Phone gap
Tomoyuki Kashiro
CSM5 Timtable
CSM5 Timtable
Tim Land
Dowling Middle School Campus S Ta R Chart Power Point Presentation
Dowling Middle School Campus S Ta R Chart Power Point Presentation
Kenneth Sanders
Mobile Monday Amsterdam: Free To Be Human!
Mobile Monday Amsterdam: Free To Be Human!
David Orban
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
亮 門屋
いま、ケータイサイトのデザインに注目すべきワケ
いま、ケータイサイトのデザインに注目すべきワケ
Cazuki HOSHINA
Developers Summit 2013【15-B-6】開発者の "資産形成" につながる Action とは?
Developers Summit 2013【15-B-6】開発者の "資産形成" につながる Action とは?
インフラジスティックス・ジャパン株式会社
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
スマートフォン・タブレット UIガイドライン
スマートフォン・タブレット UIガイドライン
MultiDeviceLab
マルチスクリーン対応と最近のアプリの傾向
マルチスクリーン対応と最近のアプリの傾向
Yuki Anzai
HTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
デスクトップアプリ開発者が押さえておくべきWindows 8 時代の変革
デスクトップアプリ開発者が押さえておくべきWindows 8 時代の変革
Yuya Yamaki
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
Teiichi Ota
Sixapart day-2012-ideamans
Sixapart day-2012-ideamans
Kunihiko Miyanaga
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
Windows 10 Developer Readiness [Japan]
Windows 10 Developer Readiness [Japan]
Akira Hatsune
「納品のない受託開発」にみるソフトウェア受託開発の未来
「納品のない受託開発」にみるソフトウェア受託開発の未来
Yoshihito Kuranuki
Android multiscreen
Android multiscreen
Kazuaki Ueda
Developers Summit 2013【14-E-3】Windows 8デザインガイド
Developers Summit 2013【14-E-3】Windows 8デザインガイド
Yuya Yamaki
モバイル革命到来!世界でもっとも信用されているサービス
モバイル革命到来!世界でもっとも信用されているサービス
株式会社ドーモ
Html5minute #5
Html5minute #5
Misaki Shibata
Liferayのパートナーの視点からみた オープンソースのこれから
Liferayのパートナーの視点からみた オープンソースのこれから
Akinori Ishii
Schoo講演資料130409
Schoo講演資料130409
Ryosuke Matsumoto
Schoo講演資料130409
Schoo講演資料130409
schoowebcampus
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Yuji Nojima
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )
iwashiira2ctf
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
iPride Co., Ltd.
More Related Content
Similar to Responsive design
いま、ケータイサイトのデザインに注目すべきワケ
いま、ケータイサイトのデザインに注目すべきワケ
Cazuki HOSHINA
Developers Summit 2013【15-B-6】開発者の "資産形成" につながる Action とは?
Developers Summit 2013【15-B-6】開発者の "資産形成" につながる Action とは?
インフラジスティックス・ジャパン株式会社
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
スマートフォン・タブレット UIガイドライン
スマートフォン・タブレット UIガイドライン
MultiDeviceLab
マルチスクリーン対応と最近のアプリの傾向
マルチスクリーン対応と最近のアプリの傾向
Yuki Anzai
HTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
デスクトップアプリ開発者が押さえておくべきWindows 8 時代の変革
デスクトップアプリ開発者が押さえておくべきWindows 8 時代の変革
Yuya Yamaki
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
Teiichi Ota
Sixapart day-2012-ideamans
Sixapart day-2012-ideamans
Kunihiko Miyanaga
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
Windows 10 Developer Readiness [Japan]
Windows 10 Developer Readiness [Japan]
Akira Hatsune
「納品のない受託開発」にみるソフトウェア受託開発の未来
「納品のない受託開発」にみるソフトウェア受託開発の未来
Yoshihito Kuranuki
Android multiscreen
Android multiscreen
Kazuaki Ueda
Developers Summit 2013【14-E-3】Windows 8デザインガイド
Developers Summit 2013【14-E-3】Windows 8デザインガイド
Yuya Yamaki
モバイル革命到来!世界でもっとも信用されているサービス
モバイル革命到来!世界でもっとも信用されているサービス
株式会社ドーモ
Html5minute #5
Html5minute #5
Misaki Shibata
Liferayのパートナーの視点からみた オープンソースのこれから
Liferayのパートナーの視点からみた オープンソースのこれから
Akinori Ishii
Schoo講演資料130409
Schoo講演資料130409
Ryosuke Matsumoto
Schoo講演資料130409
Schoo講演資料130409
schoowebcampus
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Yuji Nojima
Similar to Responsive design
(20)
いま、ケータイサイトのデザインに注目すべきワケ
いま、ケータイサイトのデザインに注目すべきワケ
Developers Summit 2013【15-B-6】開発者の "資産形成" につながる Action とは?
Developers Summit 2013【15-B-6】開発者の "資産形成" につながる Action とは?
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
スマートフォン・タブレット UIガイドライン
スマートフォン・タブレット UIガイドライン
マルチスクリーン対応と最近のアプリの傾向
マルチスクリーン対応と最近のアプリの傾向
HTML5時代のWebデザイン
HTML5時代のWebデザイン
デスクトップアプリ開発者が押さえておくべきWindows 8 時代の変革
デスクトップアプリ開発者が押さえておくべきWindows 8 時代の変革
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
Sixapart day-2012-ideamans
Sixapart day-2012-ideamans
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Windows 10 Developer Readiness [Japan]
Windows 10 Developer Readiness [Japan]
「納品のない受託開発」にみるソフトウェア受託開発の未来
「納品のない受託開発」にみるソフトウェア受託開発の未来
Android multiscreen
Android multiscreen
Developers Summit 2013【14-E-3】Windows 8デザインガイド
Developers Summit 2013【14-E-3】Windows 8デザインガイド
モバイル革命到来!世界でもっとも信用されているサービス
モバイル革命到来!世界でもっとも信用されているサービス
Html5minute #5
Html5minute #5
Liferayのパートナーの視点からみた オープンソースのこれから
Liferayのパートナーの視点からみた オープンソースのこれから
Schoo講演資料130409
Schoo講演資料130409
Schoo講演資料130409
Schoo講演資料130409
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Recently uploaded
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )
iwashiira2ctf
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
iPride Co., Ltd.
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
Satoshi Makita
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
CRI Japan, Inc.
情報を表現するときのポイント
情報を表現するときのポイント
onozaty
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
Sadaomi Nishi
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
KLab Inc. / Tech
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
atsushi061452
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperleger Tokyo Meetup
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltd
kokinagano2
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
Takayuki Nakayama
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
CRI Japan, Inc.
Recently uploaded
(12)
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
情報を表現するときのポイント
情報を表現するときのポイント
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltd
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
Responsive design
1.
Responsive Design tomoyuki kashiro
(@Tkashiro)
2.
Liquid Design
から Responsive Design
3.
Liquid Designとは? Webページの表示領域が変更されても、従来の表示を維持させる デザイン手法 ・絶対値指定→相対値指定 ( %
, em ) ・例:楽天市場TOPページ
4.
背景 ・ディスプレイの高解像度化 ・ディスプレイサイズが大きくなる ・高解像度になる 高解像度ユーザに対して余白の大きい画面ではなく より多くの情報を表示させる
小さな画面、低解像度の考慮はなし
5.
変化 - 多ディバイス- 多くのディバイスが登場
スマートフォン タブレット スマートTV
6.
問題点 ・端末ごとに最適なUIは違う ・解像度、画面サイズが小さい為、 Liquid Designでは対応でいない
7.
Responsive Designとは? 端末の画面サイズに応じてUIを切り替えるデザイン手法 下記デザイン手法から構成される ・Liquid Design ・Fluid
Image ・Media Query ・Responsive Type Setting
8.
Liquid Design 各コンテンツの要素サイズを相対値(%)で指定 --- CSS
--- #main { width : 100% ; padding : 10% ; margin : 10% ; }
9.
Fluid Image 画面のサイズを基準にして、画像を縮小拡大して表示 -- CSS
--- #mainImage { max-width : 30% ; max-height : 30% ; } ※IE系はmax-*をサポートしてない為、widthとheightで指定
10.
Media Query 特定の条件に応じてスタイルを切り替える指定 ※CSS3のプロパティ --- CSS
--- @media screen and (max-width : 640px) { #main { widht : 300px ; } }
11.
Responsive Type Settings 画面サイズに応じてフォントサイズを変える ---
CSS --- @media screen and (max-width : 480px) { #main { font-size : 14px ; } }
12.
事例 - Kings
Hill Car - http://www.kingshillcars.com/ 画面幅い応じて、デザインが変化 その他の例 http://mediaqueri.es/
13.
結論 ・端末により最適なUIは違う ・最適化されたUIをクライアントサイドで 実装できる方法の1つがResponsive Design
Download now