Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Responsive Web Design
Search
Masateru YOSHIMURA
July 07, 2020
Technology
0
1.3k
Responsive Web Design
Masateru YOSHIMURA
July 07, 2020
Tweet
Share
More Decks by Masateru YOSHIMURA
See All by Masateru YOSHIMURA
Digital Design 2022-02
mathatelle
0
340
Digital Design 2022-01
mathatelle
0
240
Yoshimura Lab. 2022
mathatelle
0
1.3k
create-website-html-2021
mathatelle
0
110
Multiple pages
mathatelle
0
650
How to design the individual page
mathatelle
1
69
CodePen: Making your portfolio 2021
mathatelle
0
120
single page
mathatelle
0
840
How to optimize images for Better Web Design
mathatelle
0
2.1k
Other Decks in Technology
See All in Technology
NgRx Signal Store
rainerhahnekamp
0
120
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
710
ユーザーストーリーのレビューを自動化したみたの
bun913
1
330
日本におけるデータエンジニアリングのこれまでとこれから
foursue
11
2.4k
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
0
220
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
240
2024/4/26 コンピュータ歴史博物館解説告知
toshi_atsumi
0
200
[PlatformCon 24] Platform Orchestrators: The Missing Middle of Internal Developer Platforms?
danielbryantuk
1
180
カオナビの利用実績をアウトカムへつなげる旅 / example-of-data-management-startup-in-kaonavi
kaonavi
0
120
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
340
現代CSSフレームワークの内部実装とその仕組み
poteboy
2
850
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
140
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
175
21k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Thoughts on Productivity
jonyablonski
57
3.8k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Practical Orchestrator
shlominoach
181
9.7k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
BBQ
matthewcrist
80
8.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Writing Fast Ruby
sferik
620
60k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
How STYLIGHT went responsive
nonsquared
92
4.8k
Transcript
Ϩεϙϯγϒ ɾ σβΠϯ
Ϩεϙϯγϒͱˠ༰ಉ͡Ͱɺը໘αΠζʹԠͯ͡ϨΠΞτ͕มΘΔ /),IUUQTXXXOILPSKQ ߦ͋ͨΓຕ ߦ͋ͨΓຕ ԣʹฒͿ ॎʹฒͿ ύιίϯ εϚϗ ϨεϙϯγϒɾσβΠϯ
8FCαΠτͷεϚʔτϑΥϯ࠷దԽ ͷͨΊͷɺ࠷ελϯμʔυͳख๏
௨ৗͭ˞ϞόΠϧϑΝʔετʹεϚϗΛ௨ৗͱߟ͑Δ ը໘ͷ෯͕͍ͱ͖ͭ ϨεϙϯγϒɾσβΠϯͷߟ͑ํ width: 50%; width: 50%; width: 33.33%; width:
33.33%; width: 33.33%; .item { width: 33.33%; } .item { width: 50%; } ը໘෯͕͍ͱ͖ ௨ৗ
Ϩεϙϯγϒʹ͢Δ$44ͷॻ͖ํ @media screen and (min-width: 560px) { .item { width:
33.33%; } } ը໘෯͕গͳ͘ͱQYˠλϒϨοτͷදࣔͷ߹ @media screen and (min-width: 960px) { .item { width: 25%; } } ը໘෯͕গͳ͘ͱQYˠύιίϯͷදࣔͷ߹ .item { width: 50%; } 560pxҎ্ 960pxҎ্ εϚϗ λϒϨοτ ύιίϯ ௨ৗ XJEUIΛ্ॻ͖ XJEUIΛ্ॻ͖ ͔͕ͬ͜ೋॏʹͳΔͷͰҙʂ
Ϩεϙϯγϒʹ͢Δίπ @media screen and (min-width: 560px) { } @media screen
and (min-width: 960px) { } $44Λॻ͍ͨΒɺ ը໘ͷΛυϥοάͯ͠ ෯Λมߋͯ͠ɺ දࣔΛ֬ೝ͢Δɻ ը໘ ҎԼຖճ͏ͷͰίϐϖͯ͠͏ɻ˞֮͑ͳ͍͍ͯ͘