Enviar búsqueda
Cargar
Responsive design
•
0 recomendaciones
•
1,614 vistas
Tomoyuki Kashiro
Seguir
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 13
Descargar ahora
Descargar para leer sin conexión
Recomendados
プレゼン勉強会
プレゼン勉強会
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デザインによる開発効率化
亮 門屋
Recomendados
プレゼン勉強会
プレゼン勉強会
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
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
Más contenido relacionado
Similar a 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 a 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
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Último
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Último
(11)
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
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
Descargar ahora