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
Pythonによる契約プログラミング入門 / PyCon JP 2025
7pairs
4
2.2k
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
290
そのグラフに「魂」は宿っているか? ~生成AI全盛期におけるデータ可視化手法とライブラリ比較~
negi111111
2
830
AIが書いたコードをAIが検証する!自律的なモバイルアプリ開発の実現
henteko
1
230
BtoBプロダクト開発の深層
16bitidol
0
130
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
110
AI×Data×SaaS×Operation
sansantech
PRO
0
100
非同期処理実行基盤 Delayed脱出 → Solid Queue完全移行への旅路。
srockstyle
3
1.3k
kaigi_on_rails_2025_設計.pdf
nay3
8
4k
バイブコーディングと継続的デプロイメント
nwiizo
2
350
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
9
3.6k
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
530
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Fireside Chat
paigeccino
40
3.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Building an army of robots
kneath
306
46k
Docker and Python
trallard
46
3.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Visualization
eitanlees
148
16k
A better future with KSS
kneath
239
17k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
560
Being A Developer After 40
akosma
90
590k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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Λॻ͍ͨΒɺ ը໘ͷΛυϥοάͯ͠ ෯Λมߋͯ͠ɺ දࣔΛ֬ೝ͢Δɻ ը໘ ҎԼຖճ͏ͷͰίϐϖͯ͠͏ɻ˞֮͑ͳ͍͍ͯ͘