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
CSS - Liquid Layout
Search
Masateru YOSHIMURA
June 26, 2020
Technology
0
2k
CSS - Liquid Layout
Masateru YOSHIMURA
June 26, 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
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
170
「魔法少女まどか☆マギカ Magia Exedra」のIPのキャラクターを描くための3Dルック開発
gree_tech
PRO
0
150
[2025年10月版] Databricks Data + AI Boot Camp
databricksjapan
1
240
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
5.4k
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
3
1.7k
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
440
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
10
17k
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
1
190
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
350
serverless team topology
_kensh
2
130
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
0
140
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
710
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Six Lessons from altMBA
skipperchong
29
4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
A better future with KSS
kneath
239
18k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Transcript
ͰϨΠΞτ͢Δ
෯ͷϘοΫεΛฒΔˠը໘෯ʹ߹ΘͤͨϨΠΞτͰ͖Δ ϘοΫεʹରͯ͠෯Λࢦఆ͢Δ ฒΔࢦఆΛ͢Δ ࠷ॳʹରͯ͠ͷ෯ʹͳ͍ͬͯΔ ʹରͯ͠෯Λʢʣʹઃఆ͔ͯ͠Β ฒΔͱɺߦ͋ͨΓͭͣͭฒͿɻ ͜ͷߟ͑ํΛԠ༻͢Εɺ ͭͭͣͭฒΔ͜ͱͰ͖ΔɻͬͯΈΑ͏ɻ w50p width
: 50%; tab w100p ͞Βʹը૾ʹ ͦͷʹରͯ͠ ͽͬͨΓʢʣͷ ෯ʹઃఆ͢Δ ࣈͷޙʹQΛ͚Δͱʹల։͞ΕΔ
)5.-ͷࢠͷؔΛཧղ͠Α͏ JNH͔ΒݟͯɺJUFNʹ͋ͨΔɻ ʮࢠΛแΉʯͱ֮͑Α͏ɻ .item img .item img width: 100%; ʹͽͬͨΓ߹ΘͤΔʹ
෯Λʹઃఆ͢Δɻ EJWDMBTTJUFN JNHTSDlIUUQT QOHzBMU EJW
ฒͨͷʹNBSHJOΛ͚ͭΔ ߹Θͤͯʹ͢Δͱ ϐολϦऩ·Δ .items width: 50%; .item .item width: 50%;
.items ༨നΛ ͚ͭΔ width: 48%; .item width: 48%; .item margin: 1%; 1 + 48 + 1 + 1 + 48 + 1 100 ༨നΛؚΊͯ߹ΘͤͯʹͳΔΑ͏ʹ͢Δ
ฒͨͷʹCPSEFSͱQBEEJOH༨നΛ͚ͭΔͱ͖ʹ͓ͬͯ͘͜ͱ box-sizing : content-box; box-sizing : border-box; σϑΥϧτͪ͜Β ͪ͜Βʹมߋ͢ΔͨΊͷઃఆΛ͢Δ .items
width: 50%; .item .items width: 50%; .item .item ίϯςϯπͷʹՃ͑ͯɺ QBEEJOHCPSEFSͷ͕૿͑ΔͨΊΈग़ͯ͠͠·͏ɻ width: 50%; .item QBEEJOHCPSEFSࠐͰʹͯ͘͠ΕΔΑ͏ʹͳΔɻ Έग़͢ͱ ஈམͪ͢Δɻ
ৗʹCPYTJ[JOHCPSEFSCPYΛઃఆ͓ͯ͜͠͏ * { box-sizing: border-box; } Λ಄ʹॻ͍͓ͯ͘ɻ ηϨΫλʹ Λઃఆ͢Δͱɺͯ͢ͷཁૉʹରͯ͠ద༻͞ΕΔɻ