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
Language Update: Java
skrb
2
260
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
200
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
110
AIエージェントの活用に重要な「MCP (Model Context Protocol)」とは何か
masayamoriofficial
0
290
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
2.8k
Grafana MCPサーバーによるAIエージェント経由でのGrafanaダッシュボード動的生成
hamadakoji
1
1.3k
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
pfn
PRO
0
460
衝突して強くなる! BLUE GIANTと アジャイルチームの共通点とは ― いきいきと活気に満ちたグルーヴあるチームを作るコツ ― / BLUE GIANT and Agile Teams
naitosatoshi
0
310
「魔法少女まどか☆マギカ Magia Exedra」のグローバル展開を支える、開発チームと翻訳チームの「意識しない協創」を実現するローカライズシステム
gree_tech
PRO
0
540
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
1.3k
Codeful Serverless / 一人運用でもやり抜く力
_kensh
4
140
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
gree_tech
PRO
0
540
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Typedesign – Prime Four
hannesfritz
42
2.8k
We Have a Design System, Now What?
morganepeng
53
7.8k
Visualization
eitanlees
148
16k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Site-Speed That Sticks
csswizardry
10
810
Producing Creativity
orderedlist
PRO
347
40k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Why Our Code Smells
bkeepers
PRO
339
57k
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Λॻ͍ͨΒɺ ը໘ͷΛυϥοάͯ͠ ෯Λมߋͯ͠ɺ දࣔΛ֬ೝ͢Δɻ ը໘ ҎԼຖճ͏ͷͰίϐϖͯ͠͏ɻ˞֮͑ͳ͍͍ͯ͘