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
360
Digital Design 2022-01
mathatelle
0
260
Yoshimura Lab. 2022
mathatelle
0
1.3k
create-website-html-2021
mathatelle
0
140
Multiple pages
mathatelle
0
690
How to design the individual page
mathatelle
1
92
CodePen: Making your portfolio 2021
mathatelle
0
130
single page
mathatelle
0
860
How to optimize images for Better Web Design
mathatelle
0
2.1k
Other Decks in Technology
See All in Technology
JavaにおけるNull非許容性
skrb
2
2.7k
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
IAMのマニアックな話2025
nrinetcom
PRO
6
1.5k
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
1.8k
エンジニアの健康管理術 / Engineer Health Management Techniques
y_sone
7
3.3k
User Story Mapping + Inclusive Team
kawaguti
PRO
3
520
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.7k
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
800
MIMEと文字コードの闇
hirachan
2
1.5k
Amazon Aurora のバージョンアップ手法について
smt7174
2
190
事業を差別化する技術を生み出す技術
pyama86
2
540
どうすると生き残れないのか/how-not-to-survive
hanhan1978
2
690
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Writing Fast Ruby
sferik
628
61k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
115
51k
RailsConf 2023
tenderlove
29
1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Producing Creativity
orderedlist
PRO
344
40k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Six Lessons from altMBA
skipperchong
27
3.6k
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Λॻ͍ͨΒɺ ը໘ͷΛυϥοάͯ͠ ෯Λมߋͯ͠ɺ දࣔΛ֬ೝ͢Δɻ ը໘ ҎԼຖճ͏ͷͰίϐϖͯ͠͏ɻ˞֮͑ͳ͍͍ͯ͘