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
Digitization部 紹介資料
sansan33
PRO
1
4.5k
ロールが細分化された組織でSREは何をするか?
tgidgd
1
420
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.5k
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
130
三視点LLMによる複数観点レビュー
mhlyc
0
230
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
120
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
290
microCMSではじめるAIライティング
himaratsu
0
150
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
240
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
200
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
4
2.9k
Featured
See All Featured
Code Review Best Practice
trishagee
69
19k
Making Projects Easy
brettharned
116
6.3k
Adopting Sorbet at Scale
ufuk
77
9.5k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Code Reviewing Like a Champion
maltzj
524
40k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Designing Experiences People Love
moore
142
24k
Typedesign – Prime Four
hannesfritz
42
2.7k
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; } Λ಄ʹॻ͍͓ͯ͘ɻ ηϨΫλʹ Λઃఆ͢Δͱɺͯ͢ͷཁૉʹରͯ͠ద༻͞ΕΔɻ