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
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
2
910
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
360
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.5k
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
1
540
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
150
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
340
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
120
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
120
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
210
Goにおける 生成AIによるコード生成の ベンチマーク評価入門
daisuketakeda
2
110
GopherCon Tour 概略
logica0419
2
190
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
2
280
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Agile that works and the tools we love
rasmusluckow
331
21k
We Have a Design System, Now What?
morganepeng
53
7.8k
Visualization
eitanlees
148
16k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
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Λॻ͍ͨΒɺ ը໘ͷΛυϥοάͯ͠ ෯Λมߋͯ͠ɺ දࣔΛ֬ೝ͢Δɻ ը໘ ҎԼຖճ͏ͷͰίϐϖͯ͠͏ɻ˞֮͑ͳ͍͍ͯ͘