Suche senden
Hochladen
Responsive design
•
0 gefällt mir
•
1,614 views
Tomoyuki Kashiro
Folgen
Technologie
Melden
Teilen
Melden
Teilen
1 von 13
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
プレゼン勉強会
プレゼン勉強会
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デザインによる開発効率化
亮 門屋
Empfohlen
プレゼン勉強会
プレゼン勉強会
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
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
Weitere ähnliche Inhalte
Ähnlich wie 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
Ähnlich wie 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
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Kürzlich hochgeladen
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
Kürzlich hochgeladen
(8)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
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
Jetzt herunterladen