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
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
2
360
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
200
AI駆動開発に向けた新しいエンジニアマインドセット
kazue
0
210
Grafana Meetup Japan Vol. 6
kaedemalu
1
200
Oracle Cloud Infrastructure:2025年8月度サービス・アップデート
oracle4engineer
PRO
0
200
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
200
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
570
AWSで推進するデータマネジメント
kawanago
0
1k
Skrub: machine-learning with dataframes
gaelvaroquaux
0
120
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
110
シークレット管理だけじゃない!HashiCorp Vault でデータ暗号化をしよう / Beyond Secret Management! Let's Encrypt Data with HashiCorp Vault
nnstt1
3
220
2025年にHCP Vaultを学び直して見えた景色 / Lessons and New Perspectives from Relearning HCP Vault in 2025
aeonpeople
0
200
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
How to Ace a Technical Interview
jacobian
279
23k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
A Tale of Four Properties
chriscoyier
160
23k
A better future with KSS
kneath
239
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
A designer walks into a library…
pauljervisheath
207
24k
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; } Λ಄ʹॻ͍͓ͯ͘ɻ ηϨΫλʹ Λઃఆ͢Δͱɺͯ͢ͷཁૉʹରͯ͠ద༻͞ΕΔɻ