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.4k
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
370
Digital Design 2022-01
mathatelle
0
270
Yoshimura Lab. 2022
mathatelle
0
1.3k
create-website-html-2021
mathatelle
0
150
Multiple pages
mathatelle
0
700
How to design the individual page
mathatelle
1
100
CodePen: Making your portfolio 2021
mathatelle
0
150
single page
mathatelle
0
880
How to optimize images for Better Web Design
mathatelle
0
2.1k
Other Decks in Technology
See All in Technology
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
410
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
350
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
160
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.3k
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
160
Lambda Web Adapterについて自分なりに理解してみた
smt7174
5
130
フィンテック養成勉強会#54
finengine
0
180
Github Copilot エージェントモードで試してみた
ochtum
0
110
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
330
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.2k
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
140
【PHPカンファレンス 2025】PHPを愛するひとに伝えたい PHPとキャリアの話
tenshoku_draft
0
120
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Statistics for Hackers
jakevdp
799
220k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Being A Developer After 40
akosma
90
590k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Designing Experiences People Love
moore
142
24k
Producing Creativity
orderedlist
PRO
346
40k
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Λॻ͍ͨΒɺ ը໘ͷΛυϥοάͯ͠ ෯Λมߋͯ͠ɺ දࣔΛ֬ೝ͢Δɻ ը໘ ҎԼຖճ͏ͷͰίϐϖͯ͠͏ɻ˞֮͑ͳ͍͍ͯ͘