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
350
Digital Design 2022-01
mathatelle
0
250
Yoshimura Lab. 2022
mathatelle
0
1.3k
create-website-html-2021
mathatelle
0
120
Multiple pages
mathatelle
0
670
How to design the individual page
mathatelle
1
81
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
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
160
10個のフィルタをAXI4-Streamでつなげてみた
marsee101
0
170
[Ruby] Develop a Morse Code Learning Gem & Beep from Strings
oguressive
1
170
Oracle Cloud Infrastructure:2024年12月度サービス・アップデート
oracle4engineer
PRO
0
190
社外コミュニティで学び社内に活かす共に学ぶプロジェクトの実践/backlogworld2024
nishiuma
0
260
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
37
14k
.NET 9 のパフォーマンス改善
nenonaninu
0
990
サイバー攻撃を想定したセキュリティガイドライン 策定とASM及びCNAPPの活用方法
syoshie
3
1.3k
ブラックフライデーで購入したPixel9で、Gemini Nanoを動かしてみた
marchin1989
1
540
MLOps の現場から
asei
6
650
DevFest 2024 Incheon / Songdo - Compose UI 조합 심화
wisemuji
0
110
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
460
Featured
See All Featured
RailsConf 2023
tenderlove
29
940
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
The World Runs on Bad Software
bkeepers
PRO
65
11k
The Language of Interfaces
destraynor
154
24k
Statistics for Hackers
jakevdp
796
220k
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
The Pragmatic Product Professional
lauravandoore
32
6.3k
Embracing the Ebb and Flow
colly
84
4.5k
Designing for humans not robots
tammielis
250
25k
Code Review Best Practice
trishagee
65
17k
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Λॻ͍ͨΒɺ ը໘ͷΛυϥοάͯ͠ ෯Λมߋͯ͠ɺ දࣔΛ֬ೝ͢Δɻ ը໘ ҎԼຖճ͏ͷͰίϐϖͯ͠͏ɻ˞֮͑ͳ͍͍ͯ͘